setting up Redux and RTK Query. I have set up the redux store and I a…

…m working on seting up the createApi slide for the project

package.json

@@ -17,15 +17,20 @@
     "@mui/material": "^5.10.16",
     "@mui/styled-engine-sc": "^5.10.16",
     "@mui/x-data-grid": "^5.17.14",
+    "@reduxjs/toolkit": "^1.9.3",
     "@types/papaparse": "^5.3.5",
     "firebase": "^9.10.0",
     "fs": "^0.0.1-security",
     "next": "^13.1.6",
+    "next-redux-wrapper": "^8.1.0",
     "papaparse": "^5.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-firebase-hooks": "^5.1.1",
+    "react-redux": "^8.0.5",
     "react-select": "^5.5.6",
     "react-uuid": "^2.0.0",
+    "redux-firestore": "^1.0.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {

src/firebase/clientApp.ts

@@ -1,7 +1,7 @@
-// Import the functions you need from the SDKs you need
 import { initializeApp } from 'firebase/app'
 import { Analytics, getAnalytics } from 'firebase/analytics'
 import { Firestore, getFirestore } from 'firebase/firestore'
+import { Auth, getAuth } from 'firebase/auth'
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -15,17 +15,48 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const firebaseApp = initializeApp(firebaseConfig)
-let analytics: Analytics, firestore: Firestore // TYPES!! Imported from Firebase!
-if (firebaseConfig?.projectId) {
-  // Initialize Firebase
-  const app = initializeApp(firebaseConfig)
+let analytics: Analytics, firestore: Firestore, auth: Auth // TYPES!! Imported from Firebase!
 
-  if (app.name && typeof window !== 'undefined') {
-    analytics = getAnalytics(app) // HOVER OVER GETANALYTICS FOR RETURN TYPE
+if (firebaseConfig?.projectId) {
+  if (firebaseApp.name && typeof window !== 'undefined') {
+    analytics = getAnalytics(firebaseApp) // HOVER OVER GETANALYTICS FOR RETURN TYPE
   }
 
   // Access Firebase services using shorthand notation
   firestore = getFirestore(firebaseApp) // HOVER OVER GETFIREBASE FOR RETURN TYPE
+  auth = getAuth(firebaseApp)
 }
 
-export { firestore, analytics }
+export { firestore, analytics, auth }
+
+// // Import the functions you need from the SDKs you need
+// import { initializeApp } from 'firebase/app'
+// import { Analytics, getAnalytics } from 'firebase/analytics'
+// import { Firestore, getFirestore } from 'firebase/firestore'
+
+// const firebaseConfig = {
+//   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+//   authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+//   projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+//   storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+//   messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+//   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+//   measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+// }
+
+// // Initialize Firebase
+// const firebaseApp = initializeApp(firebaseConfig)
+// let analytics: Analytics, firestore: Firestore // TYPES!! Imported from Firebase!
+// if (firebaseConfig?.projectId) {
+//   // Initialize Firebase
+//   const app = initializeApp(firebaseConfig)
+
+//   if (app.name && typeof window !== 'undefined') {
+//     analytics = getAnalytics(app) // HOVER OVER GETANALYTICS FOR RETURN TYPE
+//   }
+
+//   // Access Firebase services using shorthand notation
+//   firestore = getFirestore(firebaseApp) // HOVER OVER GETFIREBASE FOR RETURN TYPE
+// }
+
+// export { firestore, analytics }

src/pages/_app.tsx

@@ -2,12 +2,16 @@ import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import { AuthUserProvider } from '../context/UserContext'
 
+import { Provider } from 'react-redux'
+import { store } from '../store/store'
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <AuthUserProvider>
-      <Component {...pageProps} />
-    </AuthUserProvider>
+    <Provider store={store}>
+      <AuthUserProvider>
+        <Component {...pageProps} />
+      </AuthUserProvider>
+    </Provider>
   )
 }
-
 export default MyApp

src/pages/manager/planner/Testing.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import type { RootState } from '../../../store/store'
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment } from '../../../store/slices/counterSlice'
+import { useGetHousesQuery } from '../../../store/api/apiSlice'
+
+const Testing = () => {
+  const count = useSelector((state: RootState) => state.counter.value)
+  const { data, isLoading } = useGetHousesQuery('houses/EUC/shifts')
+  const dispatch = useDispatch()
+
+  React.useEffect(() => {
+    console.log('isLoading =', isLoading)
+    console.log(data)
+  }, [isLoading, data])
+
+  if (isLoading) {
+    return <h1>Is Loading...</h1>
+  } else {
+    return (
+      <>
+        <div>
+          <div>
+            <button
+              aria-label="Increment value"
+              onClick={() => dispatch(increment())}
+            >
+              Increment
+            </button>
+            <span>{count}</span>
+            <button
+              aria-label="Decrement value"
+              onClick={() => dispatch(decrement())}
+            >
+              Decrement
+            </button>
+          </div>
+        </div>
+      </>
+    )
+  }
+}
+
+export default Testing

src/pages/manager/planner/UnassignedTabContent.tsx

@@ -15,7 +15,7 @@ const headCells: HeadCell<Shift>[] = [
   },
   {
     id: 'timeWindowDisplay',
-    isNumeric: false,
+    isNumeric: true,
     label: 'Time',
     isSortable: false,
   },

src/pages/manager/planner/index.tsx

