Merge pull request #14 from JavaRip/feature/shared-types

Feature/shared types
JavaRip · Sep 20, 2024 · 127ed2b · 127ed2b
2 parents 1374fdc + d7cd8bf
commit 127ed2b
Show file tree

Hide file tree

Showing 58 changed files with 587 additions and 512 deletions.
diff --git a/app/client/package-lock.json b/app/client/package-lock.json
diff --git a/app/client/package.json b/app/client/package.json
@@ -24,6 +24,7 @@
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
     "react-slick": "^0.30.2",
+    "shared": "file:../shared",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.8",
     "typescript": "^5.4.4",

diff --git a/app/client/src/components/HeaderBar/HeaderBar.tsx b/app/client/src/components/HeaderBar/HeaderBar.tsx
@@ -6,12 +6,12 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { useEffect, useState } from 'react';
 import NavMenu from './NavMenu';
 import AccessToken from '../../utils/AccessToken';
-import { IAccessToken, User } from '../../types';
+import { Token, User } from 'shared';
 import Config from '../../config';
 
 export default function HeaderBar(): JSX.Element {
     const [open, setOpen] = useState(false);
-    const [token, setToken] = useState<IAccessToken>();
+    const [token, setToken] = useState<Token>();
     const [user, setUser] = useState<User>();
 
     useEffect(() => {
@@ -28,6 +28,7 @@ export default function HeaderBar(): JSX.Element {
     useEffect(() => {
         async function fetchUser() {
             if (!token) return;
+            if (token.type !== 'access') return;
 
             const res = await fetch(`${Config.basePath}/api/v1/self/user`, {
                 headers: {

diff --git a/app/client/src/pages/Briefing/Briefing.tsx b/app/client/src/pages/Briefing/Briefing.tsx
@@ -1,7 +1,7 @@
 import { Button, Card, Link, List, ListItem, Typography } from "@mui/material";
 import { navigate } from "wouter/use-browser-location";
 import Config from "../../config";
-import { Well } from "../../types";
+import { Well } from "shared";
 import AccessToken from "../../utils/AccessToken";
 
 export default function Briefing(): JSX.Element {
@@ -10,7 +10,7 @@ export default function Briefing(): JSX.Element {
 
         const headers: HeadersInit = {};
 
-        if (token) {
+        if (token && token.type === 'access') {
             headers.authorization = `Bearer ${token.id}`;
         }
 

diff --git a/app/client/src/pages/Depth/Depth.tsx b/app/client/src/pages/Depth/Depth.tsx
@@ -2,15 +2,14 @@ import { Box, Button, Card, Slider, Switch, TextField, Typography } from "@mui/m
 import config from "../../config";
 import { navigate } from "wouter/use-browser-location";
 import { useEffect, useState } from "react";
-import PredictorsStorage from "../../utils/PredictorsStorage";
-import { IAccessToken } from "../../types";
+import { Token } from "shared";
 import { useRoute } from "wouter";
 import AccessToken from "../../utils/AccessToken";
 
 export default function Depth(): JSX.Element {
     const [, params] = useRoute('/:id/depth');
     const wellId = params?.id;
-    const [token, setToken] = useState<IAccessToken>();
+    const [token, setToken] = useState<Token>();
 
     const [unit, setUnit] = useState<'m' | 'ft'>('ft');
     const [depth, setDepth] = useState(0);
@@ -118,14 +117,8 @@ export default function Depth(): JSX.Element {
                 sx={{ width: '90%', height: '4rem' }}
                 variant='contained'
                 onClick={async () => {
-                    PredictorsStorage.set({
-                        depth: {
-                            unit,
-                            value: depth
-                        }
-                    });
                     const headers: HeadersInit = {};
-                    if (token) {
+                    if (token && token.type === 'access') {
                         headers['authorization'] = `Bearer ${token.id}`;
                     }
 

diff --git a/app/client/src/pages/Flooding/Flooding.tsx b/app/client/src/pages/Flooding/Flooding.tsx
@@ -3,13 +3,13 @@ import config from "../../config";
 import { navigate } from "wouter/use-browser-location";
 import { useEffect, useState } from "react";
 import { useRoute } from "wouter";
-import { IAccessToken } from "../../types";
+import { Token } from "shared";
 import AccessToken from "../../utils/AccessToken";
 
 export default function Depth(): JSX.Element {
     const [, params] = useRoute('/:id/flooding');
     const wellId = params?.id;
-    const [token, setToken] = useState<IAccessToken>();
+    const [token, setToken] = useState<Token>();
 
     const [flooding, setFlooding] = useState<'yes' | 'no'>();
     const [error, setError] = useState<boolean>(false);
@@ -92,7 +92,7 @@ export default function Depth(): JSX.Element {
                     const body = { flooding: floodingBool };
                     const headers: HeadersInit = {};
 
-                    if (token) {
+                    if (token && token.type === 'access') {
                         headers['authorization'] = `Bearer ${token.id}`;
                     }
 

diff --git a/app/client/src/pages/Map/Map.tsx b/app/client/src/pages/Map/Map.tsx
@@ -5,16 +5,18 @@ import { CircularProgress, Stack } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { LatLngExpression, GeoJSON } from 'leaflet';
 import config from '../../config';
-import { SessionData } from '../../types';
+import { Well, Token } from 'shared';
 import { RegionTranslations } from '../../types';
 import RegionTranslationsFetcher from '../../utils/RegionTranslationsFetcher';
 import Markers from './markers';
 import UpaMap from './upaMap';
+import AccessToken from '../../utils/AccessToken';
 
 export default function Map() {
     const position: LatLngExpression = [23.8041, 90.4152];
     const [interactiveMap, setInteractiveMap] = useState<GeoJSON>();
-    const [sessionData, setSessionData] = useState<SessionData[]>();
+    const [token, setToken] = useState<Token>();
+    const [wells, setWells] = useState<Well[]>();
     const [regionTranslations, setRegionTranslations] = useState<RegionTranslations>();
 
     async function getInteractiveMap() {
@@ -24,9 +26,21 @@ export default function Map() {
     }
 
     async function getPredictionPinData() {
-        const res = await fetch(`${config.basePath}/api/predictions`);
-        const predictions = await res.json();
-        setSessionData(predictions.data);
+        if (!token) return;
+        if (token.type !== 'access') return;
+
+        const res = await fetch(`${config.basePath}/api/v1/well/`, {
+            headers: {
+                'authorization': `Bearer ${token.id}`
+            }
+        });
+
+        if (!res.ok) {
+            throw new Error(`Failed to fetch well data:, ${res}`);
+        }
+
+        const data = await res.json();
+        setWells(data.wells);
     }
 
     async function getRegionTranslations() {
@@ -35,12 +49,23 @@ export default function Map() {
     }
 
     useEffect(() => {
+        async function fetchToken() {
+            const token = await AccessToken.get();
+            if (token == null) return;
+
+            setToken(token);
+        }
+
+        fetchToken();
         getRegionTranslations();
         getInteractiveMap();
-        getPredictionPinData();
     }, []);
 
-    if (!interactiveMap || !sessionData || !regionTranslations) return (
+    useEffect(() => {
+        getPredictionPinData();
+    },  [token]);
+
+    if (!interactiveMap || !wells || !regionTranslations) return (
         <Stack alignItems='center' justifyContent='center'>
             <CircularProgress />
         </Stack>
@@ -54,7 +79,7 @@ export default function Map() {
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 />
                 <UpaMap interactiveMap={interactiveMap} regionTranslations={regionTranslations} />
-                <Markers sessionData={sessionData} regionTranslations={regionTranslations} />
+                <Markers wells={wells} regionTranslations={regionTranslations} />
             </MapContainer>
         </Stack>
     );