chore(web): publish tab type (#659)

reearth · Sep 6, 2023 · feca387 · feca387
1 parent caee550
commit feca387
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 16 deletions.
diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
-// import TabButton from "@reearth/beta/components/TabButton";
+import TabButton from "@reearth/beta/components/TabButton";
 import Text from "@reearth/beta/components/Text";
 import SecondaryNav from "@reearth/beta/features/Editor/SecondaryNav";
 import { config } from "@reearth/services/config";
@@ -24,7 +24,7 @@ type Props = {
   onProjectTypeChange: (type: ProjectType) => void;
 };
 
-const Nav: React.FC<Props> = ({ projectId }) => {
+const Nav: React.FC<Props> = ({ projectId, selectedProjectType, onProjectTypeChange }) => {
   const t = useT();
 
   const {
@@ -55,7 +55,7 @@ const Nav: React.FC<Props> = ({ projectId }) => {
     <>
       <StyledSecondaryNav>
         <LeftSection>
-          {/* <TabButton
+          <TabButton
             selected={selectedProjectType === "default"}
             label={t("Scene")}
             onClick={() => onProjectTypeChange("default")}
@@ -64,7 +64,7 @@ const Nav: React.FC<Props> = ({ projectId }) => {
             selected={selectedProjectType === "story"}
             label={t("Story")}
             onClick={() => onProjectTypeChange("story")}
-          /> */}
+          />
         </LeftSection>
         <Popover.Provider
           open={dropdownOpen}

diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
@@ -5,7 +5,6 @@ import { type PublishStatus } from "@reearth/beta/features/Editor/tabs/publish/N
 import {
   UpdateProjectInput,
   ProjectPayload,
-  PublishmentStatus,
   Visualizer,
   DeleteProjectInput,
   ArchiveProjectMutationVariables,
@@ -28,6 +27,7 @@ import { useT } from "@reearth/services/i18n";
 
 import { useNotification } from "../state";
 
+import { toGqlStatus } from "./toGqlStatus";
 import { MutationReturn } from "./types";
 
 export type Project = ProjectPayload["project"];
@@ -253,11 +253,3 @@ export default () => {
     useUpdateProjectAlias,
   };
 };
-
-const toGqlStatus = (status?: PublishStatus) => {
-  return status === "limited"
-    ? PublishmentStatus.Limited
-    : status == "published"
-    ? PublishmentStatus.Public
-    : PublishmentStatus.Private;
-};
diff --git a/web/src/services/api/storytellingApi/index.ts b/web/src/services/api/storytellingApi/index.ts
@@ -1,17 +1,23 @@
 import { useMutation } from "@apollo/client";
 import { useCallback } from "react";
 
+import { PublishStatus } from "@reearth/beta/features/Editor/tabs/publish/Nav/PublishModal/hooks";
 import { MutationReturn } from "@reearth/services/api/types";
 import {
   CreateStoryInput,
   CreateStoryMutation,
   MutationCreateStoryArgs,
   UpdateStoryInput,
 } from "@reearth/services/gql/__gen__/graphql";
-import { CREATE_STORY, UPDATE_STORY } from "@reearth/services/gql/queries/storytelling";
+import {
+  CREATE_STORY,
+  PUBLISH_STORY,
+  UPDATE_STORY,
+} from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
 
 import { useNotification } from "../../state";
+import { toGqlStatus } from "../toGqlStatus";
 
 import useBlocks from "./blocks";
 import usePages from "./pages";
@@ -64,6 +70,38 @@ export default function useStorytellingAPI() {
     [updateStoryMutation, t, setNotification],
   );
 
+  const [publishStoryMutation] = useMutation(PUBLISH_STORY);
+
+  const usePublishStory = useCallback(
+    async (s: PublishStatus, storyId?: string, alias?: string) => {
+      if (!storyId) return;
+
+      const gqlStatus = toGqlStatus(s);
+
+      const { data, errors } = await publishStoryMutation({
+        variables: { storyId, alias, status: gqlStatus },
+      });
+
+      if (errors || !data?.publishStory) {
+        setNotification({ type: "error", text: t("Failed to publish story.") });
+
+        return { status: "error" };
+      }
+
+      setNotification({
+        type: s === "limited" ? "success" : s == "published" ? "success" : "info",
+        text:
+          s === "limited"
+            ? t("Successfully published your story!")
+            : s == "published"
+            ? t("Successfully published your story with search engine indexing!")
+            : t("Successfully unpublished your story. Now nobody can access your story."),
+      });
+      return { data: data.publishStory.story, status: "success" };
+    },
+    [publishStoryMutation, t, setNotification],
+  );
+
   return {
     useCreateStory,
     useUpdateStory,
@@ -75,5 +113,6 @@ export default function useStorytellingAPI() {
     useCreateStoryBlock,
     useDeleteStoryBlock,
     useMoveStoryBlock,
+    usePublishStory,
   };
 }
diff --git a/web/src/services/api/toGqlStatus.ts b/web/src/services/api/toGqlStatus.ts
@@ -0,0 +1,10 @@
+import { PublishStatus } from "@reearth/beta/features/Editor/tabs/publish/Nav/PublishModal/hooks";
+import { PublishmentStatus } from "@reearth/services/gql/__gen__/graphql";
+
+export const toGqlStatus = (status?: PublishStatus) => {
+  return status === "limited"
+    ? PublishmentStatus.Limited
+    : status == "published"
+    ? PublishmentStatus.Public
+    : PublishmentStatus.Private;
+};
diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts
@@ -51,6 +51,7 @@ const documents = {
     "\n  mutation CreateStory($input: CreateStoryInput!) {\n    createStory(input: $input) {\n      story {\n        id\n      }\n    }\n  }\n": types.CreateStoryDocument,
     "\n  mutation UpdateStory($input: UpdateStoryInput!) {\n    updateStory(input: $input) {\n      story {\n        id\n      }\n    }\n  }\n": types.UpdateStoryDocument,
     "\n  mutation DeleteStory($input: DeleteStoryInput!) {\n    deleteStory(input: $input) {\n      storyId\n    }\n  }\n": types.DeleteStoryDocument,
+    "\n  mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {\n    publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {\n      story {\n        id\n        alias\n        publishmentStatus\n      }\n    }\n  }\n": types.PublishStoryDocument,
     "\n  mutation CreateStoryPage($input: CreateStoryPageInput!) {\n    createStoryPage(input: $input) {\n      story {\n        id\n      }\n    }\n  }\n": types.CreateStoryPageDocument,
     "\n  mutation UpdateStoryPage($input: UpdateStoryPageInput!) {\n    updateStoryPage(input: $input) {\n      story {\n        id\n      }\n    }\n  }\n": types.UpdateStoryPageDocument,
     "\n  mutation DeleteStoryPage($input: DeleteStoryPageInput!) {\n    removeStoryPage(input: $input) {\n      story {\n        id\n      }\n    }\n  }\n": types.DeleteStoryPageDocument,
@@ -235,6 +236,10 @@ export function gql(source: "\n  mutation UpdateStory($input: UpdateStoryInput!)
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  mutation DeleteStory($input: DeleteStoryInput!) {\n    deleteStory(input: $input) {\n      storyId\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteStory($input: DeleteStoryInput!) {\n    deleteStory(input: $input) {\n      storyId\n    }\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {\n    publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {\n      story {\n        id\n        alias\n        publishmentStatus\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {\n    publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {\n      story {\n        id\n        alias\n        publishmentStatus\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
@@ -3073,6 +3073,15 @@ export type DeleteStoryMutationVariables = Exact<{
 
 export type DeleteStoryMutation = { __typename?: 'Mutation', deleteStory: { __typename?: 'DeleteStoryPayload', storyId: string } };
 
+export type PublishStoryMutationVariables = Exact<{
+  storyId: Scalars['ID']['input'];
+  alias?: InputMaybe<Scalars['String']['input']>;
+  status: PublishmentStatus;
+}>;
+
+
+export type PublishStoryMutation = { __typename?: 'Mutation', publishStory: { __typename?: 'StoryPayload', story: { __typename?: 'Story', id: string, alias: string, publishmentStatus: PublishmentStatus } } };
+
 export type CreateStoryPageMutationVariables = Exact<{
   input: CreateStoryPageInput;
 }>;
@@ -3274,6 +3283,7 @@ export const CreateSceneDocument = {"kind":"Document","definitions":[{"kind":"Op
 export const CreateStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateStoryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<CreateStoryMutation, CreateStoryMutationVariables>;
 export const UpdateStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateStoryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateStoryMutation, UpdateStoryMutationVariables>;
 export const DeleteStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteStoryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}}]} as unknown as DocumentNode<DeleteStoryMutation, DeleteStoryMutationVariables>;
+export const PublishStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"PublishStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"alias"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"status"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PublishmentStatus"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publishStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"alias"},"value":{"kind":"Variable","name":{"kind":"Name","value":"alias"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"status"},"value":{"kind":"Variable","name":{"kind":"Name","value":"status"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}}]}}]}}]}}]} as unknown as DocumentNode<PublishStoryMutation, PublishStoryMutationVariables>;
 export const CreateStoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateStoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateStoryPageInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createStoryPage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<CreateStoryPageMutation, CreateStoryPageMutationVariables>;
 export const UpdateStoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateStoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateStoryPageInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateStoryPage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateStoryPageMutation, UpdateStoryPageMutationVariables>;
 export const DeleteStoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteStoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteStoryPageInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeStoryPage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteStoryPageMutation, DeleteStoryPageMutationVariables>;

diff --git a/web/src/services/gql/queries/storytelling.ts b/web/src/services/gql/queries/storytelling.ts
@@ -28,6 +28,18 @@ export const DELETE_STORY = gql(`
   }
 `);
 
+export const PUBLISH_STORY = gql(`
+  mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {
+    publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {
+      story {
+        id
+        alias
+        publishmentStatus
+      }
+    }
+  }
+`);
+
 export const CREATE_STORY_PAGE = gql(`
   mutation CreateStoryPage($input: CreateStoryPageInput!) {
     createStoryPage(input: $input) {

diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
@@ -12,6 +12,7 @@ Layers: Layers
 Outline: Outline
 Published: Published
 Unpublished: Unpublished
+Story: Story
 Unpublish: Unpublish
 Publish: Publish
 Publishing Settings: Publishing Settings
@@ -40,7 +41,6 @@ Your project will be unpublished.: Your project will be unpublished.
 This means that anybody with the URL will become unable to view this project.: This means that anybody with the URL will become unable to view this project.
 '**Warning**: This includes websites where this project is embedded.': '**Warning**: This includes websites where this project is embedded.'
 New Page: New Page
-Story: Story
 Page: Page
 Page Settings: Page Settings
 Align System: Align System
@@ -476,6 +476,10 @@ Failed to create story.: Failed to create story.
 Successfully created a story!: ''
 Failed to update story.: ''
 Successfully updated a story!: ''
+Failed to publish story.: ''
+Successfully published your story!: ''
+Successfully published your story with search engine indexing!: ''
+Successfully unpublished your story. Now nobody can access your story.: ''
 Failed to create page.: Failed to create page.
 Successfullly created a page!: Successfullly created a page!
 Failed to delete page.: Failed to delete page.

diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
@@ -12,6 +12,7 @@ Layers: レイヤー
 Outline: アウトライン
 Published: 一般公開
 Unpublished: 非公開
+Story: ストーリー
 Unpublish: 非公開にする
 Publish: 公開
 Publishing Settings: 公開設定
@@ -36,7 +37,6 @@ Your project will be unpublished.: プロジェクトを非公開にする
 This means that anybody with the URL will become unable to view this project.: URLを知っている人もこのプロジェクトを見ることができなくなります。
 '**Warning**: This includes websites where this project is embedded.': '**Warning**このプロジェクトを埋め込んだWebサイトへ影響を及ぼす可能性があります。'
 New Page: 新しいページ
-Story: ストーリー
 Page: ページ
 Page Settings: ページ設定
 Align System: アラインシステム
@@ -437,6 +437,10 @@ Failed to create story.: ストーリーの作成に失敗しました。
 Successfully created a story!: ''
 Failed to update story.: ''
 Successfully updated a story!: ''
+Failed to publish story.: ''
+Successfully published your story!: ''
+Successfully published your story with search engine indexing!: ''
+Successfully unpublished your story. Now nobody can access your story.: ''
 Failed to create page.: ページの作成に失敗しました。
 Successfullly created a page!: ''
 Failed to delete page.: ''