@@ -5,6 +5,7 @@ import CategoriesView from '../categoryDropdown/categoriesView'
 import { useUserContext } from '../../../context/UserContext'
 import ShiftSchedule from '../../../components/ManagerComponents/shiftSchedule/ShiftSchedule'
 import { UnassignedTabContent } from './UnassignedTabContent'
+import Testing from './Testing'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -66,6 +67,7 @@ export default function SchedulePage() {
         </Box>
         <TabPanel value={currPage} index={0}>
           <UnassignedTabContent />
+          <Testing />
         </TabPanel>
         <TabPanel value={currPage} index={1}>
           <ShiftSchedule />

src/store/api/apiSlice.ts

@@ -0,0 +1,155 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { firestore } from '../../firebase/clientApp'
+import {
+  collection,
+  doc,
+  getDocs,
+  getDoc,
+  QuerySnapshot,
+  DocumentSnapshot,
+} from 'firebase/firestore'
+
+import { MaybePromise } from '@reduxjs/toolkit/dist/query/tsHelpers'
+import { ThunkDispatch } from '@reduxjs/toolkit'
+
+export type BaseQueryFn<
+  Args = any,
+  Result = unknown,
+  Error = unknown,
+  DefinitionExtraOptions = {},
+  Meta = {}
+> = (
+  args: Args,
+  api: BaseQueryApi,
+  extraOptions: DefinitionExtraOptions
+) => MaybePromise<QueryReturnValue<Result, Error, Meta>>
+
+export interface BaseQueryApi {
+  signal: AbortSignal
+  abort: (reason?: string) => void
+  dispatch: ThunkDispatch<any, any, any>
+  getState: () => unknown
+  extra: unknown
+  endpoint: string
+  type: 'query' | 'mutation'
+  forced?: boolean
+}
+
+export type QueryReturnValue<T = unknown, E = unknown, M = unknown> =
+  | {
+      error: E
+      data?: undefined
+      meta?: M
+    }
+  | {
+      error?: undefined
+      data: T
+      meta?: M
+    }
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: 'fakeUrl',
+  fetchFn: async (input: Request) => {
+    console.log('ARGS: ', input)
+    // console.log('ARGS: ', api)
+
+    const { url, method } = input
+    const pathArray = url
+      .split('fakeUrl')[1]
+      .split('/')
+      .filter((p: string) => p.length > 0)
+
+    let isCollection = false
+    console.log(pathArray)
+    if (pathArray.length === 0) {
+      return { error: 'Invalid Path' }
+    }
+
+    let path = ''
+    pathArray.forEach((p: string, index: number) => {
+      if (pathArray.length === index + 1) {
+        path += p
+      } else {
+        path += p + '/'
+      }
+    })
+
+    console.log(path)
+    if (pathArray.length % 2 !== 0) {
+      isCollection = true
+    }
+
+    const response: { data: unknown; id: string }[] = []
+    setTimeout(() => {
+      console.log('waited for 3000ms')
+    }, 3000)
+    try {
+      switch (method) {
+        case 'GET':
+          // let snapshot: any
+          if (isCollection) {
+            //** If the query is a collection, get the full collection */
+            const querySnapshot: QuerySnapshot<unknown> = await getDocs(
+              collection(firestore, path)
+            )
+            console.log('collection SnapShot', querySnapshot)
+            // console.log(querySnapshot.docs)
+            if (!querySnapshot) return { error: 'collection not found' }
+            querySnapshot.forEach((doc) => {
+              // doc.data() is never undefined for query doc snapshots
+              const data = doc.data()
+              response.push({ data: data, id: doc.id.toString() })
+              console.log(doc.id, ' => ', doc.data())
+            })
+            console.log(response)
+            // return snapshot.map((doc) => ({ id: doc.id, ...doc.data() }))
+
+            return new Response(JSON.stringify({ data: response }))
+          } else {
+            //** If the query is a document, get the document with id provided */
+            const snapshot: DocumentSnapshot<unknown> = await getDoc(
+              doc(firestore, path)
+            )
+            if (!snapshot.exists()) {
+              return { error: 'Document does not exist' }
+            }
+            const data = snapshot.data()
+            response.push({ data: data, id: pathArray[pathArray.length - 1] })
+            console.log(response)
+            return new Response(JSON.stringify({ data: response }))
+          }
+
+        // case 'POST':
+        //   await query.add(data)
+        //   return { data, url: '' }
+        // case 'PUT':
+        //   await query.set(data)
+        //   return { data, url: '' }
+        // case 'DELETE':
+        //   await query.delete()
+        //   return { data, url: '' }
+        //     break
+        default:
+          return null
+      }
+    } catch (error) {
+      console.log(error)
+      return { error }
+    }
+  },
+})
+
+export const apiSlice = createApi({
+  baseQuery,
+  // tagTypes: ['Shift', 'User'],
+  endpoints: (builder) => ({
+    getHouses: builder.query({
+      query: (path) => ({
+        url: `${path}`,
+        method: 'GET',
+      }),
+    }),
+  }),
+})
+
+export const { useGetHousesQuery } = apiSlice

src/store/slices/counterSlice.ts

@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+export interface CounterState {
+  value: number
+}
+
+const initialState: CounterState = {
+  value: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer

src/store/store.ts

@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit'
+import counterReducer from './slices/counterSlice'
+import { apiSlice } from './api/apiSlice'
+
+export const store = configureStore({
+  reducer: {
+    [apiSlice.reducerPath]: apiSlice.reducer,
+    counter: counterReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(apiSlice.middleware),
+  devTools: process.env.NODE_ENV !== 'production',
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch