Added basic pages for template editing BOD-85

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

@@ -0,0 +1,56 @@
+import { useQuery } from "@apollo/react-hooks";
+import { List, Button } from "antd";
+import React from "react";
+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 queryString from "query-string";
+
+export default function ShopTemplatesListContainer() {
+  const { loading, error, data } = useQuery(QUERY_CUSTOM_TEMPLATES);
+  const { t } = useTranslation();
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+  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) });
+    }
+  };
+
+  return (
+    <div>
+      <div>CUSTOM TEMPLATES</div>
+      <List
+        loading={loading}
+        itemLayout='horizontal'
+        dataSource={data ? data.templates : []}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <Button onClick={() => handleEdit(item)}>
+                {t("general.actions.edit")}
+              </Button>,
+              <Button>{t("general.actions.delete")}</Button>,
+            ]}>
+            <Skeleton title={false} loading={item.loading} active>
+              <List.Item.Meta
+                title={item.name}
+                description='TODO CROSS MATCH DESCRIPTION'
+              />
+            </Skeleton>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+}