feat: replace recoil with jotai

Author: Angular2Guy

frontend/app/GlobalState.ts

@@ -0,0 +1,43 @@
+/*
+  - Copyright 2022 Sven Loesekann
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import {atom} from 'jotai';
+
+export interface UserDataState {
+    Longitude: number;
+	Latitude: number;
+	SearchRadius: number;
+    PostCode: number;
+	TargetDiesel: number;
+	TargetE5: number;
+	TargetE10: number;
+}
+
+export enum FuelType {
+    E5 = 'e5',
+    E10 = 'e10',
+    Diesel = 'diesel'
+  }
+
+const GlobalState = {
+    jwtToken: '',
+    userNameState: atom(''),
+    userUuidState: atom(''),
+    userDataState: atom({Latitude: 0.0, Longitude: 0.0, SearchRadius: 0, PostCode: 0, TargetDiesel: 0.0, TargetE10: 0.0, TargetE5: 0.0} as UserDataState),
+    jwtTokenState: atom(''),
+    locationModalState: atom(false),
+    targetPriceModalState: atom(false),
+    loginModalState: atom(true),
+    fuelTypeState: atom(FuelType.E5),
+    webWorkerRefState: atom<null|Worker>(null),
+}
+export default GlobalState;

frontend/app/login/login.module.css

@@ -0,0 +1,19 @@
+/*
+  - Copyright 2022 Sven Loesekann
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.responseMsg {
+    color: #ff0000;
+}
+
+.toright {
+    float: right;
+}

frontend/app/login/login.tsx

@@ -13,10 +13,54 @@
 import { useNavigate } from "react-router";
 import Button from '@mui/material/Button';
 import * as React from 'react';
+import GlobalState from "~/GlobalState";
+import styles from './login.module.css';
+import { useAtom } from "jotai";
+
+interface MsgData {
+  jwtToken?: string;
+  newNotificationUrl?: string;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <>{children}</>
+      )}
+    </div>
+  );
+}
 
 export function Login() {
   const navigate = useNavigate();
-  
+  let controller: AbortController | null = null;  
+  const [globalUserName,setGlobalUserName] = useAtom(GlobalState.userNameState);
+  const [globalUuid,setGlobalUuid] = useAtom(GlobalState.userUuidState);
+  const [globalJwtToken,setGlobalJwtToken] = useAtom(GlobalState.jwtTokenState);
+  const [globalUserDataState,setGlobalUserDataState] = useAtom(GlobalState.userDataState);
+  const [globalWebWorkerRefState, setGlobalWebWorkerRefState] = useAtom(GlobalState.webWorkerRefState);
+  const [globalLoginModal, setGlobalLoginModal] = useAtom(GlobalState.loginModalState);
+  const [userName, setUserName] = React.useState('');
+  const [password1, setPassword1] = React.useState('');
+  const [password2, setPassword2] = React.useState('');
+  const [responseMsg, setResponseMsg] = React.useState('');
+  const [activeTab, setActiveTab] = React.useState(0);
+
   const navToApp = () => {
     navigate("/app/app");
   }

frontend/app/root.tsx

@@ -21,7 +21,7 @@ import {
 
 import type { Route } from "./+types/root";
 import "./root.css";
-import { RecoilRoot } from "recoil";
+import { Provider } from "jotai";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -37,8 +37,8 @@ export const links: Route.LinksFunction = () => [
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {  
-  return (
-    <RecoilRoot>
+  return (    
+    <Provider>
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
@@ -52,7 +52,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           <Scripts />        
       </body>
     </html>
-    </RecoilRoot>
+    </Provider>
   );
 }