Add draft indicator

constantgillet · Apr 30, 2024 · d7643e4 · d7643e4
1 parent e6475c5
commit d7643e4
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 12 deletions.
diff --git a/app/components/SaveTreeIndicator.tsx b/app/components/SaveTreeIndicator.tsx
@@ -8,10 +8,11 @@ import { defaultTree } from "~/constants/defaultTree";
 
 type SaveTreeIndicatorProps = {
   templateId: string;
+  onSave?: () => void;
 };
 
 export const SaveTreeIndicator = (props: SaveTreeIndicatorProps) => {
-  const { templateId } = props;
+  const { templateId, onSave } = props;
 
   const [isSaving, setIsSaving] = useState(false);
   const [isSaved, setIsSaved] = useState(true);
@@ -37,6 +38,11 @@ export const SaveTreeIndicator = (props: SaveTreeIndicatorProps) => {
       .then((response) => response.json())
       .then((data) => {
         setIsSaved(true);
+
+        if (data.changed) {
+          onSave?.();
+        }
+
         setIsSaving(false);
       })
       .catch((error) => {

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
@@ -51,12 +51,19 @@ const toolsData = [
 type TopBarProps = {
   initalName: string;
   templateId: string;
+  isDraft: boolean;
 };
 
-export const TopBar = ({ initalName, templateId }: TopBarProps) => {
+export const TopBar = ({
+  initalName,
+  templateId,
+  isDraft: defaultIsDraft,
+}: TopBarProps) => {
   const selectedTool = useEditorStore((state) => state.selectedTool);
   const setSelectedTool = useEditorStore((state) => state.setSelectedTool);
 
+  const [isDraft, setIsDraft] = useState(defaultIsDraft);
+
   return (
     <header
       className={css({
@@ -139,11 +146,19 @@ export const TopBar = ({ initalName, templateId }: TopBarProps) => {
             alignItems: "center",
           })}
         >
-          <SaveTreeIndicator templateId={templateId} />
-          <Tooltip content="Click on the Deploy button for setting it in production">
-            <Badge color="gray">Draft</Badge>
-          </Tooltip>
-          <DeployButton templateId={templateId} />
+          <SaveTreeIndicator
+            templateId={templateId}
+            onSave={() => setIsDraft(true)}
+          />
+          {isDraft && (
+            <Tooltip content="Click on the Deploy button for setting it in production">
+              <Badge color="gray">Draft</Badge>
+            </Tooltip>
+          )}
+          <DeployButton
+            templateId={templateId}
+            onDeploy={() => setIsDraft(false)}
+          />
         </div>
       </div>
     </header>
@@ -268,14 +283,21 @@ const TemplateNameButton = ({
   );
 };
 
-export const DeployButton = ({ templateId }: { templateId: string }) => {
+export const DeployButton = ({
+  templateId,
+  onDeploy,
+}: {
+  templateId: string;
+  onDeploy?: () => void;
+}) => {
   const [open, setOpen] = useState(false);
   const fetcher = useFetcher<typeof updateTemplateToProdAction>();
 
   useEffect(() => {
     if (fetcher.data?.ok) {
       setOpen(false);
       toast.success("Template set in production");
+      onDeploy();
     }
   }, [fetcher.data]);
 

diff --git a/app/routes/_app.editor.$templateId.tsx b/app/routes/_app.editor.$templateId.tsx
@@ -57,7 +57,10 @@ export async function loader({
       tree: templateData?.tree as unknown as Tree,
     };
 
-    return json({ template });
+    const isDraft =
+      JSON.stringify(template.tree) !== JSON.stringify(template.prodTree);
+
+    return json({ template, isDraft });
   } catch (error) {
     console.error(error);
     throw new Error("Error fetching template");
@@ -66,7 +69,7 @@ export async function loader({
 
 export default function Index() {
   const container = useRef<HTMLDivElement>(null);
-  const { template } = useLoaderData<typeof loader>();
+  const { template, isDraft } = useLoaderData<typeof loader>();
 
   const infiniteViewer = useRef<InfiniteViewer>(null);
 
@@ -89,7 +92,11 @@ export default function Index() {
           overflow: "hidden",
         }}
       >
-        <TopBar initalName={template.name} templateId={template.id} />
+        <TopBar
+          initalName={template.name}
+          templateId={template.id}
+          isDraft={isDraft}
+        />
         <div
           className={css({
             flex: 1,

diff --git a/app/routes/api.update-template.tsx b/app/routes/api.update-template.tsx
@@ -78,7 +78,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
     deleteFolder(folder);
     console.log("TREE IS DIFFERENT, DELETING CACHE");
 
-    return json({ ok: true });
+    return json({ ok: true, changed: true });
   } catch (error) {
     console.error(error);
     return json({ data: "error" }, { status: 500 });