diff --git a/apps/platform/src/app/(main)/page.tsx b/apps/platform/src/app/(main)/page.tsx index d475f405d..b20c6fad9 100644 --- a/apps/platform/src/app/(main)/page.tsx +++ b/apps/platform/src/app/(main)/page.tsx @@ -1,80 +1,30 @@ 'use client' -import { useCallback, useEffect, useMemo, useState } from 'react' -import type { - CreateProjectRequest, - GetAllProjectsResponse, - ProjectWithCount, - Workspace -} from '@keyshade/schema' -import { AddSVG } from '@public/svg/shared' +import { useEffect, useMemo, useState } from 'react' +import type { GetAllProjectsResponse } from '@keyshade/schema' import { FolderSVG } from '@public/svg/dashboard' -import ProjectCard from '@/components/dashboard/projectCard' -import { - Sheet, - SheetClose, - SheetContent, - SheetDescription, - SheetFooter, - SheetHeader, - SheetTitle -} from '@/components/ui/sheet' -import { Button } from '@/components/ui/button' -import { Label } from '@/components/ui/label' -import { Input } from '@/components/ui/input' -import { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectTrigger, - SelectValue -} from '@/components/ui/select' -import { Switch } from '@/components/ui/switch' -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTrigger -} from '@/components/ui/dialog' +import { toast } from 'sonner' +import { useAtom, useAtomValue, useSetAtom } from 'jotai' +import ProjectCard from '@/components/dashboard/project/projectCard' import ControllerInstance from '@/lib/controller-instance' -import { Textarea } from '@/components/ui/textarea' import ProjectScreenLoader from '@/components/ui/project-screen-loader' +import CreateProjectDialogue from '@/components/dashboard/project/createProjectDialogue' +import { + createProjectDialogOpenAtom, + currentWorkspaceAtom, + projectsOfWorkspaceAtom +} from '@/store' +import EditProjectSheet from '@/components/dashboard/project/editProjectSheet' +import { Button } from '@/components/ui/button' export default function Index(): JSX.Element { - const [isSheetOpen, setIsSheetOpen] = useState(false) - const [isProjectEmpty, setIsProjectEmpty] = useState(true) - const [isDialogOpen, setIsDialogOpen] = useState(false) const [loading, setLoading] = useState(false) - // Projects to be displayed in the dashboard - const [projects, setProjects] = useState([]) + const setIsCreateProjectDialogOpen = useSetAtom(createProjectDialogOpenAtom) + const currentWorkspace = useAtomValue(currentWorkspaceAtom) - // Contains the data for the new project - const [newProjectData, setNewProjectData] = useState({ - name: '', - workspaceSlug: '', - description: '', - storePrivateKey: false, - environments: [ - { - name: '', - description: '' - } - ], - accessLevel: 'GLOBAL' - }) - - // Fetches the currently selected workspace from context - const currentWorkspace: Workspace | null = useMemo( - () => - typeof localStorage !== 'undefined' - ? (JSON.parse( - localStorage.getItem('currentWorkspace') ?? '{}' - ) as Workspace) - : null, - [] - ) + // Projects to be displayed in the dashboard + const [projects, setProjects] = useAtom(projectsOfWorkspaceAtom) + const isProjectsEmpty = useMemo(() => projects.length === 0, [projects]) // If a workspace is selected, we want to fetch all the projects // under that workspace and display it in the dashboard. @@ -92,6 +42,9 @@ export default function Index(): JSX.Element { if (success && data) { setProjects(data.items) } else { + toast.error( + 'Something went wrong while fetching projects. Check console for more info.' + ) // eslint-disable-next-line no-console -- we need to log the error console.error(error) } @@ -101,248 +54,23 @@ export default function Index(): JSX.Element { } getAllProjects() - }, [currentWorkspace]) - - // Check if the projects array is empty - useEffect(() => setIsProjectEmpty(projects.length === 0), [projects]) - - // Function to create a new project - const createNewProject = useCallback(async () => { - if (currentWorkspace) { - newProjectData.workspaceSlug = currentWorkspace.slug - - const { data, error, success } = - await ControllerInstance.getInstance().projectController.createProject( - newProjectData, - {} - ) - - if (success && data) { - setProjects([ - ...projects, - { - ...data, - environmentCount: newProjectData.environments - ? newProjectData.environments.length - : 0, - secretCount: 0, - variableCount: 0 - } - ]) - } else { - // eslint-disable-next-line no-console -- we need to log the error - console.error(error) - } - - setIsDialogOpen(false) - } else { - throw new Error('No workspace selected') - } - }, [currentWorkspace, newProjectData, projects]) - - const toggleDialog = useCallback(() => setIsDialogOpen((prev) => !prev), []) + }, [currentWorkspace, setProjects]) return (
- {!isProjectEmpty && ( + {!isProjectsEmpty && (

My Projects

)} - - - - {isProjectEmpty ? null : ( - - )} - - -
- - Create Projects - - - - Create your new project - -
-
-
- {/* NAME */} -
- - { - setNewProjectData((prev) => ({ - ...prev, - name: e.target.value - })) - }} - placeholder="Enter the name" - /> -
- - {/* DESCRIPTION */} -
- -