- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/shop-templates-list/shop-templates-list.container.jsx

@@ -1,79 +1,79 @@
-import { useQuery } from "@apollo/client";
-import { List, Button, Drawer } from "antd";
+import {useQuery} from "@apollo/client";
+import {Button, Drawer, List} from "antd";
 import React from "react";
-import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
+import {QUERY_CUSTOM_TEMPLATES} from "../../graphql/templates.queries";
 import AlertComponent from "../alert/alert.component";
 import Skeleton from "../loading-skeleton/loading-skeleton.component";
-import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
+import {useTranslation} from "react-i18next";
+import {useLocation, useNavigate} from "react-router-dom";
 import queryString from "query-string";
-import { TemplateList } from "../../utils/TemplateConstants";
+import {TemplateList} from "../../utils/TemplateConstants";
 import ShopTemplateAdd from "../shop-template-add/shop-template-add.component";
 import ShopTemplateDeleteComponent from "../shop-template-delete/shop-template-delete.component";
 
-export default function ShopTemplatesListContainer({ visibleState }) {
-  const [visible, setVisible] = visibleState;
-  const { loading, error, data, refetch } = useQuery(QUERY_CUSTOM_TEMPLATES, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-  const { t } = useTranslation();
-  const search = queryString.parse(useLocation().search);
-  const history = useHistory();
-  if (error) return <AlertComponent message={error.message} type="error" />;
+export default function ShopTemplatesListContainer({openState}) {
+    const [open, setOpen] = openState;
+    const {loading, error, data, refetch} = useQuery(QUERY_CUSTOM_TEMPLATES, {
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
+    const {t} = useTranslation();
+    const search = queryString.parse(useLocation().search);
+    const history = useNavigate();
+    if (error) return <AlertComponent message={error.message} type="error"/>;
 
-  const handleEdit = (record) => {
-    if (record) {
-      if (record.id) {
-        search.customTemplateId = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.customTemplateId;
-      history.push({ search: queryString.stringify(search) });
-    }
-  };
+    const handleEdit = (record) => {
+        if (record) {
+            if (record.id) {
+                search.customTemplateId = record.id;
+                history({search: queryString.stringify(search)});
+            }
+        } else {
+            delete search.customTemplateId;
+            history({search: queryString.stringify(search)});
+        }
+    };
 
-  return (
-    <Drawer
-      placement="left"
-      width="25%"
-      visible={visible}
-      onClose={() => setVisible(false)}
-    >
-      <div>
-        <div>{t("bodyshop.labels.customtemplates")}</div>
-        <ShopTemplateAdd
-          shopTemplateList={data ? data.templates : []}
-          refetch={refetch}
-        />
-        <List
-          loading={loading}
-          itemLayout="horizontal"
-          dataSource={data ? data.templates : []}
-          renderItem={(item) => (
-            <List.Item
-              actions={[
-                <Button onClick={() => handleEdit(item)}>
-                  {t("general.actions.edit")}
-                </Button>,
-                <ShopTemplateDeleteComponent
-                  templateId={item.id}
-                  refetch={refetch}
-                />,
-              ]}
-            >
-              <Skeleton title={false} loading={item.loading} active>
-                <div style={{ display: "flex", flexDirection: "column" }}>
-                  <div>{TemplateList()[item.name].title}</div>
-                  <div>{TemplateList()[item.name].description}</div>
-                  <div>{TemplateList()[item.name].drivingid}</div>
-                </div>
-              </Skeleton>
-            </List.Item>
-          )}
-        />
-      </div>
-    </Drawer>
-  );
+    return (
+        (<Drawer
+            placement="left"
+            width="25%"
+            open={open}
+            onClose={() => setOpen(false)}
+        >
+            <div>
+                <div>{t("bodyshop.labels.customtemplates")}</div>
+                <ShopTemplateAdd
+                    shopTemplateList={data ? data.templates : []}
+                    refetch={refetch}
+                />
+                <List
+                    loading={loading}
+                    itemLayout="horizontal"
+                    dataSource={data ? data.templates : []}
+                    renderItem={(item) => (
+                        <List.Item
+                            actions={[
+                                <Button onClick={() => handleEdit(item)}>
+                                    {t("general.actions.edit")}
+                                </Button>,
+                                <ShopTemplateDeleteComponent
+                                    templateId={item.id}
+                                    refetch={refetch}
+                                />,
+                            ]}
+                        >
+                            <Skeleton title={false} loading={item.loading} active>
+                                <div rootStyle={{display: "flex", flexDirection: "column"}}>
+                                    <div>{TemplateList()[item.name].title}</div>
+                                    <div>{TemplateList()[item.name].description}</div>
+                                    <div>{TemplateList()[item.name].drivingid}</div>
+                                </div>
+                            </Skeleton>
+                        </List.Item>
+                    )}
+                />
+            </div>
+        </Drawer>)
+    );
 }