feat(frontend): added in workspace auto refresh on after create new w…

…orkspace, added in some minor ui changes to display workspaces, added in create workspace modal for the sidebar next to the sidebar title [2024-11-17]

gridwalk-ui/src/app/login/components/loginForm.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import React, { useState } from "react";
 import { Lock, Mail, User } from "lucide-react";
@@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { loginAction, registerAction } from "./actions";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
 
 interface AuthFormData {
   email: string;
@@ -60,11 +60,14 @@ export default function AuthForm(): JSX.Element {
       if (isLogin) {
         await loginAction({ email, password });
       } else {
-        await registerAction({ email, password, first_name: first_name!, last_name: last_name! });
+        await registerAction({
+          email,
+          password,
+          first_name: first_name!,
+          last_name: last_name!,
+        });
       }
-
-      // Use router.push instead of window.location for better client-side navigation
-      router.push('/workspace');
+      router.push("/workspace");
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
     } finally {

gridwalk-ui/src/app/workspace/modal.tsx

@@ -1,6 +1,6 @@
-'use client';
-
+"use client";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   Dialog,
   DialogContent,
@@ -12,26 +12,33 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 
+// Sidebar for the initial workspace page - appears on righthand side of the page
 interface CreateWorkspaceModalProps {
   isOpen: boolean;
   onClose: () => void;
   onCreate: (name: string) => Promise<void>;
 }
 
-export function CreateWorkspaceModal({ isOpen, onClose, onCreate }: CreateWorkspaceModalProps) {
+export function CreateWorkspaceModal({
+  isOpen,
+  onClose,
+  onCreate,
+}: CreateWorkspaceModalProps) {
+  const router = useRouter();
   const [isCreating, setIsCreating] = useState(false);
-  const [workspaceName, setWorkspaceName] = useState('');
+  const [workspaceName, setWorkspaceName] = useState("");
 
   const handleSubmit = async () => {
     if (!workspaceName.trim()) return;
 
     try {
       setIsCreating(true);
       await onCreate(workspaceName);
-      setWorkspaceName('');
+      setWorkspaceName("");
+      router.refresh();
       onClose();
     } catch (error) {
-      console.error('Error creating workspace:', error);
+      console.error("Error creating workspace:", error);
     } finally {
       setIsCreating(false);
     }
@@ -52,26 +59,89 @@ export function CreateWorkspaceModal({ isOpen, onClose, onCreate }: CreateWorksp
               value={workspaceName}
               onChange={(e) => setWorkspaceName(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === 'Enter') {
+                if (e.key === "Enter") {
                   handleSubmit();
                 }
               }}
             />
           </div>
         </div>
         <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isCreating}>
+            Cancel
+          </Button>
           <Button
-            variant="outline"
-            onClick={onClose}
-            disabled={isCreating}
+            onClick={handleSubmit}
+            disabled={isCreating || !workspaceName.trim()}
           >
+            {isCreating ? "Creating..." : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Sidebar for the sidebar - appears as a "+" next to the sidebar title
+interface CreateWorkspaceSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreate: (name: string) => Promise<void>;
+}
+
+export function CreateWorkspaceSidebar({
+  isOpen,
+  onClose,
+  onCreate,
+}: CreateWorkspaceSidebarProps) {
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!workspaceName.trim()) return;
+    try {
+      setIsCreating(true);
+      await onCreate(workspaceName);
+      setWorkspaceName("");
+      onClose();
+    } catch (error) {
+      console.error("Error creating workspace:", error);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create New Workspace</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Workspace Name</Label>
+            <Input
+              id="name"
+              placeholder="Enter workspace name"
+              value={workspaceName}
+              onChange={(e) => setWorkspaceName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleSubmit();
+                }
+              }}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isCreating}>
             Cancel
           </Button>
           <Button
             onClick={handleSubmit}
             disabled={isCreating || !workspaceName.trim()}
           >
-            {isCreating ? 'Creating...' : 'Create'}
+            {isCreating ? "Creating..." : "Create"}
           </Button>
         </DialogFooter>
       </DialogContent>

gridwalk-ui/src/app/workspace/page.tsx

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { FolderKanban, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
@@ -24,10 +23,10 @@ export default function WorkspacePage() {
               </h1>
             </div>
             <p className="text-gray-600 text-lg">
-              Manage and organize your projects across different workspaces
+              Manage and organise your projects across different workspaces.
             </p>
           </div>
-          <Button 
+          <Button
             className="w-full sm:w-auto bg-background text-gray-300 hover:bg-blue-600 hover:text-white"
             size="lg"
             onClick={() => setIsModalOpen(true)}
@@ -37,7 +36,7 @@ export default function WorkspacePage() {
           </Button>
         </div>
 
-        <CreateWorkspaceModal 
+        <CreateWorkspaceModal
           isOpen={isModalOpen}
           onClose={() => setIsModalOpen(false)}
           onCreate={handleCreateWorkspace}
@@ -52,7 +51,9 @@ export default function WorkspacePage() {
               No Workspace Selected
             </h2>
             <p className="text-gray-500 mb-6">
-              Choose a workspace from the sidebar to view and manage your projects. Each workspace helps you organize related projects and collaborate with your team.
+              Choose a workspace from the sidebar to view and manage your
+              projects. Each workspace helps you organise related projects and
+              collaborate with your team.
             </p>
           </div>
         </div>