dropdown

freaks-dev · Jul 11, 2023 · eca2232 · eca2232
1 parent 7e9eb64
commit eca2232
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 46 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,53 +1,66 @@
-import React from "react"
+import React, { useCallback, useState } from "react"
 import { useMutation, useQuery } from "react-query"
 import { getAllProjects } from "../pages/dashboard"
 import { UserSession } from "../service"
 import NextLink from 'next/link'
 import { useRouter } from "next/router"
 import { SettingsIcon } from '@chakra-ui/icons'
-import { AiOutlineLogout, AiOutlineSetting, AiOutlineFileText, AiOutlineAlert, AiOutlinePlus, AiOutlineComment, AiOutlineCode } from 'react-icons/ai'
+import { AiOutlineLogout, AiOutlineSetting, AiOutlineFileText, AiOutlineAlert, AiOutlinePlus, AiOutlineComment, AiOutlineCode, AiOutlineRight, AiOutlineDown } from 'react-icons/ai'
 import { signout, signOut } from "next-auth/client"
 import { Footer } from "./Footer"
 import { createProject } from "../pages/getting-start"
-import { AppShell, Box, Button, Code, Group, Header, Navbar, NavLink, ScrollArea, Stack, Text, Title } from "@mantine/core"
+import { AppShell, Box, Button, Code, Group, Header, Menu, Navbar, NavLink, ScrollArea, Select, Stack, Text, Title } from "@mantine/core"
 import Link from "next/link"
 import type { ProjectServerSideProps } from "../pages/dashboard/project/[projectId]/settings"
 import { modals } from "@mantine/modals"
 import { useClipboard } from '@mantine/hooks';
 import { notifications } from "@mantine/notifications"
+import { Project } from "@prisma/client"
+import { ProjectService } from "../service/project.service"
 
 // just for type
 
-export function MainLayout(props: { session: UserSession, id?: "comments" | "settings", project: ProjectServerSideProps, children?: any }) {
+export function MainLayout(props: { session: UserSession, id?: "comments" | "settings", project: ProjectServerSideProps, projects: Awaited<ReturnType<ProjectService['list']>>, children?: any }) {
 
   const router = useRouter()
   const clipboard = useClipboard()
-
-  const createProjectMutation = useMutation(createProject)
-  const titleInputRef = React.useRef<HTMLInputElement>(null)
-
   const projectId = router.query.projectId as string
 
   const getProjects = useQuery("getProjects", getAllProjects, {
     enabled: !!props.session,
-  })
+    onSuccess() {
 
-  async function onClickCreateProject() {
-    if (!titleInputRef.current.value) {
-      return
     }
+  })
 
-    await createProjectMutation.mutate(
-      {
-        title: titleInputRef.current.value,
-      },
-      {
-        onSuccess(data) {
-          location.href = `/dashboard/project/${data.data.id}`
-        },
-      }
-    )
-  }
+  // should memo
+  const ProjectMenu = React.useCallback(() => {
+    return <Menu>
+      <Menu.Target>
+        <Button size='xs' variant={'light'} rightIcon={<AiOutlineDown />}>{props.project.title}</Button>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Link href="/getting-start" style={{ textDecoration: 'none' }}>
+          <Menu.Item icon={<AiOutlinePlus />}>
+            New site
+          </Menu.Item>
+        </Link>
+        <Menu.Divider />
+        <Menu.Label>
+          Sites
+        </Menu.Label>
+        {props.projects.map(project => {
+          return (
+          <Menu.Item key={project.id} onClick={_ => {
+            location.href = `/dashboard/project/${project.id}`
+          }}>
+            {project.title}
+          </Menu.Item>
+          )
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  }, [props.project.id])
 
   const Menubar = React.useMemo(() => {
     const styles = {
@@ -118,6 +131,7 @@ export function MainLayout(props: { session: UserSession, id?: "comments" | "set
           <Title order={3} style={{ fontWeight: 'bold' }}>
             Cusdis
           </Title>
+          <ProjectMenu />
         </Group>
         <Group sx={{
           // height: '100%'

diff --git a/pages/dashboard/project/[projectId].tsx b/pages/dashboard/project/[projectId].tsx
@@ -142,7 +142,8 @@ function CommentToolbar(props: {
 
 function ProjectPage(props: {
   project: ProjectServerSideProps,
-  session: UserSession
+  session: UserSession,
+  projects: Awaited<ReturnType<ProjectService['list']>>
 }) {
 
   React.useEffect(() => {
@@ -166,7 +167,7 @@ function ProjectPage(props: {
 
   return (
     <>
-      <MainLayout id="comments" session={props.session} project={props.project}>
+      <MainLayout id="comments" session={props.session} project={props.project} projects={props.projects}>
         <Stack>
           <List listStyleType={'none'} styles={{
             root: {
@@ -258,9 +259,12 @@ export async function getServerSideProps(ctx) {
     }
   }
 
+  const projects = await projectService.list()
+
   return {
     props: {
       session: await getSession(ctx.req),
+      projects,
       project: {
         id: project.id,
         title: project.title,

diff --git a/pages/dashboard/project/[projectId]/settings.tsx b/pages/dashboard/project/[projectId]/settings.tsx
@@ -44,7 +44,8 @@ export type ProjectServerSideProps = Pick<Project, 'ownerId' | 'id' | 'title' |
 
 export default function Page(props: {
   session: any,
-  project: ProjectServerSideProps
+  project: ProjectServerSideProps,
+  projects: ReturnType<Awaited<ProjectService['list']>>
 }) {
   const { classes: listClasses } = useListStyle()
 
@@ -110,7 +111,7 @@ export default function Page(props: {
   }
 
   return (
-    <MainLayout session={props.session} id="settings" project={props.project}>
+    <MainLayout session={props.session} id="settings" project={props.project} projects={props.projects}>
       <Container sx={{
         marginTop: 24
       }}>
@@ -206,9 +207,12 @@ export async function getServerSideProps(ctx) {
     }
   }
 
+  const projects = await projectService.list()
+
   return {
     props: {
       session: await getSession(ctx.req),
+      projects,
       project: {
         id: project.id,
         title: project.title,

diff --git a/pages/getting-start.tsx b/pages/getting-start.tsx
@@ -7,8 +7,6 @@ import { ProjectService } from "../service/project.service"
 import { apiClient } from "../utils.client"
 import { getSession } from "../utils.server"
 
-
-
 export const createProject = async (body: { title: string }) => {
   const res = await apiClient.post("/projects", {
     title: body.title,
@@ -86,23 +84,23 @@ export async function getServerSideProps(ctx) {
     }
   }
 
-  const projectService = new ProjectService(ctx.req)
-
-  const defaultProject = await projectService.getFirstProject(session.uid, {
-    select: {
-      id: true
-    }
-  })
-
-  if (defaultProject) {
-    // redirect to project dashboard
-    return {
-      redirect: {
-        destination: `/dashboard/project/${defaultProject.id}`,
-        permanent: false
-      }
-    }
-  }
+  // const projectService = new ProjectService(ctx.req)
+
+  // const defaultProject = await projectService.getFirstProject(session.uid, {
+  //   select: {
+  //     id: true
+  //   }
+  // })
+
+  // if (defaultProject) {
+  //   // redirect to project dashboard
+  //   return {
+  //     redirect: {
+  //       destination: `/dashboard/project/${defaultProject.id}`,
+  //       permanent: false
+  //     }
+  //   }
+  // }
 
   return {
     props: {

diff --git a/service/project.service.ts b/service/project.service.ts
@@ -47,6 +47,10 @@ export class ProjectService extends RequestScopeService {
         deletedAt: null,
         ownerId: session.uid,
       },
+      select: {
+        id: true,
+        title: true,
+      }
     })
 
     return projects