Generic data model and Supabase data service

src/models/GenericModel.ts

@@ -0,0 +1,13 @@
+// GenericModel class
+export default abstract class GenericModel {
+    // Abstract property for table name
+    static TABLE_NAME: string;
+
+    static DATABASE_MAP: Object;
+
+    // Abstract method for parsing JSON
+    static parseJson(json: any): GenericModel {
+        throw new Error("parseJson method not implemented.");
+        return json
+    }
+}

src/models/User.ts

@@ -0,0 +1,36 @@
+import GenericModel from "./GenericModel"
+
+export default class User extends GenericModel {
+
+    static TABLE_NAME = "members"
+    static DATABASE_MAP: Object = {
+        id:         "uuid",
+        username:   "username",
+        email:      "fk_email",
+        identity:   "fk_identity",
+        avatar:     "avatar",
+    }
+
+    public id:                  String  = ""
+    public username:            String  = ""
+    public email:               String  = ""
+    public phone:               String  = ""
+    public avatar:              String  = ""
+    public profileBackground:   String  = ""
+    public joinedAt:            Date    = new Date()
+    public identity:            String  = ""
+    public department:          String  = ""
+    public grade:               String  = ""
+    public bio:                 String  = ""
+
+
+    static parseJson(json: any) : User {
+        const user = new User()
+
+        for (const [userProperty, jsonField] of Object.entries(this.DATABASE_MAP))
+            if (json[jsonField] !== undefined)
+                (user as any)[userProperty] = json[jsonField];
+
+        return user
+    }
+}

src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as LoginImport } from './routes/login'
 import { Route as IndexImport } from './routes/index'
 import { Route as SalesIndexImport } from './routes/sales/index'
 import { Route as MapIndexImport } from './routes/map/index'
+import { Route as HomeIndexImport } from './routes/home/index'
 import { Route as EventsIndexImport } from './routes/events/index'
 import { Route as DinnerIndexImport } from './routes/dinner/index'
 import { Route as CalendarIndexImport } from './routes/calendar/index'
