feat(web): add content table hook (#266)

reearth · Oct 6, 2022 · e78bc50 · e78bc50
1 parent 3dbe920
commit e78bc50
Show file tree

Hide file tree

Showing 10 changed files with 617 additions and 255 deletions.
diff --git a/web/src/components/molecules/Content/ContentListMolecule/index.tsx b/web/src/components/molecules/Content/ContentListMolecule/index.tsx
@@ -0,0 +1,57 @@
+import styled from "@emotion/styled";
+
+import Content from "@reearth-cms/components/atoms/Content";
+import PageHeader from "@reearth-cms/components/atoms/PageHeader";
+import { ProColumns } from "@reearth-cms/components/atoms/ProTable";
+import ContentTable from "@reearth-cms/components/molecules/Content/ContentTable";
+import { ContentTableField } from "@reearth-cms/components/molecules/Content/types";
+
+export type Props = {
+  modelName?: string;
+  contentTableFields?: ContentTableField[];
+  contentTableColumns?: ProColumns<ContentTableField>[];
+  modelsMenu: React.ReactNode;
+};
+
+const ContentListMolecule: React.FC<Props> = ({
+  modelName,
+  contentTableFields,
+  contentTableColumns,
+  modelsMenu: ModelsMenu,
+}) => (
+  <PaddedContent>
+    <LeftPaneWrapper>{ModelsMenu}</LeftPaneWrapper>
+    <ContentChild>
+      <PageHeader title={modelName} />
+      <StyledContentTable
+        contentTableFields={contentTableFields}
+        contentTableColumns={contentTableColumns}
+      />
+    </ContentChild>
+  </PaddedContent>
+);
+
+const LeftPaneWrapper = styled.div`
+  width: 200px;
+`;
+
+const PaddedContent = styled(Content)`
+  margin: 16px;
+  background-color: #fff;
+  display: flex;
+  min-height: 100%;
+`;
+
+const StyledContentTable = styled(ContentTable)`
+  flex: 1;
+  background-color: #fff;
+  padding: 24px;
+`;
+
+const ContentChild = styled.div`
+  flex: 1;
+  background-color: #fff;
+  padding: 24px;
+`;
+
+export default ContentListMolecule;
diff --git a/web/src/components/molecules/Content/ContentTable/index.tsx b/web/src/components/molecules/Content/ContentTable/index.tsx
@@ -1,10 +1,12 @@
 import ProTable, { ListToolBarProps, ProColumns } from "@reearth-cms/components/atoms/ProTable";
+import { ContentTableField } from "@reearth-cms/components/molecules/Content/types";
 
-const columns: ProColumns<any>[] = [];
-
-const ContentTable: React.FC = () => {
-  const dataSource: [] = [];
+export type Props = {
+  contentTableFields?: ContentTableField[];
+  contentTableColumns?: ProColumns<ContentTableField>[];
+};
 
+const ContentTable: React.FC<Props> = ({ contentTableFields, contentTableColumns }) => {
   const handleToolbarEvents: ListToolBarProps | undefined = {
     search: {
       onSearch: _ => {},
@@ -13,8 +15,8 @@ const ContentTable: React.FC = () => {
 
   return (
     <ProTable
-      dataSource={dataSource}
-      columns={columns}
+      dataSource={contentTableFields}
+      columns={contentTableColumns}
       search={false}
       rowKey="id"
       toolbar={handleToolbarEvents}

diff --git a/web/src/components/molecules/Content/types.ts b/web/src/components/molecules/Content/types.ts
@@ -0,0 +1,19 @@
+import { FieldType } from "@reearth-cms/components/molecules/Schema/types";
+
+export type ItemField = {
+  schemaFieldID: string;
+  type: FieldType;
+  value: any;
+};
+
+export type Item = {
+  id: string;
+  schemaID: string;
+  fields: ItemField[] | undefined | null;
+};
+
+export type ContentTableField = {
+  id: string;
+  schemaID: string;
+  fields: { [key: string]: any };
+};
diff --git a/web/src/components/organisms/Project/Content/ContentList/hooks.ts b/web/src/components/organisms/Project/Content/ContentList/hooks.ts
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+
+import { ProColumns } from "@reearth-cms/components/atoms/ProTable";
+import { ContentTableField } from "@reearth-cms/components/molecules/Content/types";
+import { useGetItemsQuery } from "@reearth-cms/gql/graphql-client-api";
+import { useModel } from "@reearth-cms/state";
+
+export default () => {
+  const [currentModel] = useModel();
+  const { data } = useGetItemsQuery({
+    variables: { schemaID: currentModel?.schema.id ?? "", first: 100 },
+    skip: !currentModel?.schema.id,
+  });
+
+  const contentTableFields: ContentTableField[] | undefined = useMemo(() => {
+    return data?.items.nodes
+      ?.map(item =>
+        item
+          ? {
+              ...item,
+              fields: item?.fields?.reduce(
+                (obj, field) => Object.assign(obj, { [field.schemaFieldID]: field.value }),
+                {},
+              ),
+            }
+          : undefined,
+      )
+      .filter((contentTableField): contentTableField is ContentTableField => !!contentTableField);
+  }, [data?.items.nodes]);
+
+  const contentTableColumns: ProColumns<ContentTableField>[] | undefined = useMemo(() => {
+    return currentModel?.schema.fields.map(field => ({
+      title: field.title,
+      dataIndex: ["fields", field.id],
+      key: field.id,
+    }));
+  }, [currentModel?.schema.fields]);
+
+  return {
+    currentModel,
+    contentTableFields,
+    contentTableColumns,
+  };
+};
diff --git a/web/src/components/organisms/Project/Content/ContentList/index.tsx b/web/src/components/organisms/Project/Content/ContentList/index.tsx
@@ -1,15 +1,17 @@
-import styled from "@emotion/styled";
 import { useCallback } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
-import Content from "@reearth-cms/components/atoms/Content";
-import ContentTable from "@reearth-cms/components/molecules/Content/ContentTable";
+import ContentListMolecule from "@reearth-cms/components/molecules/Content/ContentListMolecule";
 import ModelsMenu from "@reearth-cms/components/organisms/Project/ModelsMenu";
 import { useT } from "@reearth-cms/i18n";
 
+import useHooks from "./hooks";
+
 const ContentList: React.FC = () => {
   const t = useT();
 
+  const { currentModel, contentTableFields, contentTableColumns } = useHooks();
+
   const navigate = useNavigate();
 
   const { projectId, workspaceId } = useParams();
@@ -22,30 +24,13 @@ const ContentList: React.FC = () => {
   );
 
   return (
-    <PaddedContent>
-      <StyledModelsMenu title={t("Content")} selectModel={selectModel} />
-      <ContentChild>
-        <ContentTable />
-      </ContentChild>
-    </PaddedContent>
+    <ContentListMolecule
+      modelName={currentModel?.name}
+      contentTableFields={contentTableFields}
+      contentTableColumns={contentTableColumns}
+      modelsMenu={<ModelsMenu title={t("Content")} selectModel={selectModel} />}
+    />
   );
 };
 
-const PaddedContent = styled(Content)`
-  margin: 16px;
-  background-color: #fff;
-  display: flex;
-  min-height: 100%;
-`;
-
-const StyledModelsMenu = styled(ModelsMenu)`
-  width: 200px;
-`;
-
-const ContentChild = styled.div`
-  flex: 1;
-  background-color: #fff;
-  padding: 24px;
-`;
-
 export default ContentList;
diff --git a/web/src/components/organisms/Project/ModelsMenu/hooks.ts b/web/src/components/organisms/Project/ModelsMenu/hooks.ts
@@ -7,6 +7,7 @@ import {
   useCheckModelKeyAvailabilityLazyQuery,
   Model as GQLModel,
 } from "@reearth-cms/gql/graphql-client-api";
+import { useModel } from "@reearth-cms/state";
 
 type Params = {
   projectId?: string;
@@ -34,6 +35,7 @@ const fromModel = (model: GQLModel) => ({
 });
 
 export default ({ projectId, modelId }: Params) => {
+  const [currentModel, setCurrentModel] = useModel();
   const [modelModalShown, setModelModalShown] = useState(false);
   const [isKeyAvailable, setIsKeyAvailable] = useState(false);
   const [CheckModelKeyAvailability, { data: keyData }] = useCheckModelKeyAvailabilityLazyQuery({
@@ -74,6 +76,11 @@ export default ({ projectId, modelId }: Params) => {
     [rawModel],
   );
 
+  useEffect(() => {
+    if (!model || model.id === currentModel?.id) return;
+    setCurrentModel(model);
+  }, [model, currentModel, setCurrentModel]);
+
   const [createNewModel] = useCreateModelMutation({
     refetchQueries: ["GetModels"],
   });