Innovation day - Initial share project workflow

src/components/ProjectBar/ProjectBar.jsx

@@ -6,6 +6,7 @@ import DownloadIcon from "../../assets/icons/download.svg";
 import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";
+import ShareButton from "../ShareButton/ShareButton";
 
 const ProjectBar = () => {
   const { t } = useTranslation();
@@ -38,6 +39,9 @@ const ProjectBar = () => {
           <div className="project-bar__btn-wrapper">
             <SaveButton className="project-bar__btn btn--save" />
           </div>
+          <div className="project-bar__btn-wrapper">
+            <ShareButton className="project-bar__btn btn--save" />
+          </div>
           {lastSavedTime && user ? (
             <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
           ) : null}

src/components/ShareButton/ShareButton.jsx

@@ -0,0 +1,50 @@
+import { useSelector, useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
+import SaveIcon from "../../assets/icons/save.svg";
+import { syncProject, showLoginToSaveModal } from "../../redux/EditorSlice";
+import { isOwner } from "../../utils/projectHelpers";
+
+const ShareButton = ({ className, type = "primary" }) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  const user = useSelector((state) => state.auth.user);
+  const project = useSelector((state) => state.editor.project);
+  const loading = useSelector((state) => state.editor.loading);
+
+  const onClickSave = async () => {
+    // window.plausible("Save button");
+
+    if (isOwner(user, project)) {
+      dispatch(
+        syncProject("share")({
+          project,
+          accessToken: user.access_token,
+          // autosave: false,
+        }),
+      );
+    } else if (user && project.identifier) {
+      dispatch(
+        syncProject("remix")({ project, accessToken: user.access_token }),
+      );
+    } else {
+      dispatch(showLoginToSaveModal());
+    }
+  };
+
+  return (
+    loading === "success" && (
+      <DesignSystemButton
+        className={className}
+        onClick={onClickSave}
+        text={t("header.share")}
+        textAlways
+        icon={<SaveIcon />}
+        type={type}
+      />
+    )
+  );
+};
+
+export default ShareButton;

src/redux/EditorSlice.js

@@ -9,6 +9,7 @@ import {
   createOrUpdateProject,
   readProject,
   createRemix,
+  createShare,
   deleteProject,
   readProjectList,
 } from "../utils/apiCallHandler";
@@ -28,6 +29,10 @@ export const syncProject = (actionName) =>
         case "remix":
           response = await createRemix(project, accessToken);
           break;
+        case "share":
+          response = await createShare(project, accessToken);
+          console.log(response);
+          break;
         case "save":
           response = await createOrUpdateProject(project, accessToken);
           break;

src/utils/apiCallHandler.js

@@ -61,6 +61,14 @@ export const createRemix = async (project, accessToken) => {
   );
 };
 
+export const createShare = async (project, accessToken) => {
+  return await post(
+    `${host}/api/projects/${project.identifier}/share`,
+    { project },
+    headers(accessToken),
+  );
+};
+
 export const readProject = async (projectIdentifier, locale, accessToken) => {
   const queryString = locale ? `?locale=${locale}` : "";
   return await get(

src/utils/i18n.js

@@ -216,6 +216,7 @@ i18n
             renameProject: "Edit project name",
             renameSave: "Save project name",
             save: "Save",
+            share: "Share",
             settings: "Settings",
           },
           imagePanel: {