refactor(web): improve load projects on dashboard page (#1241)

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx

@@ -29,7 +29,13 @@ export default ({
   const t = useT();
   const { useStoriesQuery, usePublishStory } = useStorytellingFetcher();
   const { useExportProject, usePublishProject } = useProjectFetcher();
-  const { stories } = useStoriesQuery({ sceneId: project?.sceneId });
+  const { stories } = useStoriesQuery(
+    {
+      sceneId: project?.sceneId
+    },
+    // We fetch stories only for check publish status, we can skip fetching stories if project is published already since the indicator shows when project OR any story is published
+    { skip: project?.isPublished }
+  );
 
   const [isEditing, setIsEditing] = useState(false);
   const [projectName, setProjectName] = useState(project.name);
@@ -58,14 +64,6 @@ export default ({
       onProjectSelect?.(undefined);
   }, [onProjectSelect, project.id, selectedProjectId]);
 
-  // const openExportModal = useCallback(() => {
-  //   setExportModalVisible(true);
-  // }, []);
-
-  // const closeExportModal = useCallback(() => {
-  //   setExportModalVisible(false);
-  // }, []);
-
   const handleExportProject = useCallback(async () => {
     if (!project.id) return;
 

web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts

@@ -83,7 +83,10 @@ export default (workspaceId?: string) => {
               createdAt: new Date(project.createdAt),
               coreSupport: project.coreSupport,
               starred: project.starred,
-              isDeleted: project.isDeleted
+              isDeleted: project.isDeleted,
+              isPublished:
+                project.publishmentStatus === "PUBLIC" ||
+                project.publishmentStatus === "LIMITED"
             }
           : undefined
       )

web/src/beta/features/Dashboard/type.ts

@@ -17,6 +17,7 @@ export type Project = {
   projectType?: ProjectType;
   starred?: boolean;
   isDeleted?: boolean;
+  isPublished?: boolean;
 };
 
 export type DeletedProject = {

web/src/services/api/storytellingApi/index.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { MutationReturn } from "@reearth/services/api/types";
+import { CustomOptions, MutationReturn } from "@reearth/services/api/types";
 import {
   CreateStoryInput,
   CreateStoryMutation,
@@ -29,16 +29,19 @@ export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
 
-  const useStoriesQuery = useCallback(({ sceneId, lang }: StoryQueryProps) => {
-    const { data, ...rest } = useQuery(GET_SCENE, {
-      variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId
-    });
+  const useStoriesQuery = useCallback(
+    ({ sceneId, lang }: StoryQueryProps, options?: CustomOptions) => {
+      const { data, ...rest } = useQuery(GET_SCENE, {
+        variables: { sceneId: sceneId ?? "", lang },
+        skip: !sceneId || options?.skip
+      });
 
-    const stories = useMemo(() => getStories(data), [data]);
+      const stories = useMemo(() => getStories(data), [data]);
 
-    return { stories, ...rest };
-  }, []);
+      return { stories, ...rest };
+    },
+    []
+  );
 
   const [createStoryMutation] = useMutation<
     CreateStoryMutation,

web/src/services/api/types.ts

@@ -10,3 +10,7 @@ export type MutationReturn<T> = {
   status: "success" | "error";
   errors?: readonly GraphQLFormattedError[];
 };
+
+export type CustomOptions = {
+  skip?: boolean;
+};

web/src/services/gql/__gen__/gql.ts

@@ -50,7 +50,7 @@ const documents = {
     "\n  mutation UploadPlugin($sceneId: ID!, $file: Upload, $url: URL) {\n    uploadPlugin(input: { sceneId: $sceneId, file: $file, url: $url }) {\n      plugin {\n        id\n        name\n        version\n        description\n        author\n      }\n      scenePlugin {\n        pluginId\n        propertyId\n      }\n    }\n  }\n": types.UploadPluginDocument,
     "\n  mutation UninstallPlugin($sceneId: ID!, $pluginId: ID!) {\n    uninstallPlugin(input: { sceneId: $sceneId, pluginId: $pluginId }) {\n      pluginId\n    }\n  }\n": types.UninstallPluginDocument,
     "\n  query GetProject($projectId: ID!) {\n    node(id: $projectId, type: PROJECT) {\n      id\n      ... on Project {\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n    }\n  }\n": types.GetProjectDocument,
-    "\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n": types.GetProjectsDocument,
+    "\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n": types.GetProjectsDocument,
     "\n  query CheckProjectAlias($alias: String!) {\n    checkProjectAlias(alias: $alias) {\n      alias\n      available\n    }\n  }\n": types.CheckProjectAliasDocument,
     "\n  mutation CreateProject(\n    $teamId: ID!\n    $visualizer: Visualizer!\n    $name: String!\n    $description: String!\n    $imageUrl: URL\n    $coreSupport: Boolean\n  ) {\n    createProject(\n      input: {\n        teamId: $teamId\n        visualizer: $visualizer\n        name: $name\n        description: $description\n        imageUrl: $imageUrl\n        coreSupport: $coreSupport\n      }\n    ) {\n      project {\n        id\n        name\n        description\n        imageUrl\n        coreSupport\n      }\n    }\n  }\n": types.CreateProjectDocument,
     "\n  mutation UpdateProject(\n    $projectId: ID!\n    $name: String\n    $description: String\n    $imageUrl: URL\n    $publicTitle: String\n    $publicDescription: String\n    $publicImage: String\n    $deleteImageUrl: Boolean\n    $deletePublicImage: Boolean\n    $enableGa: Boolean\n    $trackingId: String\n    $starred:Boolean\n    $deleted: Boolean\n  ) {\n    updateProject(\n      input: {\n        projectId: $projectId\n        name: $name\n        description: $description\n        imageUrl: $imageUrl\n        publicTitle: $publicTitle\n        publicDescription: $publicDescription\n        publicImage: $publicImage\n        deleteImageUrl: $deleteImageUrl\n        deletePublicImage: $deletePublicImage\n        enableGa: $enableGa\n        trackingId: $trackingId\n        starred: $starred\n        deleted: $deleted\n      }\n    ) {\n      project {\n        id\n        ...ProjectFragment\n      }\n    }\n  }\n\n": types.UpdateProjectDocument,
@@ -262,7 +262,7 @@ export function gql(source: "\n  query GetProject($projectId: ID!) {\n    node(i
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"): (typeof documents)["\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"];
+export function gql(source: "\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"): (typeof documents)["\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */