diff --git a/.gitignore b/.gitignore index e0d08c3..68ceb0a 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ dev-dist # Editor directories and files .idea .DS_Store +.env *.suo *.ntvs* *.njsproj diff --git a/src/components/DrawerOption.tsx b/src/components/DrawerOption.tsx new file mode 100644 index 0000000..0eeab72 --- /dev/null +++ b/src/components/DrawerOption.tsx @@ -0,0 +1,27 @@ +import { Link } from "@tanstack/react-router"; +import { CalendarIcon, VStack } from "../components"; + +const options = [ + { name: "活動/揪人", engName: "Events", pageNav: "/events", icon: CalendarIcon }, + { name: "拍賣", engName: "Market", pageNav: "/sales", icon: CalendarIcon }, + { name: "行事曆", engName: "Calendar", pageNav: "/calendar", icon: CalendarIcon }, + { name: "地圖", engName: "Map", pageNav: "/map", icon: CalendarIcon }, + { name: "今晚吃什麼", engName: "Dinner Decider", pageNav: "/dinner", icon: CalendarIcon }, +]; + +export const DrawerOption = () => { + return ( + + {options.map((option) => ( + +
  • + + {option.name} + {option.engName} + +
    • + + ))} +     + ); +}; diff --git a/src/components/DrawerSideBar.tsx b/src/components/DrawerSideBar.tsx new file mode 100644 index 0000000..92ff03a --- /dev/null +++ b/src/components/DrawerSideBar.tsx @@ -0,0 +1,40 @@ +import { Image, VStack } from "../components"; +import { DrawerOption } from "./DrawerOption"; + +const UserInfo = { + name: "NCU APP", + avatar: "src/assets/logo.png" +}; + +export const DrawerSideBar = () => { + return ( +
    + + + {/* Drawer Portal */} +
    + +
    + + {/* Indise Drawer */} +
    + + + +
    +
    + ); +}; diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index d6f301d..94c720e 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -11,23 +11,41 @@ // Import Routes import { Route as rootRoute } from './routes/__root' +import { Route as LogoutImport } from './routes/logout' import { Route as LoginImport } from './routes/login' +import { Route as IndexImport } from './routes/index' import { Route as EventsIndexImport } from './routes/events/index' +import { Route as HomeInfoCardImport } from './routes/home/infoCard' import { Route as EventsCreateImport } from './routes/events/create' import { Route as EventsEventIdImport } from './routes/events/$eventId' // Create/Update Routes +const LogoutRoute = LogoutImport.update({ + path: '/logout', + getParentRoute: () => rootRoute, +} as any) + const LoginRoute = LoginImport.update({ path: '/login', getParentRoute: () => rootRoute, } as any) +const IndexRoute = IndexImport.update({ + path: '/', + getParentRoute: () => rootRoute, +} as any) + const EventsIndexRoute = EventsIndexImport.update({ path: '/events/', getParentRoute: () => rootRoute, } as any) +const HomeInfoCardRoute = HomeInfoCardImport.update({ + path: '/home/infoCard', + getParentRoute: () => rootRoute, +} as any) + const EventsCreateRoute = EventsCreateImport.update({ path: '/events/create', getParentRoute: () => rootRoute, @@ -42,6 +60,13 @@ const EventsEventIdRoute = EventsEventIdImport.update({ declare module '@tanstack/react-router' { interface FileRoutesByPath { + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexImport + parentRoute: typeof rootRoute + } '/login': { id: '/login' path: '/login' @@ -49,6 +74,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof LoginImport parentRoute: typeof rootRoute } + '/logout': { + id: '/logout' + path: '/logout' + fullPath: '/logout' + preLoaderRoute: typeof LogoutImport + parentRoute: typeof rootRoute + } '/events/$eventId': { id: '/events/$eventId' path: '/events/$eventId' @@ -63,6 +95,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof EventsCreateImport parentRoute: typeof rootRoute } + '/home/infoCard': { + id: '/home/infoCard' + path: '/home/infoCard' + fullPath: '/home/infoCard' + preLoaderRoute: typeof HomeInfoCardImport + parentRoute: typeof rootRoute + } '/events/': { id: '/events/' path: '/events' @@ -75,47 +114,85 @@ declare module '@tanstack/react-router' { // Create and export the route tree -interface FileRoutesByFullPath { +export interface FileRoutesByFullPath { + '/': typeof IndexRoute '/login': typeof LoginRoute + '/logout': typeof LogoutRoute '/events/$eventId': typeof EventsEventIdRoute '/events/create': typeof EventsCreateRoute + '/home/infoCard': typeof HomeInfoCardRoute '/events': typeof EventsIndexRoute } -interface FileRoutesByTo { +export interface FileRoutesByTo { + '/': typeof IndexRoute '/login': typeof LoginRoute + '/logout': typeof LogoutRoute '/events/$eventId': typeof EventsEventIdRoute '/events/create': typeof EventsCreateRoute + '/home/infoCard': typeof HomeInfoCardRoute '/events': typeof EventsIndexRoute } -interface FileRoutesById { +export interface FileRoutesById { + __root__: typeof rootRoute + '/': typeof IndexRoute '/login': typeof LoginRoute + '/logout': typeof LogoutRoute '/events/$eventId': typeof EventsEventIdRoute '/events/create': typeof EventsCreateRoute + '/home/infoCard': typeof HomeInfoCardRoute '/events/': typeof EventsIndexRoute } -interface FileRouteTypes { +export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/login' | '/events/$eventId' | '/events/create' | '/events' + fullPaths: + | '/' + | '/login' + | '/logout' + | '/events/$eventId' + | '/events/create' + | '/home/infoCard' + | '/events' fileRoutesByTo: FileRoutesByTo - to: '/login' | '/events/$eventId' | '/events/create' | '/events' - id: '/login' | '/events/$eventId' | '/events/create' | '/events/' + to: + | '/' + | '/login' + | '/logout' + | '/events/$eventId' + | '/events/create' + | '/home/infoCard' + | '/events' + id: + | '__root__' + | '/' + | '/login' + | '/logout' + | '/events/$eventId' + | '/events/create' + | '/home/infoCard' + | '/events/' fileRoutesById: FileRoutesById } -interface RootRouteChildren { +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute LoginRoute: typeof LoginRoute + LogoutRoute: typeof LogoutRoute EventsEventIdRoute: typeof EventsEventIdRoute EventsCreateRoute: typeof EventsCreateRoute + HomeInfoCardRoute: typeof HomeInfoCardRoute EventsIndexRoute: typeof EventsIndexRoute } const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, LoginRoute: LoginRoute, + LogoutRoute: LogoutRoute, EventsEventIdRoute: EventsEventIdRoute, EventsCreateRoute: EventsCreateRoute, + HomeInfoCardRoute: HomeInfoCardRoute, EventsIndexRoute: EventsIndexRoute, } @@ -131,21 +208,33 @@ export const routeTree = rootRoute "__root__": { "filePath": "__root.tsx", "children": [ + "/", "/login", + "/logout", "/events/$eventId", "/events/create", + "/home/infoCard", "/events/" ] }, + "/": { + "filePath": "index.tsx" + }, "/login": { "filePath": "login.tsx" }, + "/logout": { + "filePath": "logout.tsx" + }, "/events/$eventId": { "filePath": "events/$eventId.tsx" }, "/events/create": { "filePath": "events/create.tsx" }, + "/home/infoCard": { + "filePath": "home/infoCard.tsx" + }, "/events/": { "filePath": "events/index.tsx" } diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 1fae538..9fbc525 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -1,18 +1,24 @@ -import { createRootRoute, Link, Outlet } from '@tanstack/react-router' - +import { createRootRoute, Outlet } from '@tanstack/react-router' +import { HStack } from '../components' +import { DrawerSideBar } from '../components/DrawerSideBar' export const Route = createRootRoute({ - component: () => ( + + component: RootComponent, +}) + +function RootComponent() { + return ( <> -
    -
    - NCU App -
    - - Events - +
    + + +
    + NCU App +
    +
    -
    + - - ), -}) + + ) +} diff --git a/src/routes/events/create.tsx b/src/routes/events/create.tsx index 8771014..0fa6ae3 100644 --- a/src/routes/events/create.tsx +++ b/src/routes/events/create.tsx @@ -1,6 +1,6 @@ import { createFileRoute, Link } from '@tanstack/react-router'; import { ChangeEvent, FormEvent, useEffect, useState } from 'react'; -import { Button } from '../../components/Button'; +import { Button } from '../../components/Common/customButton'; import { UserController } from '../../controllers/user'; import { AuthGuard } from '../../utils/auth'; import { supabase } from '../../utils/supabase'; diff --git a/src/routes/home/infoCard.tsx b/src/routes/home/infoCard.tsx new file mode 100644 index 0000000..322d4ab --- /dev/null +++ b/src/routes/home/infoCard.tsx @@ -0,0 +1,5 @@ +import { createFileRoute } from '@tanstack/react-router' + +export const Route = createFileRoute('/home/infoCard')({ + component: () =>
    Hello /home/infoCard!
    +}) \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx new file mode 100644 index 0000000..34e3934 --- /dev/null +++ b/src/routes/index.tsx @@ -0,0 +1,35 @@ +import { createFileRoute, Link } from '@tanstack/react-router'; +import { AuthGuard } from '../utils/auth'; +import { supabase } from '../utils/supabase'; + +const styles = { + container: { + flex: 1, + backgroundColor: '#ffffff', + }, +}; + +export const Route = createFileRoute('/')({ + beforeLoad: AuthGuard, + loader: async () => { + const { data, error } = await supabase + .from('user') + .select() + + if (error !== null) { + throw error + } + + return { user: data } + }, + component: HomeIndex +}) + +function HomeIndex() { + return ( +
    +

    Home

    + Go to /home/infoCard +
    + ) +} diff --git a/src/routes/login.tsx b/src/routes/login.tsx index a03661d..f30a8c4 100644 --- a/src/routes/login.tsx +++ b/src/routes/login.tsx @@ -1,5 +1,6 @@ import { createFileRoute } from '@tanstack/react-router' import { useState } from 'react' +import { VStack } from '../components' import { supabase } from '../utils/supabase' export const Route = createFileRoute('/login')({ @@ -33,10 +34,16 @@ function LoginPage() { return (
    - - { setEmail(e.target.value) }} /> - - { setPassword(e.target.value) }} /> + +
    + + { setEmail(e.target.value) }} /> +
    +
    + + { setPassword(e.target.value) }} /> +
    +
    )