add filter

api/dealer/dealer.js

@@ -1,10 +1,10 @@
 import apollo from "../../lib/apollo.js";
 
-async function GetDealers(token="", start = 0) {
+async function GetDealers(token="") {
 	var res = await apollo.query(
         `
-            query($start: Int!) {
-                dealers(limit:6,start:$start)
+            query {
+                dealers
                 {
                     name
                     kota_dealer
@@ -15,10 +15,7 @@ async function GetDealers(token="", start = 0) {
                 }
             }
         `,
-            token,
-        {
-            start: start,
-        }
+            token
 	);
 	return res;
 }
@@ -46,6 +43,29 @@ async function GetDealersDetails(token="") {
 	return res;
 }
 
+async function GetDealersbyFilter(token="") {
+	var res = await apollo.query(
+        `
+            query($input: ID!) {
+                dealers(where:{id:$input})
+                {
+                    name
+                    kota_dealer
+                    address
+                    telp
+                    email
+                    location
+                }
+            }
+        `,
+            token,
+            {	
+                "input": id
+            }
+	);
+	return res;
+}
+
 module.exports = {
 	GetDealers: GetDealers,
     GetDealersDetails: GetDealersDetails,

api/product/accessories.js

@@ -1,10 +1,10 @@
 import apollo from "../../lib/apollo.js";
 
-async function GetYGP(token="") {
+async function GetYGP(filter, token="") {
 	var res = await apollo.query(
 		`
         query {
-            accessories(where: { category: "YGP" }) {
+            accessories(where: { category: "YGP" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
                 description
@@ -20,11 +20,11 @@ async function GetYGP(token="") {
 	return res;
 }
 
-async function GetYamalube(token="") {
+async function GetYamalube(filter, token="") {
 	var res = await apollo.query(
 		`
         query {
-            accessories(where: { category: "Yamalube" }) {
+            accessories(where: { category: "Yamalube" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
                 description
@@ -40,11 +40,11 @@ async function GetYamalube(token="") {
 	return res;
 }
 
-async function GetHelmet(token="") {
+async function GetHelmet(filter, token="") {
 	var res = await apollo.query(
 		`
         query {
-            accessories(where: { category: "Helmet" }) {
+            accessories(where: { category: "Helmet" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
                 description
@@ -60,11 +60,11 @@ async function GetHelmet(token="") {
 	return res;
 }
 
-async function GetApparel(token="") {
+async function GetApparel(filter, token="") {
 	var res = await apollo.query(
 		`
         query {
-            accessories(where: { category: "Apparel" }) {
+            accessories(where: { category: "Apparel" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
                 description
@@ -80,11 +80,11 @@ async function GetApparel(token="") {
 	return res;
 }
 
-async function GetAccessories(token="") {
+async function GetAccessories(filter, token="") {
 	var res = await apollo.query(
 		`
         query {
-            accessories(where: { category: "Accessories" }) {
+            accessories(where: { category: "Accessories" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
                 description

package.json

@@ -58,6 +58,8 @@
     "react-dom": "16.13.1",
     "react-html-parser": "^2.0.2",
     "react-paginate": "^7.1.0",
+    "react-query": "^3.12.1",
+    "react-select": "^4.2.1",
     "react-slick": "0.25.2",
     "react-swipeable-views": "0.13.9",
     "rsuite": "^4.9.2",

pages-sections/dealers/dealers.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
 
 import GridContainer from "components/Grid/GridContainer.js";
 import Grid from '@material-ui/core/Grid';
@@ -14,36 +15,61 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti
 const useStyles = makeStyles(styles);
 const DataDealer = function ({ backend, dealers, ...props })  {
     const classes = useStyles();
+    
+    // const handleKotaDealer = value => {
+    //     console.log(value)
+    // }
+    const handleName = values => {
+        console.log(values)
+    }
     const Dealers = dealers.map((data) => {
         return (
-        <Grid style={{width:"400px", padding:"30px"}}>
-            <Card>
-                <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
-                <CardBody>
-                    <Quote
-                    text={data.kota_dealer}
-                    author={data.address}
-                    />
-                    <Quote
-                    text={data.telp}
-                    author={data.email}
-                    />
-                    <div align="center">
-                        <Button color="danger" round href={data.location} target="_blank">
-                            <Icon className={classes.icons}>room</Icon>View Location
-                        </Button>
-                    </div>
-                </CardBody>
-            </Card>
-        </Grid>
-        );
+            <div>
+                <Grid style={{width:"400px", padding:"30px"}}>
+                    <Card>
+                        <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
+                        <CardBody>
+                            <Quote
+                            text={data.kota_dealer}
+                            author={data.address}
+                            />
+                            <Quote
+                            text={data.telp}
+                            author={data.email}
+                            />
+                            <div align="center">
+                                <Button color="danger" round href={data.location} target="_blank">
+                                    <Icon className={classes.icons}>room</Icon>View Location
+                                </Button>
+                            </div>
+                        </CardBody>
+                    </Card>
+                </Grid>
+            </div>
+            );
         })
         return (
         <div className={classes.section} id="notifications">
             <div align="center">
-
                 <h2>Dealers & Service</h2>
             </div>
+            <Select 
+                getOptionLabel={option => `${option.name} ${option.kota_dealer}`}
+                getOptionValue={option => option.id}
+                options={dealers}
+                instanceId="name"
+                placeholder="filter by Nama Dealer"
+                onChange={values => handleName(values)}
+            />
+            <br></br>
+            {/* <Select 
+                getOptionLabel={option => `${option.kota_dealer} ${option.kota_dealer}`}
+                getOptionValue={option => option.id}
+                options={dealers}
+                instanceId="kota_dealer"
+                placeholder="filter by Kota Dealer"
+                onChange={value => handleKotaDealer(value.map(kota_dealer => kota_dealer.id))}
+            /> */}
             <div>
             <GridContainer justify="center">
                 {Dealers}

pages-sections/dealers/filter.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Select from 'react-select';
+
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// Component
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+
+const useStyles = makeStyles(styles);
+
+const DataSnackbarContent = function()  {
+    const classes = useStyles();
+    return (
+        <div align="center">
+        <div align="center" className={classes.section} id="notifications">
+            <Select 
+                // options={name}
+                instanceId="name"
+                isMulti
+                placeholder="filter by name"
+                />
+        </div>
+        </div>
+    );
+}
+
+export default DataSnackbarContent;

pages-sections/product/accessories.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
 
 import Button from "components/CustomButtons/Button.js";
 import Icon from "@material-ui/core/Icon";
@@ -12,7 +13,7 @@ import GridItem from "components/Grid/GridItem.js";
 
 const useStyles = makeStyles(styles);
 
-const DataAccessories = function ({ backend, accessories, ...props }) {
+const DataAccessories = function ({ selected, handleName, backend, accessories, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -50,6 +51,17 @@ const DataAccessories = function ({ backend, accessories, ...props }) {
             <CardBody>
             <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamaha Accessories</h2>
+                <Select
+                    value={(selected)?accessories.filter((i)=>i.id==selected):null} 
+                    getOptionLabel={option => `${option.name}`}
+                    getOptionValue={option => option.id}
+                    options={accessories}
+                    isMulti
+                    instanceId="name"
+                    placeholder="filter by Nama Part"
+                    onChange={values => handleName(values)}
+                />
+                <br></br>
                 <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                     {ProductAccessories}
                     {ProductAccessories}

pages-sections/product/apparel.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
 
 import Button from "components/CustomButtons/Button.js";
 import Icon from "@material-ui/core/Icon";
@@ -8,11 +9,10 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti
 import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
 import GridContainer from "components/Grid/GridContainer.js";
-import GridItem from "components/Grid/GridItem.js";
 
 const useStyles = makeStyles(styles);
 
-const DataApparel = function ({ backend, apparel, ...props }) {
+const DataApparel = function ({ selected, handleName, backend, apparel, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -49,10 +49,19 @@ const DataApparel = function ({ backend, apparel, ...props }) {
             <CardBody>
             <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamaha Apparel</h2>
+                <Select
+                    value={(selected)?apparel.filter((i)=>i.id==selected):null} 
+                    getOptionLabel={option => `${option.name}`}
+                    getOptionValue={option => option.id}
+                    options={apparel}
+                    isMulti
+                    instanceId="name"
+                    placeholder="filter by Nama Part"
+                    onChange={values => handleName(values)}
+                />
+                <br></br>
                 <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
-                    {ProductApparel}
-                    {ProductApparel}
-                    {ProductApparel}
+                    {ProductApparel}{ProductApparel}
                 </GridContainer>
             </div> 
             </CardBody>

pages-sections/product/helmet.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
 
 import Button from "components/CustomButtons/Button.js";
 import Icon from "@material-ui/core/Icon";
@@ -8,11 +9,10 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti
 import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
 import GridContainer from "components/Grid/GridContainer.js";
-import GridItem from "components/Grid/GridItem.js";
 
 const useStyles = makeStyles(styles);
 
-const DataHelmet = function ({ backend, helmet, ...props }) {
+const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -49,6 +49,17 @@ const DataHelmet = function ({ backend, helmet, ...props }) {
             <CardBody>
             <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamaha Helmet</h2>
+                <Select
+                    value={(selected)?helmet.filter((i)=>i.id==selected):null} 
+                    getOptionLabel={option => `${option.name}`}
+                    getOptionValue={option => option.id}
+                    options={helmet}
+                    isMulti
+                    instanceId="name"
+                    placeholder="filter by Nama Part"
+                    onChange={values => handleName(values)}
+                />
+                <br></br>
                 <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                     {ProductHelmet}{ProductHelmet}{ProductHelmet}
                 </GridContainer>

pages-sections/product/product_details.js

@@ -68,7 +68,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
               <div align="justify">
                 <p>{ReactHtmlParser(data.description)}</p>
               </div>
-              <GridContainer>
+              {/* <GridContainer>
                 <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
                   <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
                     <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png"/>
@@ -79,7 +79,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                     <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png"/>
                   </Card>
                 </Grid>
-              </GridContainer>
+              </GridContainer> */}
             </Grid>
         </GridContainer>
         <GridContainer justify="center">

pages-sections/product/yamalube.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
 
 import Button from "components/CustomButtons/Button.js";
 import Icon from "@material-ui/core/Icon";
@@ -12,7 +13,7 @@ import GridItem from "components/Grid/GridItem.js";
 
 const useStyles = makeStyles(styles);
 
-const DataYamalube = function ({ backend, yamalube, ...props }) {
+const DataYamalube = function ({ selected, handleName, backend, yamalube, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -49,6 +50,17 @@ const DataYamalube = function ({ backend, yamalube, ...props }) {
             <CardBody>
             <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamalube Oil</h2>
+                <Select
+                    value={(selected)?yamalube.filter((i)=>i.id==selected):null} 
+                    getOptionLabel={option => `${option.name}`}
+                    getOptionValue={option => option.id}
+                    options={yamalube}
+                    isMulti
+                    instanceId="name"
+                    placeholder="filter by Nama Part"
+                    onChange={values => handleName(values)}
+                />
+                <br></br>
                 <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                     {ProductYamalube}
                 </GridContainer>

pages-sections/product/ygp.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
 
 import Button from "components/CustomButtons/Button.js";
 import Icon from "@material-ui/core/Icon";
@@ -12,7 +13,7 @@ import GridItem from "components/Grid/GridItem.js";
 
 const useStyles = makeStyles(styles);
 
-const DataYGP = function ({ backend, ygp, ...props }) {
+const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -25,18 +26,15 @@ const DataYGP = function ({ backend, ygp, ...props }) {
         return (      
             <div style={{padding:"40px"}}>
                 <img
-                alt="..."
-                style={{ height: "150px", display: "block" }}
-                src={`${backend}${data.img["url"]}`}
-                className={navImageClasses}
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
                 />
                 <div align="center">
                 <h3>{data.name}</h3>
                 <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/ygp_details?s="+data.id}
-                >
+                <Button color="info" round href={"/product/ygp_details?s="+data.id}>
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
                 </div>
@@ -47,12 +45,23 @@ const DataYGP = function ({ backend, ygp, ...props }) {
         <div>
         <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
             <CardBody>
-            <div align="center" style={{marginTop:"-50px"}}>
-                <h2>Yamaha Geniue Part</h2>
-                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
-                    {ProductYGP}{ProductYGP}
-                </GridContainer>
-            </div> 
+                <div align="center" style={{marginTop:"-50px"}}>
+                    <h2>Yamaha Geniue Part</h2>
+                    <Select
+                        value={(selected)?ygp.filter((i)=>i.id==selected):null} 
+                        getOptionLabel={option => `${option.name} ${option.part_code}`}
+                        getOptionValue={option => option.id}
+                        options={ygp}
+                        isMulti
+                        instanceId="name"
+                        placeholder="filter by Nama Part"
+                        onChange={values => handleName(values)}
+                    />
+                    <br></br>
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                        {ProductYGP}
+                    </GridContainer>
+                </div> 
             </CardBody>
         </Card>
         </div>

pages-sections/product/ygp_details.js

@@ -56,17 +56,6 @@ const DetailDataYGP = function ({ backend, detailygp, ...props })  {
                         </ul>
                     </Grid>
                 </GridContainer>
-                <GridContainer>
-                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
-                    </Grid>
-                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
-                    </Grid>
-                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
-                    </Grid>
-                </GridContainer>
                 <div align="center">
                     <hr></hr>
                     <h2>Deskripsi</h2>

pages/dealers.js

@@ -10,7 +10,9 @@ import Footer from "components/Footer/Footer.js";
 import Getdealer from "../api/dealer/dealer.js";
 import DataSnackbarContent from "../pages-sections/snackbar.js";
 import DataDealers from "../pages-sections/dealers/dealers.js";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
+const queryClient = new QueryClient()
 const useStyles = makeStyles(styles);
 const Dealers = function ({ backend, dealers, ...props }) {
     const classes = useStyles();
@@ -30,26 +32,31 @@ const Dealers = function ({ backend, dealers, ...props }) {
         />
         <Parallax image={require("assets/img/dealers.png")}styles={{ marginTop: "50px" }}/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent />
-            <DataDealers dealers={dealers} backend={backend} />
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent />
+                <DataDealers dealers={dealers} backend={backend} />
+                {/* <Filter /> */}
+            </QueryClientProvider>
         </div>
         <Footer />
         </div>
     );
 };
 
-    export async function getServerSideProps(context) {
-        var dealers = [];
-        const backend = process.env.BACKEND_SERVER_URI;
+export default Dealers;
 
-        var res = await Getdealer.GetDealers();
-        if (res["STATUS"] === 1) {
-            dealers = res["DATA"]["dealers"];
-        }
+export async function getServerSideProps(context) {
+    var dealers = [];
+    const backend = process.env.BACKEND_SERVER_URI;
 
-        return {
-            props: { dealers, backend }, // will be passed to the page component as props
-        };
+    var res = await Getdealer.GetDealers();
+    if (res["STATUS"] === 1) {
+        dealers = res["DATA"]["dealers"];
     }
 
-export default Dealers;
+    console.log(res);
+
+    return {
+        props: { dealers, backend }, // will be passed to the page component as props
+    };
+}

pages/product/accessories.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
@@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import GetDataAccessories from "../../api/product/accessories.js";
 import DataAccessories from "../../pages-sections/product/accessories.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
+import Router from 'next/router'
 
 const useStyles = makeStyles(styles);
-
-const Accessories = function ({ accessories, backend, ...props }) {
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/product/accessories',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Accessories = function ({ selected, accessories, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -31,8 +39,10 @@ const Accessories = function ({ accessories, backend, ...props }) {
         />
         <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
-            <DataAccessories accessories={accessories} backend={backend} />
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataAccessories selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} accessories={accessories} backend={backend} />
+            </QueryClientProvider>
         </div>
         <Footer />
         </div>
@@ -43,14 +53,20 @@ export default Accessories;
 
 export async function getServerSideProps(context) {
     var accessories = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
     const backend = process.env.BACKEND_SERVER_URI;
     
-    var res = await GetDataAccessories.GetAccessories();
+    var res = await GetDataAccessories.GetAccessories(filter);
     if (res["STATUS"] === 1) {
         accessories = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = accessories.filter((i)=>i.name==filter);
+        }
     }
 
     return { 
-        props: { accessories, backend }, // will be passed to the page component as props
+        props: { selected, accessories, backend }, // will be passed to the page component as props
     };
 }

pages/product/apparel.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
@@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import GetDataApparel from "../../api/product/accessories.js";
 import DataApparel from "../../pages-sections/product/apparel.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
+import Router from 'next/router'
 
 const useStyles = makeStyles(styles);
-
-const Apparel = function ({ apparel, backend, ...props }) {
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/product/apparel',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Apparel = function ({ selected, apparel, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -31,8 +39,10 @@ const Apparel = function ({ apparel, backend, ...props }) {
         />
         <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
-            <DataApparel apparel={apparel} backend={backend} />
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} backend={backend} />
+            </QueryClientProvider>
         </div>
         <Footer />
         </div>
@@ -43,14 +53,21 @@ export default Apparel;
 
 export async function getServerSideProps(context) {
     var apparel = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
     const backend = process.env.BACKEND_SERVER_URI;
     
-    var res = await GetDataApparel.GetApparel();
+    var res = await GetDataApparel.GetApparel(filter);
+    
     if (res["STATUS"] === 1) {
         apparel = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = apparel.filter((i)=>i.name==filter);
+        }
     }
 
     return { 
-        props: { apparel, backend }, // will be passed to the page component as props
+        props: { selected, apparel, backend }, // will be passed to the page component as props
     };
 }

pages/product/helmet.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
@@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import GetDataHelmet from "../../api/product/accessories.js";
 import DataHelmet from "../../pages-sections/product/helmet.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
+import Router from 'next/router'
 
 const useStyles = makeStyles(styles);
-
-const Helmet = function ({ helmet, backend, ...props }) {
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/product/helmet',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Helmet = function ({ selected, helmet, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -31,8 +39,10 @@ const Helmet = function ({ helmet, backend, ...props }) {
         />
         <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
-            <DataHelmet helmet={helmet} backend={backend} />
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataHelmet selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} helmet={helmet} backend={backend} />
+            </QueryClientProvider>
         </div>
         <Footer />
         </div>
@@ -43,14 +53,20 @@ export default Helmet;
 
 export async function getServerSideProps(context) {
     var helmet = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
     const backend = process.env.BACKEND_SERVER_URI;
     
-    var res = await GetDataHelmet.GetHelmet();
+    var res = await GetDataHelmet.GetHelmet(filter);
     if (res["STATUS"] === 1) {
         helmet = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = helmet.filter((i)=>i.name==filter);
+        }
     }
 
     return { 
-        props: { helmet, backend }, // will be passed to the page component as props
+        props: { selected, helmet, backend }, // will be passed to the page component as props
     };
 }

pages/product/yamalube.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
@@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import GetDataYamalube from "../../api/product/accessories.js";
 import DataYamalube from "../../pages-sections/product/yamalube.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
+import Router from 'next/router'
 
 const useStyles = makeStyles(styles);
-
-const Yamalube = function ({ yamalube, backend, ...props }) {
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/product/yamalube',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Yamalube = function ({ selected, yamalube, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -31,8 +39,10 @@ const Yamalube = function ({ yamalube, backend, ...props }) {
         />
         <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
-            <DataYamalube yamalube={yamalube} backend={backend} />
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataYamalube selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} yamalube={yamalube} backend={backend} />
+            </QueryClientProvider>
         </div>
         <Footer />
         </div>
@@ -43,16 +53,21 @@ export default Yamalube;
 
 export async function getServerSideProps(context) {
     var yamalube = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
     const backend = process.env.BACKEND_SERVER_URI;
 
-    var res = await GetDataYamalube.GetYamalube();
-    console.log(res);
+    var res = await GetDataYamalube.GetYamalube(filter);
 
     if (res["STATUS"] === 1) {
         yamalube = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = yamalube.filter((i)=>i.name==filter);
+        }
     }
 
     return { 
-        props: { yamalube, backend }, // will be passed to the page component as props
+        props: { selected, yamalube, backend }, // will be passed to the page component as props
     };
 }

pages/product/ygp.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
@@ -11,10 +12,19 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import GetDataYGP from "../../api/product/accessories.js";
 import DataYGP from "../../pages-sections/product/ygp.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
+import Router from 'next/router'
+
 
 const useStyles = makeStyles(styles);
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/product/ygp',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
 
-const YGP = function ({ ygp, backend, ...props }) {
+}
+const YGP = function ({ selected,ygp, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -31,8 +41,10 @@ const YGP = function ({ ygp, backend, ...props }) {
         />
         <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
-            <DataYGP ygp={ygp} backend={backend} />
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataYGP selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} ygp={ygp} backend={backend} />
+            </QueryClientProvider>
         </div>
         <Footer />
         </div>
@@ -43,16 +55,21 @@ export default YGP;
 
 export async function getServerSideProps(context) {
     var ygp = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+    
     const backend = process.env.BACKEND_SERVER_URI;
 
-    var res = await GetDataYGP.GetYGP();
-    console.log(res);
+    var res = await GetDataYGP.GetYGP(filter);
 
     if (res["STATUS"] === 1) {
         ygp = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = ygp.filter((i)=>i.name==filter);
+        }
     }
-
+    
     return { 
-        props: { ygp, backend }, // will be passed to the page component as props
+        props: { selected, ygp, backend }, // will be passed to the page component as props
     };
 }

pages/product/ygp_details.js

@@ -47,8 +47,7 @@ export async function getServerSideProps(context) {
 	if (res["STATUS"] === 1) {
 		detailygp = res["DATA"]["accessories"];
 	}
-    console.log(detailygp);
-
+    
 	return {
 		props: { detailygp, backend }, // will be passed to the page component as props
 	};

yarn.lock

@@ -885,6 +885,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.6.2":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
+  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.7.0":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -932,6 +939,17 @@
   resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-1.3.5.tgz#e5bf3837cbd3f5f5f5d7f49d8549e4118ea75f8d"
   integrity sha512-b0JQb10Lie07iW2/9uKCQSrXif262d6zfYBstCLLJUk0JVA+7o/yLDg5p2+GkjgJbmodjHozIXs4Bi34RRhL8Q==
 
+"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
+  integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -949,16 +967,60 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.1.5"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
+  integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.1.tgz#322cdebfdbb5a88946f17006548191859b9b0855"
+  integrity sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
+  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@^0.7.4":
+"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@fortawesome/fontawesome-free@^5.12.0":
   version "5.15.1"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
@@ -1681,6 +1743,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+big-integer@^1.6.16:
+  version "1.6.48"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.48.tgz#8fd88bd1632cba4a1c8c3e3d7159f08bb95b4b9e"
+  integrity sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -1771,6 +1838,19 @@ brcast@^3.0.1:
   resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.2.tgz#55c41a7a077ff4e7ac784c2060e544d4c39ad477"
   integrity sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA==
 
+broadcast-channel@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.4.1.tgz#65b63068d0a5216026a19905c9b2d5e9adf0928a"
+  integrity sha512-VXYivSkuBeQY+pL5hNQQNvBdKKQINBAROm4G8lAbWQfOZ7Yn4TMcgLNlJyEqlkxy5G8JJBsI3VJ1u8FUTOROcg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    detect-node "^2.0.4"
+    js-sha3 "0.8.0"
+    microseconds "0.2.0"
+    nano-time "1.0.0"
+    rimraf "3.0.2"
+    unload "2.2.0"
+
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -2764,6 +2844,11 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
+detect-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -3674,7 +3759,7 @@ hoist-non-react-statics@^2.3.1:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4210,6 +4295,11 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
   integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -4647,6 +4737,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-sorter@^6.0.2:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.0.tgz#454a1b31ed218cddbce6231a0ecb5fdc549fed01"
+  integrity sha512-efYOf/wUpNb8FgNY+cOD2EIJI1S5I7YPKsw0LBp7wqPh5pmMS6i/wr3ZWwfwrAw1NvqTA2KUReVRWDX84lUcOQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 material-ui-pickers@2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/material-ui-pickers/-/material-ui-pickers-2.2.4.tgz#8b33cfc55cbc5b2d520db45abf4b3dc94090dd3c"
@@ -4708,6 +4806,11 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -4769,6 +4872,11 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+microseconds@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
+  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -4941,6 +5049,13 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nano-time@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
+  integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=
+  dependencies:
+    big-integer "^1.6.16"
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -6217,6 +6332,13 @@ react-image-lightbox@5.1.1:
     prop-types "^15.6.2"
     react-modal "^3.8.1"
 
+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
@@ -6277,6 +6399,15 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-query@^3.12.1:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.12.1.tgz#6d60f32f368734fe03fd7d1a291a7715f4488c12"
+  integrity sha512-NdO1yucDM2ic4JkK46qgGjGggtHjT/R7I7gCChTllYHvZn2DVtIGwH6P1UVtGZVLgL7hn5Eq3Cw7eDbMija5uA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    broadcast-channel "^3.4.1"
+    match-sorter "^6.0.2"
+
 react-refresh@0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.1.tgz#5500506ad6fc891fdd057d0bf3581f9310abc6a2"
@@ -6319,6 +6450,19 @@ react-scroll@1.7.16:
     lodash.throttle "^4.1.1"
     prop-types "^15.5.8"
 
+react-select@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.2.1.tgz#15c4837dffc1c23e91b7fde606c468cc10000a06"
+  integrity sha512-JwwZjsR10AD5RXmx4iEkN0Ndim/uSaQ8j8cxMwOg8SJFeyXwu/m+sdSQ0ds0AWFm7hhXG9kusC3CQ/s4UNcOIg==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.0.0"
+    "@emotion/react" "^11.1.1"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^3.0.0"
+    react-transition-group "^4.3.0"
+
 react-slick@0.25.2:
   version "0.25.2"
   resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.25.2.tgz#56331b67d47d8bcfe2dceb6acab1c8fd5bd1f6bc"
@@ -6591,6 +6735,11 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6728,6 +6877,13 @@ rimraf@2, rimraf@^2.5.4, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -7342,6 +7498,11 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+stylis@^4.0.3:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.7.tgz#412a90c28079417f3d27c028035095e4232d2904"
+  integrity sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7657,6 +7818,14 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
+unload@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
+  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "^2.0.4"
+
 unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"