feat: add component

Author: Angular2Guy

frontend/app/header/header.module.css

@@ -0,0 +1,24 @@
+/*
+  - 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.
+*/
+.headerBase {
+    background-color: #0384fc;
+    color: #ffffff;
+    font-size: 24px;
+    margin: auto;
+    padding: 10px 0 10px 0;
+}
+
+.headerButton {
+    float: right;
+    color: #ffffff !important;
+}

frontend/app/header/header.tsx

@@ -0,0 +1,54 @@
+/*
+  - 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 * as React from 'react';
+import styles from "./header.module.css";
+import {Button} from '@mui/material';
+import type { FormEvent } from 'react';
+import { useAtom } from "jotai";
+
+import GlobalState from "../GlobalState";
+import { useNavigate } from "react-router";
+
+const Header = () => {
+    const [locationModalState, setLocationModalState] = useAtom(GlobalState.locationModalState);
+    const [targetPriceModalState, setTargetPriceModalState] = useAtom(GlobalState.targetPriceModalState);    
+    const [jwtTokenState, setJwtTokenState] = useAtom(GlobalState.jwtTokenState);   
+    const [globalLoginModal, setGlobalLoginModal] = useAtom(GlobalState.loginModalState);
+    const [globalWebWorkerRefState, setGlobalWebWorkerRefState] = useAtom(GlobalState.webWorkerRefState); 
+    const navigate = useNavigate();
+
+    const logout = (event: FormEvent) => {
+        console.log("Logout ",event);
+        setJwtTokenState('');    
+        globalWebWorkerRefState?.postMessage({jwtToken: '', newNotificationUrl: ''});
+        setGlobalWebWorkerRefState(null);
+        setGlobalLoginModal(true);
+        navigate('/');
+    }
+    const location = (event: FormEvent) => {
+        //console.log("Location ",event);
+        setLocationModalState(true)
+    }
+    const targetPrice = (event: FormEvent) => {
+        setTargetPriceModalState(true);    
+    }
+
+    return <div className={styles.headerBase}>
+        <span>Cheap Gas</span>
+        <Button variant="outlined" onClick={logout} className={styles.headerButton}>Logout</Button>
+        <Button variant="outlined" onClick={location} className={styles.headerButton}>Location</Button>
+        <Button variant="outlined" onClick={targetPrice} className={styles.headerButton}>Target Price</Button>
+    </div>
+}
+
+export default Header;

frontend/app/main-container/main-container.module.css

@@ -0,0 +1,33 @@
+/*
+  - 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.
+*/
+.myText {
+    color: #000000;
+}
+
+.headerTabs {
+  display: flex;
+  justify-content: space-around;
+}
+
+.headerTab {
+  width: fit-content;
+  line-height: 2rem;  
+}
+
+.linkText {
+  color: rgb(25, 118, 210);
+  --Link-underlineColor: rgba(25, 118, 210, 0.4);
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  text-decoration-color: var(--Link-underlineColor);
+}

frontend/app/main-container/main-container.tsx

@@ -0,0 +1,50 @@
+/*
+  - 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 * as React from 'react';
+import styles from './main-container.module.css';
+import Header from '../header/header';
+//import LocationModal from './components/LocationModal';
+//import TargetPriceModal from './components/TargetPriceModal';
+import Main from '../main/main';
+import { useAtom } from "jotai";
+import GlobalState from '../GlobalState';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+
+export interface TodoItem1 {
+  name: string;
+  id: string;
+}
+
+function MainContainer() {
+  const [globalJwtTokenState, setGlobalJwtTokenState] = useAtom(GlobalState.jwtTokenState);
+  const [globalUserUuidState, setGlobalUserUuidState] = useAtom(GlobalState.userUuidState);
+  const navigate = useNavigate();
+  
+  useEffect(() => {
+    if((!globalJwtTokenState || !globalUserUuidState || globalJwtTokenState.length < 10 || globalUserUuidState.length < 10)) {
+      navigate('/');
+    }
+  });
+
+  return (
+    <div className="App">      
+      <Header/>      
+      {/* <LocationModal/> */}
+      {/* <TargetPriceModal/> */}
+      <Main/>      
+    </div>
+  );
+}
+
+export default MainContainer;

frontend/app/routes/app.tsx

@@ -10,9 +10,9 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import Main from "~/main/main";
 import type { Route } from "./+types/app";
 import { Welcome } from "~/welcome/welcome";
+import MainContainer from "~/main-container/main-container";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -22,5 +22,5 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  return <Main />;
+  return <MainContainer />;
 }