From a13f5ff53f62e47dd8e9d15321532b07cb27c941 Mon Sep 17 00:00:00 2001
From: SKairinos <skairinos@gmail.com>
Date: Wed, 14 Aug 2024 15:57:45 +0000
Subject: [PATCH] app

---
 src/app/env.ts     |  6 ++++++
 src/app/hooks.ts   | 13 +++++++++++++
 src/app/schemas.ts |  3 +++
 src/app/store.ts   | 26 ++++++++++++++++++++++++++
 src/app/theme.ts   | 15 +++++++++++++++
 5 files changed, 63 insertions(+)
 create mode 100644 src/app/env.ts
 create mode 100644 src/app/hooks.ts
 create mode 100644 src/app/schemas.ts
 create mode 100644 src/app/store.ts
 create mode 100644 src/app/theme.ts

diff --git a/src/app/env.ts b/src/app/env.ts
new file mode 100644
index 0000000..6c51555
--- /dev/null
+++ b/src/app/env.ts
@@ -0,0 +1,6 @@
+import env from "codeforlife/env"
+
+export * from "codeforlife/env"
+
+// Example of how to get an environment variable.
+export const EXAMPLE = env.VITE_EXAMPLE ?? "DEFAULT_VALUE"
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
new file mode 100644
index 0000000..172beff
--- /dev/null
+++ b/src/app/hooks.ts
@@ -0,0 +1,13 @@
+// This file serves as a central hub for re-exporting pre-typed Redux hooks.
+// These imports are restricted elsewhere to ensure consistent
+// usage of typed hooks throughout the application.
+// We disable the ESLint rule here because this is the designated place
+// for importing and re-exporting the typed versions of hooks.
+/* eslint-disable @typescript-eslint/no-restricted-imports */
+import { useDispatch, useSelector } from "react-redux"
+
+import type { AppDispatch, RootState } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
diff --git a/src/app/schemas.ts b/src/app/schemas.ts
new file mode 100644
index 0000000..019ba64
--- /dev/null
+++ b/src/app/schemas.ts
@@ -0,0 +1,3 @@
+import * as yup from "yup"
+
+export const fruitNameSchema = yup.string().max(50)
diff --git a/src/app/store.ts b/src/app/store.ts
new file mode 100644
index 0000000..d4f570c
--- /dev/null
+++ b/src/app/store.ts
@@ -0,0 +1,26 @@
+import type { Action, ThunkAction } from "@reduxjs/toolkit"
+import { combineSlices } from "@reduxjs/toolkit"
+import { makeStore } from "codeforlife/utils/store"
+
+import api from "../api"
+
+// `combineSlices` automatically combines the reducers using
+// their `reducerPath`s, therefore we no longer need to call `combineReducers`.
+const reducer = combineSlices(api)
+
+// Infer the `RootState` type from the root reducer
+export type RootState = ReturnType<typeof reducer>
+
+// TODO: create middleware for api errors.
+// https://redux-toolkit.js.org/rtk-query/usage/error-handling#handling-errors-at-a-macro-level
+const store = makeStore({ reducer, middlewares: [api.middleware] })
+
+export default store
+export type AppStore = typeof store
+export type AppDispatch = AppStore["dispatch"]
+export type AppThunk<ThunkReturnType = void> = ThunkAction<
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>
diff --git a/src/app/theme.ts b/src/app/theme.ts
new file mode 100644
index 0000000..7f2f144
--- /dev/null
+++ b/src/app/theme.ts
@@ -0,0 +1,15 @@
+import {
+  type ThemeOptions,
+  createTheme,
+  responsiveFontSizes,
+} from "@mui/material"
+import { themeOptions as cflThemeOptions } from "codeforlife/theme"
+
+// Unpack the base options to extend the theme
+export const themeOptions: ThemeOptions = {
+  ...cflThemeOptions,
+}
+
+const theme = responsiveFontSizes(createTheme(themeOptions))
+
+export default theme