Igalia · negreirosleo · Oct 2, 2023 · Sep 26, 2023 · Sep 26, 2023 · Sep 26, 2023
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@fluentui/react-icons": "^2.0.216",
     "@mui/joy": "^5.0.0-beta.6",
+    "@tanstack/react-query": "^4.35.3",
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -1,78 +1,3 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -87,13 +12,6 @@ body {
 
 body {
   display: flex;
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
 
   @media (max-width: 600px) {
     flex-direction: column;
@@ -104,9 +22,3 @@ a {
   color: inherit;
   text-decoration: none;
 }
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,12 +1,10 @@
 import './globals.css'
 import type { Metadata } from 'next'
 import localFont from 'next/font/local'
-import { AuthProvider } from '@/app/auth/AuthProvider'
 import { Sidebar } from '@/ui/Sidebar/Sidebar'
 import { ContentSidebar } from '@/ui/ContentSidebar/ContentSidebar'
-import { CssVarsProvider } from '@mui/joy/styles'
-import { theme } from '@/ui/theme'
 import { Main, SkipNavigation } from '@/ui/SkipNavigation/SkipNavigation'
+import { Providers } from './providers'
 
 const monaSans = localFont({
   src: '../assets/fonts/Mona-Sans.woff2',
@@ -22,18 +20,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={monaSans.className}>
-        <AuthProvider>
-          <CssVarsProvider theme={theme}>
-            <SkipNavigation href="#main-content">Skip Navigation</SkipNavigation>
-            <Sidebar />
-            <Main id="main-content" tabIndex={-1}>
-              {children}
-            </Main>
-            <ContentSidebar>
-              <div style={{ color: 'black' }}>Right Sidebar</div>
-            </ContentSidebar>
-          </CssVarsProvider>
-        </AuthProvider>
+        <Providers>
+          <SkipNavigation href="#main-content">Skip Navigation</SkipNavigation>
+          <Sidebar />
+          <Main id="main-content" tabIndex={-1}>
+            {children}
+          </Main>
+          <ContentSidebar>
+            <div style={{ color: 'black' }}>Right Sidebar</div>
+          </ContentSidebar>
+        </Providers>
       </body>
     </html>
   )

diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { CssVarsProvider } from '@mui/joy/styles'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AuthProvider } from '@/app/auth/AuthProvider'
+import { theme } from '@/ui/theme'
+
+const queryClient = new QueryClient()
+
+export const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <AuthProvider>
+      <QueryClientProvider client={queryClient}>
+        <CssVarsProvider theme={theme}>{children}</CssVarsProvider>
+      </QueryClientProvider>
+    </AuthProvider>
+  )
+}
diff --git a/frontend/src/app/tasks/hooks/useForm.ts b/frontend/src/app/tasks/hooks/useForm.ts
@@ -0,0 +1,17 @@
+import { useState } from 'react'
+
+type UseFormProps<T> = {
+  initialValues: T
+}
+
+export const useForm = <T>({ initialValues }: UseFormProps<T>) => {
+  const [formState, setFormState] = useState(initialValues)
+
+  const handleChange = <F extends keyof T>(field: F, newValue: T[F]) => {
+    setFormState((prevFormState) => ({ ...prevFormState, [field]: newValue }))
+  }
+
+  const resetForm = () => setFormState(initialValues)
+
+  return { handleChange, formState, resetForm }
+}
diff --git a/frontend/src/app/tasks/hooks/useProjects.ts b/frontend/src/app/tasks/hooks/useProjects.ts
@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import { useAuth } from 'react-oidc-context'
+
+import { apiClient } from '@/infra/apiClient'
+
+type Project = {
+  id: string
+  area_id: number
+  customer_id: number
+  description: string
+  is_active: boolean
+  init?: string
+  end?: string
+  invoice?: number
+  estimated_hours?: number
+  moved_hours?: number
+  project_type?: string
+  schedule_type?: string
+}
+
+const fetchProjects = (token: string): Promise<Array<Project>> => {
+  return apiClient(token)
+    .get('/v1/projects')
+    .then((response) => response.data)
+}
+
+export const useProjects = () => {
+  const auth = useAuth()
+  const token = auth.user?.access_token || ''
+
+  const { data = [], isLoading } = useQuery({
+    queryKey: ['projects', token],
+    queryFn: () => {
+      return fetchProjects(token)
+    }
+  })
+
+  return { projects: data, isLoading }
+}
diff --git a/frontend/src/app/tasks/hooks/useTaskTypes.ts b/frontend/src/app/tasks/hooks/useTaskTypes.ts
@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query'
+import { useAuth } from 'react-oidc-context'
+
+type TaskType = {
+  slug: string
+  name: string
+  active: boolean
+}
+
+// Temporary disable so we don't need to change the fetch api for now.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const fetchTaskTypes = (token: string): Promise<Array<TaskType>> => {
+  // return apiClient(token)
+  //   .get('/v1/timelog/task_types/')
+  //   .then((response) => response.data)
+  const mockData = Promise.resolve([
+    { name: 'mock task type', slug: 'mock-test', active: true },
+    { name: 'mock task type 2', slug: 'mock-test-2', active: true }
+  ])
+  return mockData
+}
+
+export const useTaskTypes = () => {
+  const auth = useAuth()
+  const token = auth.user?.access_token || ''
+
+  const { data } = useQuery({
+    queryKey: ['taskTypes', token],
+    queryFn: () => {
+      return fetchTaskTypes(token)
+    },
+    initialData: []
+  })
+
+  return data
+}