chore(web): publish tab type

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}

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;
-};

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,
   };
 }

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;
+};

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

@@ -47,6 +47,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,
@@ -215,6 +216,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.
  */

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

@@ -109,8 +109,8 @@ export type AddNlsLayerSimpleInput = {
   config?: InputMaybe<Scalars['JSON']['input']>;
   index?: InputMaybe<Scalars['Int']['input']>;
   layerType: Scalars['String']['input'];
-  parentLayerId: Scalars['ID']['input'];
-  sceneID: Scalars['ID']['input'];
+  sceneId: Scalars['ID']['input'];
+  title: Scalars['String']['input'];
 };
 
 export type AddNlsLayerSimplePayload = {
@@ -858,7 +858,7 @@ export type Mutation = {
   addLayerGroup?: Maybe<AddLayerGroupPayload>;
   addLayerItem?: Maybe<AddLayerItemPayload>;
   addMemberToTeam?: Maybe<AddMemberToTeamPayload>;
-  addNLSLayerSimple?: Maybe<AddNlsLayerSimplePayload>;
+  addNLSLayerSimple: AddNlsLayerSimplePayload;
   addPageLayer: StoryPagePayload;
   addPropertyItem?: Maybe<PropertyItemPayload>;
   addStyle?: Maybe<AddStylePayload>;
@@ -903,7 +903,7 @@ export type Mutation = {
   removeLayer?: Maybe<RemoveLayerPayload>;
   removeMemberFromTeam?: Maybe<RemoveMemberFromTeamPayload>;
   removeMyAuth?: Maybe<UpdateMePayload>;
-  removeNLSLayer?: Maybe<RemoveNlsLayerPayload>;
+  removeNLSLayer: RemoveNlsLayerPayload;
   removePageLayer: StoryPagePayload;
   removePropertyField?: Maybe<PropertyFieldPayload>;
   removePropertyItem?: Maybe<PropertyItemPayload>;
@@ -921,7 +921,7 @@ export type Mutation = {
   updateLayer?: Maybe<UpdateLayerPayload>;
   updateMe?: Maybe<UpdateMePayload>;
   updateMemberOfTeam?: Maybe<UpdateMemberOfTeamPayload>;
-  updateNLSLayer?: Maybe<UpdateNlsLayerPayload>;
+  updateNLSLayer: UpdateNlsLayerPayload;
   updateProject?: Maybe<ProjectPayload>;
   updatePropertyItems?: Maybe<PropertyItemPayload>;
   updatePropertyValue?: Maybe<PropertyFieldPayload>;
@@ -1353,6 +1353,7 @@ export type MutationUploadPluginArgs = {
 };
 
 export type NlsLayer = {
+  config?: Maybe<Scalars['JSON']['output']>;
   id: Scalars['ID']['output'];
   infobox?: Maybe<Infobox>;
   layerType: Scalars['String']['output'];
@@ -3044,6 +3045,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;
 }>;
@@ -3241,6 +3251,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>;

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) {

web/src/services/i18n/translations/en.yml

@@ -11,6 +11,7 @@ Scene: Scene
 Outline: Outline
 Published: Published
 Unpublished: Unpublished
+Story: Story
 Unpublish: Unpublish
 Publish: Publish
 Publishing Settings: Publishing Settings
@@ -39,7 +40,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
@@ -470,6 +470,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.