single-page-app: Separate context from app (#422)

Signed-off-by: Ryan Northey <ryan@synca.io>

Author: phlax

single-page-app/ui/src/App.tsx

@@ -1,17 +1,14 @@
 import {ChakraProvider, extendTheme} from '@chakra-ui/react'
-import {createContext, useReducer} from 'react'
+import {useReducer} from 'react'
 import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
 
 import Auth from "./components/Auth"
 import Home from "./components/Home"
 import Login from "./components/Login"
 import Logout from "./components/Logout"
-import {TAuthContext, TDataContext} from "./@types/app"
+import {AuthContext, DataContext} from "./context"
 import {dataInitialState, dataReducer, userInitialState, userReducer} from "./store/reducer"
 
-export const AuthContext = createContext<TAuthContext | null>(null)
-export const DataContext = createContext<TDataContext | null>(null)
-
 const theme = extendTheme({
   colors: {
     primary: {

single-page-app/ui/src/components/Auth.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useContext} from "react"
 import {Navigate} from "react-router-dom"
-import {AuthContext} from "../App"
+import {AuthContext} from "../context"
 import {TAuthContext} from "../@types/app"
 import Home from "./Home"
 

single-page-app/ui/src/components/Home.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react'
 import {useContext} from "react"
 
-import {AuthContext} from "../App"
+import {AuthContext} from "../context"
 import {
   IHomeProps,
   TAuthContext} from "../@types/app"

single-page-app/ui/src/components/Login.tsx

@@ -1,7 +1,7 @@
 import {useToast} from '@chakra-ui/react'
 import {useEffect, useContext} from "react"
 import {Navigate} from "react-router-dom"
-import {AuthContext} from "../App"
+import {AuthContext} from "../context"
 import {TAuthContext} from "../@types/app"
 import Home from "./Home"
 

single-page-app/ui/src/components/User.tsx

@@ -27,7 +27,7 @@ import {
   useDisclosure,
   useToast,
 } from '@chakra-ui/react'
-import {AuthContext} from "../App"
+import {AuthContext} from "../context"
 import {IUser, TAuthContext} from "../@types/app"
 import {AuthProviders} from "../providers.tsx"
 

single-page-app/ui/src/context.tsx

@@ -0,0 +1,5 @@
+import {createContext} from 'react'
+import {TAuthContext, TDataContext} from "./@types/app"
+
+export const AuthContext = createContext<TAuthContext | null>(null)
+export const DataContext = createContext<TDataContext | null>(null)

single-page-app/ui/src/hoc.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from "react"
 
-import {AuthContext, DataContext} from "./App"
+import {AuthContext, DataContext} from "./context"
 import {
   IComponentWithDataProp,
   IComponentWithUserProp,