From 65a40e67c394732ed6a1b9a7b350226c20d24bc1 Mon Sep 17 00:00:00 2001
From: Kevin Kim <kevinkim0617kim@gmail.com>
Date: Tue, 18 Jun 2024 01:50:18 +0900
Subject: [PATCH] design: Toast pop up when Save success

---
 gitlio/app/editor/[portfolioId]/page.tsx      | 16 ++++++++--------
 .../app/editor/_components/ToastComponent.tsx | 17 +++++++++++++++++
 gitlio/app/editor/_components/TopBar.tsx      | 19 ++++++++++++++-----
 gitlio/app/editor/layout.tsx                  |  2 ++
 gitlio/store/toastStore.ts                    | 14 ++++++++++++++
 5 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 gitlio/app/editor/_components/ToastComponent.tsx
 create mode 100644 gitlio/store/toastStore.ts

diff --git a/gitlio/app/editor/[portfolioId]/page.tsx b/gitlio/app/editor/[portfolioId]/page.tsx
index 6fd0b4a..1913999 100644
--- a/gitlio/app/editor/[portfolioId]/page.tsx
+++ b/gitlio/app/editor/[portfolioId]/page.tsx
@@ -27,14 +27,14 @@ export default function EditPage({ params }: EditPageProps) {
   console.log(params);
   useEffect(() => {
     // Check if the portfolio exists in the user's store
-    const portfolioExists = portfolios.some(
-      (portfolio) => portfolio.portfolio_id.toString() === portfolioId
-    );
-
-    if (!portfolioExists) {
-      router.push('/error'); // Redirect to an error page if the portfolio ID is not found
-      return;
-    }
+    // const portfolioExists = portfolios.some(
+    //   (portfolio) => portfolio.portfolio_id.toString() === portfolioId
+    // );
+    //
+    // if (!portfolioExists) {
+    //   router.push('/error'); // Redirect to an error page if the portfolio ID is not found
+    //   return;
+    // }
 
     // Proceed to fetch and update stores with the portfolio data
     updateStoresWithPortfolioData(portfolioId)
diff --git a/gitlio/app/editor/_components/ToastComponent.tsx b/gitlio/app/editor/_components/ToastComponent.tsx
new file mode 100644
index 0000000..aa5c65b
--- /dev/null
+++ b/gitlio/app/editor/_components/ToastComponent.tsx
@@ -0,0 +1,17 @@
+// components/ToastComponent.tsx
+import React from 'react';
+import useToastStore from '@/store/toastStore';
+
+const ToastComponent: React.FC = () => {
+  const showToast = useToastStore((state) => state.showToast);
+
+  return showToast ? (
+    <div className="toast toast-start">
+      <div className="alert alert-success">
+        <span>성공적으로 저장되었습니다.</span>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default ToastComponent;
diff --git a/gitlio/app/editor/_components/TopBar.tsx b/gitlio/app/editor/_components/TopBar.tsx
index 0a8609e..d3b178b 100644
--- a/gitlio/app/editor/_components/TopBar.tsx
+++ b/gitlio/app/editor/_components/TopBar.tsx
@@ -4,17 +4,26 @@ import { LuAlignJustify, LuBarChartBig } from 'react-icons/lu';
 import PreviewButton from '@/app/editor/_components/PreviewButton';
 import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';
 import { FaSignInAlt } from 'react-icons/fa';
-import React from 'react';
+import React, { useState } from 'react';
 import { savePortfolioData } from '@/actions/portfolio';
 import { useRouter, usePathname } from 'next/navigation';
+import useToastStore from '@/store/toastStore';
 
 export default function TopBar() {
   const pathname = usePathname().split('/').filter(Boolean).pop();
-  function saveData() {
-    if (!pathname) return;
-    savePortfolioData(pathname).then((r) => console.log(r));
-  }
+
   const router = useRouter();
+  const setShowToast = useToastStore((state) => state.setShowToast);
+  const saveData = () => {
+    if (!pathname) return;
+    savePortfolioData(pathname)
+      .then((r) => {
+        console.log(r);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 3000); // Hide toast after 3 seconds
+      })
+      .catch((error: any) => console.error('Error saving data:', error));
+  };
 
   const handleLogoClick = () => {
     router.push('/studio/dashboard');
diff --git a/gitlio/app/editor/layout.tsx b/gitlio/app/editor/layout.tsx
index f4a0bf7..6445098 100644
--- a/gitlio/app/editor/layout.tsx
+++ b/gitlio/app/editor/layout.tsx
@@ -13,6 +13,7 @@ import { useEffect } from 'react';
 import { useUser } from '@clerk/nextjs';
 import { getIdAfterLogin } from '@/actions/user';
 import { useUserStore } from '@/store/userStore';
+import ToastComponent from '@/app/editor/_components/ToastComponent';
 
 const EditorLayout: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -66,6 +67,7 @@ const EditorLayout: React.FC<{ children: React.ReactNode }> = ({
             <BaseSideBar />
           </div>
         </div>
+        <ToastComponent />
       </div>
       <GlobalDragOverlay />
     </DndContext>
diff --git a/gitlio/store/toastStore.ts b/gitlio/store/toastStore.ts
new file mode 100644
index 0000000..53bfec4
--- /dev/null
+++ b/gitlio/store/toastStore.ts
@@ -0,0 +1,14 @@
+// stores/toastStore.ts
+import create from 'zustand';
+
+interface ToastState {
+  showToast: boolean;
+  setShowToast: (isVisible: boolean) => void;
+}
+
+const useToastStore = create<ToastState>((set) => ({
+  showToast: false,
+  setShowToast: (isVisible: boolean) => set({ showToast: isVisible }),
+}));
+
+export default useToastStore;