⚡ Improve Datatable Proxy

📖 Add new types to  add genericity
⚡ Improve Hooks

motivator/src/core/components/container/DataTableAuditContainer.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useEffect } from 'react'
 import { DataTableAuditAssessorSlot } from '@/components/datatables/DataTableAuditAssessorSlot'
-import { AssessorSlot } from '@protocols/hyperdrive/types/data/assessorSlot'
+import { AssessorSlotHyperdrive } from '@protocols/hyperdrive/types/data/assessorSlot'
 import { useAccount } from 'wagmi'
 import { RoundSpinner } from '@/components/ui/spinner'
 import { AuditAssessorsSlotsDatatable } from '@/components/datatables/DataTableAuditAssessorSlot'
@@ -21,7 +21,7 @@ const DataTableAuditContainer = () => {
         if (statusAccount === 'connected' && refetch) refetch()
     }, [refetch, statusAccount])
 
-    const prepareDataForTable = (assessorSlots: AssessorSlot[]) => {
+    const prepareDataForTable = (assessorSlots: AssessorSlotHyperdrive[]) => {
         const res: AuditAssessorsSlotsDatatable[] = []
         if (
             assessorSlots === undefined ||

motivator/src/core/components/datatables/DatatableProxyAssessor.tsx

@@ -1,6 +1,14 @@
 'use client'
 
 import { DataTableContainerAssessor } from '@protocols/hyperdrive/components/datatables/container/DataTableContainerAssessor'
+import { useGetAssessorSlot } from '@/hooks/assessorSlot/useGetAssessorSlot'
+import { useAccount } from 'wagmi'
+import { usePathname } from 'next/navigation'
+import { RoundSpinner } from '../ui/spinner'
+import { useEffect } from 'react'
+import { AssessorSlotHyperdrive } from '../../../protocols/hyperdrive/types/data/assessorSlot'
+import { AssessorSlotProtocols } from '@/types/data/assessorSlotsProtocols'
+
 type Props = {
     protocol: string
 }
@@ -12,12 +20,51 @@ type Props = {
  * @returns DataTableContainer component
  */
 const DatatableProxyAssessor = ({ protocol }: Props) => {
+    const { address, status: statusAccount } = useAccount()
+    const pathname = usePathname()
+    // Extract id from the pathname
+    // http://localhost:3000/assessor/slot/7677e331-29eb-4c54-8e7a-d44a816fe423
+    const slotID = pathname.split('/').slice(2)[1]
+
+    const { data, error, status, refetch } = useGetAssessorSlot({
+        assessorSlotID: slotID as string,
+    })
+
+    // Refresh the data when the account is connected
+    useEffect(() => {
+        if (statusAccount === 'connected' && refetch) refetch()
+    }, [refetch, statusAccount])
+
+    // Implement Skeletton
+    if (
+        status != 'success' ||
+        (data.res as AssessorSlotProtocols) === undefined
+    ) {
+        return (
+            <div className="mx-auto">
+                <RoundSpinner size="triplexl" />
+            </div>
+        )
+    }
+    /**
+     * Load Datatable Container for each protocol
+     * @param protocol
+     * @returns Container for the Datatable
+     */
     const loadDatatableProtocol = (protocol: string) => {
         switch (protocol) {
             case 'hyperdrive':
-                return <DataTableContainerAssessor />
+                return (
+                    <DataTableContainerAssessor
+                        data={data.res as AssessorSlotHyperdrive}
+                    />
+                )
             default:
-                return <DataTableContainerAssessor />
+                return (
+                    <DataTableContainerAssessor
+                        data={data.res as AssessorSlotHyperdrive}
+                    />
+                )
         }
     }
 

motivator/src/core/hooks/assessorSlot/useGetAssessorSlot.ts

@@ -13,10 +13,20 @@ type Props = {
  *
  */
 const useGetAssessorSlot = ({ assessorSlotID }: Props) => {
+    const protocol = process.env.NEXT_PUBLIC_PROJECT_NAME as string
+
+    /**
+     * When implementing a new protocol, add a case in the switch statement with the name of the protocol and the new function to get the assessor slot
+     */
     const { data, refetch, status, error } = useQuery({
         queryKey: ['useGetAssessorSlot'],
         queryFn: async () => {
-            return await getAssessorSlot({ assessorSlotID })
+            switch (protocol) {
+                case 'hyperdrive':
+                    return await getAssessorSlot({ assessorSlotID })
+                default:
+                    return await getAssessorSlot({ assessorSlotID })
+            }
         },
         // staleTime: 1000 * 6,
         retry: true,

motivator/src/core/server/actions/assessor/getAssessorSlot.ts

@@ -3,7 +3,7 @@ import { and, eq, ne } from 'drizzle-orm'
 import { db } from '@db/dbRouter'
 import { assessor_slot, assessor_slot_user, reward } from '@db/schema'
 import {
-    AssessorSlot,
+    AssessorSlotHyperdrive,
     Statistics,
     Totals,
 } from '@protocols/hyperdrive/types/data/assessorSlot'
@@ -94,7 +94,7 @@ export async function getAssessorSlot({
     const statistics = await statisticsPromised()
 
     //build the response
-    const assessorSlot: AssessorSlot = {
+    const assessorSlot: AssessorSlotHyperdrive = {
         assessorSlotCore: {
             id: assessorSlotOfAssessor.id,
             assessorID: assessorSlotOfAssessor.assessor_ID as string,

motivator/src/core/server/actions/globals/getAllAssessorSlotsAudit.ts

@@ -2,7 +2,7 @@
 import { and, eq, ne } from 'drizzle-orm'
 import { db } from '@db/dbRouter'
 import { assessor_slot, audit, reward } from '@db/schema'
-import { AssessorSlot } from '@protocols/hyperdrive/types/data/assessorSlot'
+import { AssessorSlotHyperdrive } from '@protocols/hyperdrive/types/data/assessorSlot'
 import { Grade } from '@/types/enums/grade'
 import { Address } from 'viem'
 // Send Rewards to specifics users based on their actions
@@ -33,7 +33,7 @@ export async function getAllAssessorSlotsAudit() {
             const getAudit = await db.query.audit.findFirst({
                 where: eq(audit.assessor_slot_id, assessorSlot.id),
             })
-            const assessor: AssessorSlot = {
+            const assessor: AssessorSlotHyperdrive = {
                 assessorSlotCore: {
                     id: assessorSlot.id,
                     assessorID: assessorSlot.assessor_ID as string,

motivator/src/core/types/data/assessorSlotsProtocols.ts

@@ -0,0 +1,7 @@
+import { AssessorSlotHyperdrive } from '@protocols/hyperdrive/types/data/assessorSlot'
+
+/**
+ * This type is a multiple type of Assessor Slots
+ * When implementing a new protocol, add a new type in the union
+ */
+export type AssessorSlotProtocols = AssessorSlotHyperdrive | any

motivator/src/protocols/hyperdrive/components/datatables/container/DataTableContainerAssessor.tsx

@@ -5,7 +5,7 @@ import {
     UserDatatable,
 } from '@protocols/hyperdrive/components/datatables/table/DataTableAssessor'
 import {
-    AssessorSlot,
+    AssessorSlotHyperdrive,
     Statistics,
     Totals,
 } from '@protocols/hyperdrive/types/data/assessorSlot'
@@ -14,8 +14,19 @@ import { Status } from '@protocols/hyperdrive/types/enums/status'
 import { RoundSpinner } from '@/components/ui/spinner'
 import { usePathname } from 'next/navigation'
 import { useGetAssessorSlot } from '@/hooks/assessorSlot/useGetAssessorSlot'
-export const DataTableContainerAssessor = () => {
-    const prepareDataForTable = (assessorSlot: AssessorSlot) => {
+
+type Props = {
+    data: AssessorSlotHyperdrive
+}
+
+export const DataTableContainerAssessor = ({ data }: Props) => {
+    /**
+     * This function is used to prepare the data for the table
+     * Grab the data in the Assessor Slot and prepare it for the table
+     * @param assessorSlot The Assessor Slot
+     * @returns The UserDatatable array
+     */
+    const prepareDataForTable = (assessorSlot: AssessorSlotHyperdrive) => {
         const res: UserDatatable[] = []
         assessorSlot?.users.forEach((element, index) => {
             const reward = assessorSlot.rewards.find(
@@ -63,33 +74,5 @@ export const DataTableContainerAssessor = () => {
         })
     }
 
-    const { address, status: statusAccount } = useAccount()
-    const pathname = usePathname()
-    // Extract id from the pathname
-    // http://localhost:3000/assessor/slot/7677e331-29eb-4c54-8e7a-d44a816fe423
-    const slotID = pathname.split('/').slice(2)[1]
-
-    const { data, error, status, refetch } = useGetAssessorSlot({
-        assessorSlotID: slotID as string,
-    })
-
-    // Refresh the data when the account is connected
-    useEffect(() => {
-        if (statusAccount === 'connected' && refetch) refetch()
-    }, [refetch, statusAccount])
-
-    // Implement Skeletton
-    if (status != 'success' || (data.res as AssessorSlot) === undefined) {
-        return (
-            <div className="mx-auto">
-                <RoundSpinner size="triplexl" />
-            </div>
-        )
-    }
-
-    return (
-        <DataTableAssessor
-            users={prepareDataForTable(data.res as AssessorSlot)}
-        />
-    )
+    return <DataTableAssessor users={prepareDataForTable(data)} />
 }

motivator/src/protocols/hyperdrive/types/data/assessorSlot.ts

@@ -2,7 +2,11 @@ import { Address } from 'viem'
 import { Grade } from '@/types/enums/grade'
 import { AssessorSlotCore } from '@/types/data/assessorSlotCore'
 
-export type AssessorSlot = {
+/**
+ * This type is the Assessor Slot for the Hyperdrive protocol
+ * When implementing a new protocol, Add AssessorSlotCore and add the new parameters
+ */
+export type AssessorSlotHyperdrive = {
     assessorSlotCore: AssessorSlotCore
     week: number
     users: string[]