@@ -44,6 +45,11 @@ const MapIndexRoute = MapIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const HomeIndexRoute = HomeIndexImport.update({
+  path: '/home/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const EventsIndexRoute = EventsIndexImport.update({
   path: '/events/',
   getParentRoute: () => rootRoute,
@@ -134,6 +140,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof EventsIndexImport
       parentRoute: typeof rootRoute
     }
+    '/home/': {
+      id: '/home/'
+      path: '/home'
+      fullPath: '/home'
+      preLoaderRoute: typeof HomeIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/map/': {
       id: '/map/'
       path: '/map'
@@ -162,6 +175,7 @@ export interface FileRoutesByFullPath {
   '/calendar': typeof CalendarIndexRoute
   '/dinner': typeof DinnerIndexRoute
   '/events': typeof EventsIndexRoute
+  '/home': typeof HomeIndexRoute
   '/map': typeof MapIndexRoute
   '/sales': typeof SalesIndexRoute
 }
@@ -175,6 +189,7 @@ export interface FileRoutesByTo {
   '/calendar': typeof CalendarIndexRoute
   '/dinner': typeof DinnerIndexRoute
   '/events': typeof EventsIndexRoute
+  '/home': typeof HomeIndexRoute
   '/map': typeof MapIndexRoute
   '/sales': typeof SalesIndexRoute
 }
@@ -189,6 +204,7 @@ export interface FileRoutesById {
   '/calendar/': typeof CalendarIndexRoute
   '/dinner/': typeof DinnerIndexRoute
   '/events/': typeof EventsIndexRoute
+  '/home/': typeof HomeIndexRoute
   '/map/': typeof MapIndexRoute
   '/sales/': typeof SalesIndexRoute
 }
@@ -204,6 +220,7 @@ export interface FileRouteTypes {
     | '/calendar'
     | '/dinner'
     | '/events'
+    | '/home'
     | '/map'
     | '/sales'
   fileRoutesByTo: FileRoutesByTo
@@ -216,6 +233,7 @@ export interface FileRouteTypes {
     | '/calendar'
     | '/dinner'
     | '/events'
+    | '/home'
     | '/map'
     | '/sales'
   id:
@@ -228,6 +246,7 @@ export interface FileRouteTypes {
     | '/calendar/'
     | '/dinner/'
     | '/events/'
+    | '/home/'
     | '/map/'
     | '/sales/'
   fileRoutesById: FileRoutesById
@@ -242,6 +261,7 @@ export interface RootRouteChildren {
   CalendarIndexRoute: typeof CalendarIndexRoute
   DinnerIndexRoute: typeof DinnerIndexRoute
   EventsIndexRoute: typeof EventsIndexRoute
+  HomeIndexRoute: typeof HomeIndexRoute
   MapIndexRoute: typeof MapIndexRoute
   SalesIndexRoute: typeof SalesIndexRoute
 }
@@ -255,6 +275,7 @@ const rootRouteChildren: RootRouteChildren = {
   CalendarIndexRoute: CalendarIndexRoute,
   DinnerIndexRoute: DinnerIndexRoute,
   EventsIndexRoute: EventsIndexRoute,
+  HomeIndexRoute: HomeIndexRoute,
   MapIndexRoute: MapIndexRoute,
   SalesIndexRoute: SalesIndexRoute,
 }
@@ -279,6 +300,7 @@ export const routeTree = rootRoute
         "/calendar/",
         "/dinner/",
         "/events/",
+        "/home/",
         "/map/",
         "/sales/"
       ]
@@ -307,6 +329,9 @@ export const routeTree = rootRoute
     "/events/": {
       "filePath": "events/index.tsx"
     },
+    "/home/": {
+      "filePath": "home/index.tsx"
+    },
     "/map/": {
       "filePath": "map/index.tsx"
     },

src/routes/home/index.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute } from '@tanstack/react-router'
+// import { VStack } from '../../components'
+
+// const homeItems = [
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+//   { title: "test", description: "Hello world." },
+// ]
+
+// User.fetchSingle().then(user => {
+//   console.log(user)
+// })
+
+// const supabaseService = new SupabaseService()
+// SupabaseService.fetchSingle(User, "c7e80cb0-7d3d-411f-9983-5e3addf62980", { email: "ncuapp@test.com" }).then(
+//   response => {
+//     console.log(response)
+//   }
+// )
+
+// SupabaseService.fetchMultiple(User).then(
+//   response => {
+//     console.log(response)
+//   }
+// )
+
+// async function fetch() {
+//   const { data } = await supabase.from('members').select('*')
+//   console.log(data)
+// }
+// fetch()
+
+export const Route = createFileRoute('/home/')({
+
+  component: () => <div>
+    <section className='h-[200px] mb-[40px] bg-yellow-50 relative border-b-[5px] border-gray-600'>
+
+      <div className='flex flex-col absolute left-[10px] bottom-[5px]'>
+        <h1 className='font-bold text-4xl text-black'>這裡最多七個字</h1>
+        <h2 className='font-bold text-black'>中文系 二年級</h2>
+      </div>
+
+      {/* <div className='
+        w-[125px] h-[125px]
+        absolute right-[15px] bottom-[-25px]
+        border-[4px] border-gray-600 rounded-full bg-gray-500
+      '></div> */}
+
+      <div className="avatar absolute right-[15px] bottom-[-25px]">
+        <div className="ring-gray-300 w-[125px] rounded-full ring">
+          <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+        </div>
+      </div>
+
+      <span className='
+        absolute top-[20px] right-[15px]
+        text-black font-bold text-xs
+      '>
+        變更個人檔案
+      </span>
+    </section>
+  </div >,
+})

src/services/SupabaseService.ts

@@ -0,0 +1,84 @@
+import GenericModel from "../models/GenericModel";
+import { supabase } from "../utils/supabase";
+
+// Supabase service for quickly accessing data
+export default class SupabaseService {
+
+
+    /* Fetch a single object
+    *
+    * Parameters
+    * ----------
+    * modelClass: class
+    *   The target model class
+    * targetID: str
+    *   The target record ID
+    * criteria: Dictionary
+    *   Extra search criteria, please follow the DATABASE_MAPPING of the target model
+    * 
+    * Returns
+    * -------
+    * The target object (of the target model type). Null if record is not found.
+    */
+    public static async fetchSingle<T extends GenericModel>(
+        modelClass: new() => T,
+        targetID:   String,
+        criteria?: Partial<Record<string, any>>,
+    ): Promise<T | null> {
+        const model = (modelClass as any)
+        const tableName = model.TABLE_NAME
+
+        var query = supabase.from(tableName)
+                        .select('*')
+                        .eq("uuid", targetID)
+
+        for (const key in criteria)
+            if (model.DATABASE_MAP[key])
+                query = query.eq(model.DATABASE_MAP[key], criteria[key])
+
+        const data = await query;
+
+        if (!data.data || data.data.length == 0) {
+            return null
+        }
+        const record = data.data[0]
+
+        return model.parseJson(record)
+    }
+
+
+
+
+    /* Fetch an array of objects
+    *
+    * Parameters
+    * ----------
+    * modelClass: class
+    *   The target model class
+    * 
+    * Returns
+    * -------
+    * Array of objects (of the target model type).
+    * Returns empty array if no records can be found.
+    */
+    public static async fetchMultiple<T extends GenericModel>(
+        modelClass: new() => T,
+    ): Promise<Array<T>> {
+        const model = (modelClass as any)
+        const tableName = model.TABLE_NAME
+
+        const data = await supabase.from(tableName)
+                        .select('*')
+
+        const records = data.data
+
+        const results: Array<T> = []
+
+        records?.forEach(record => {
+            const user = model.parseJson(record)
+            results.push(user)
+        })
+
+        return results
+    }
+}