feat: support operator api

src/components/Dashboard/OperatorGrid/OperatorGrid.tsx

@@ -1,22 +1,15 @@
 import { breakpoints } from '@/configs/ui.configs'
+import { ProcessedOperator } from '@/containers/Dashboard/DashboardContainer'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import React from 'react'
 
-interface Operator {
-  id: string
-  image: string
-  name: string
-  pointsPerHour: number
-  isStaked: boolean
-  isPinned: boolean
-}
-
 interface OperatorGridProps {
   isLoading: boolean
+  data: ProcessedOperator[]
 }
 
-const operators: Operator[] = [
+const operators: ProcessedOperator[] = [
   {
     id: '1',
     image: '/dashboard/mock/operators/1.gif',
@@ -77,6 +70,7 @@ const operators: Operator[] = [
 
 const OperatorGrid: React.FC<OperatorGridProps> = ({
   isLoading,
+  data,
 }: OperatorGridProps) => {
   return (
     <StyledOperatorGrid>
@@ -117,7 +111,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
                 <Placeholder />
               </OperatorCard>
             ))
-          : operators.map((operator) => (
+          : data.map((operator) => (
               <OperatorCard key={operator.id}>
                 <Link href={`/operators/${operator.id}`} key={operator.id}>
                   <OperatorImage src={operator.image} alt={operator.name} />

src/containers/Dashboard/DashboardContainer.tsx

@@ -11,12 +11,54 @@ export type DashboardPageProps = React.DetailedHTMLProps<
   HTMLDivElement
 >
 
+export interface Operator {
+  id: number
+  name: string
+  image_400_url: string
+}
+
+export interface Group {
+  id: number
+  name: string
+  operators: Operator[]
+}
+
+export interface ProcessedOperator {
+  id: string
+  image: string
+  name: string
+  pointsPerHour: number
+  isStaked: boolean
+  isPinned: boolean
+}
+
+function processOperators(data: Group[]): ProcessedOperator[] {
+  return data?.flatMap((group) =>
+    group.operators.map((operator) => ({
+      id: operator.id.toString(), // Convert ID to string
+      image: operator.image_400_url,
+      name: `OP ${operator.id}`,
+      pointsPerHour: Math.floor(Math.random() * 500), // Random value for points per hour
+      isStaked: false,
+      isPinned: false,
+    })),
+  )
+}
+
 const DashboardContainer: React.FC<DashboardPageProps> = ({
   children,
   ...props
 }) => {
   const { data, isLoading } = useGetOperators()
-  console.log(data)
+
+  const processedOperators = processOperators(data)
+
+  function getRandomSubset<T>(array: T[], count: number): T[] {
+    const shuffled = array?.sort(() => 0.5 - Math.random())
+    return shuffled?.slice(0, count)
+  }
+
+  const random20Operators = getRandomSubset(processedOperators, 20)
 
   return (
     <Container {...props}>
@@ -26,7 +68,7 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
         </LeftColumn>
         <RightColumn>
           <ProgressBar progress={20} claimPosition={60} />
-          <OperatorGrid isLoading={isLoading} />
+          <OperatorGrid data={random20Operators} isLoading={isLoading} />
         </RightColumn>
       </Wrapper>
     </Container>