move from templ to react app (#235)

* add react app * serve react app * add build files * clean code * update title * fix bug * remove unnecesary files * fix .gitignore to add log file * fix logs with map layout
signadot · Mar 11, 2024 · bf854f5 · bf854f5
1 parent eeb29de
commit bf854f5
Show file tree

Hide file tree

Showing 35 changed files with 4,199 additions and 317 deletions.
diff --git a/Makefile b/Makefile
@@ -12,10 +12,13 @@ DOCKER ?= docker
 SHELL = /bin/bash
 .PHONY: build
 
-build:
+build: build-frontend-app
 	mkdir -p dist/$(GOOS)/$(GOARCH)/bin
 	CGO_ENABLED=0 GOOS=$(GOOS) GOARCH=$(GOARCH) go build -o dist/$(GOOS)/$(GOARCH)/bin/hotrod ./cmd/hotrod
 
+build-frontend-app:
+	cd services/frontend/react_app && ./scripts/build.sh
+
 dev-build-docker: build
 	$(DOCKER) build -t signadot/hotrod:latest \
 		--platform $(GOOS)/$(GOARCH) \

diff --git a/services/frontend/react_app/.eslintrc.cjs b/services/frontend/react_app/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/services/frontend/react_app/.gitignore b/services/frontend/react_app/.gitignore
@@ -0,0 +1,22 @@
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/services/frontend/react_app/README.md b/services/frontend/react_app/README.md
@@ -0,0 +1,13 @@
+# HotROD frontend
+
+### Development
+```bash
+yarn dev
+```
+
+### Production
+```bash
+yarn build
+# update paths to /web_assets/assets...
+# update logo to /web_assets/...
+```
diff --git a/services/frontend/react_app/index.html b/services/frontend/react_app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HotROD - Rides On Demand</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/services/frontend/react_app/package.json b/services/frontend/react_app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "hotrod-ux-improvements",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^11.0.8",
+    "geojson-path-finder": "^2.0.2",
+    "leaflet": "^1.9.4",
+    "pigeon-maps": "^0.21.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.8",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
+}
diff --git a/services/frontend/react_app/public/hotrod_logo.png b/services/frontend/react_app/public/hotrod_logo.png
diff --git a/services/frontend/react_app/scripts/build.sh b/services/frontend/react_app/scripts/build.sh
@@ -0,0 +1,13 @@
+#!/usr/bin/env sh
+
+rm -rf "../web_assets/assets"
+
+yarn && yarn build
+
+
+original_file="../web_assets/index.html"
+output_file="tmp"
+
+sed 's|src="/assets|src="/web_assets/assets|g; s|href="/assets|href="/web_assets/assets|g' "$original_file" > "$output_file"
+
+mv $output_file $original_file
diff --git a/services/frontend/react_app/src/App.css b/services/frontend/react_app/src/App.css
@@ -0,0 +1,5 @@
+#root {
+  margin: 0 auto;
+  text-align: center;
+}
+
diff --git a/services/frontend/react_app/src/App.tsx b/services/frontend/react_app/src/App.tsx
@@ -0,0 +1,13 @@
+import './App.css'
+import {HomePage} from "./pages/home.tsx";
+import {SessionProvider} from "./context/sessionContext/context.tsx";
+
+function App() {
+  return (
+      <SessionProvider>
+        <HomePage />
+      </SessionProvider>
+  )
+}
+
+export default App
diff --git a/services/frontend/react_app/src/components/common/locationSelect/locationSelect.tsx b/services/frontend/react_app/src/components/common/locationSelect/locationSelect.tsx
@@ -0,0 +1,32 @@
+import {Select} from "@chakra-ui/react";
+import {Location} from "../../../types/location.ts";
+
+
+type LocationSelectProps = {
+    placeholder: string;
+    locations: Location[];
+    onSelect: (locationID: number) => void;
+    selectedLocationID: number | undefined;
+}
+
+export const LocationSelect = ({ placeholder, locations, selectedLocationID, onSelect }: LocationSelectProps) => {
+
+    const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        onSelect(parseInt(event.target.value))
+    }
+
+    return (
+        <Select
+            placeholder={placeholder}
+            variant='filled'
+            value={selectedLocationID}
+            onChange={handleSelect}
+        >
+            { locations.map(loc => {
+                return (
+                    <option value={loc.ID}>{loc.Name}</option>
+                )
+            })}
+        </Select>
+    )
+}
diff --git a/services/frontend/react_app/src/components/features/logs/logs.tsx b/services/frontend/react_app/src/components/features/logs/logs.tsx
@@ -0,0 +1,108 @@
+import {
+    Accordion,
+    AccordionButton,
+    AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Highlight, HStack, Stack, Text,
+} from "@chakra-ui/react";
+import {Log} from "../../../hooks/useLogs.tsx";
+import {useMemo} from "react";
+
+const getTime = (dt: Date) => {
+    return  String(dt.getHours()).padStart(2, '0') + ":" +
+        String(dt.getMinutes()).padStart(2, '0') + ":" +
+        String(dt.getSeconds()).padStart(2, '0') + "." +
+        String(dt.getMilliseconds()).padStart(3, '0');
+}
+
+
+type LocationHighlightProps = {
+    type: 'pickup' | 'dropoff',
+    value: string
+}
+
+const LocationHighlight = ({ type, value }: LocationHighlightProps) => {
+    return (
+        <Highlight
+            query={value}
+            styles={{
+                px: '1',
+                py: '1',
+                bg: type === 'pickup' ? 'orange.100' : 'teal.100',
+                mx: '2'
+        }}>
+            {value}
+        </Highlight>
+    )
+}
+
+type BaseLogProps = {
+    log: Log
+};
+
+const BaseLog = ({ log }: BaseLogProps) => {
+    const { requestID, dropoffLocation, pickupLocation, entries} = log;
+
+    const servicesColor: Record<string, string> = {
+        'route': '#eeaf27',
+        'driver': '#4faaf9',
+        'location': '#51b831',
+        'frontend': '#e2a0a0',
+        'browser': '#c86ddc',
+    };
+
+    const entriesMemo = useMemo(() => {
+        return entries.map(e => {
+                const serviceColor = e.service.length > 0 ? servicesColor[e.service] : "black";
+
+                return (
+                    <HStack fontWeight='bold'>
+                        <Text >{getTime(e.date)}</Text>
+                        <Text color={serviceColor}>{e.service}</Text>
+                        <Text color={serviceColor}>({e.sandboxName && e.sandboxName.length > 0 ? e.sandboxName : 'baseline'})</Text>
+                        <Text color='green'>{e.status}</Text>
+                    </HStack>
+                )
+            })
+    }, [entries])
+
+
+    return (
+        <AccordionItem key={requestID}>
+            <h2>
+                <AccordionButton>
+                    <Box as="span" flex='1' textAlign='left'>
+                        Request ID: #{requestID} from <LocationHighlight value={pickupLocation.Name} type='pickup'/> to <LocationHighlight value={dropoffLocation.Name} type='dropoff'/>
+                    </Box>
+                    <AccordionIcon />
+                </AccordionButton>
+            </h2>
+            <AccordionPanel pb={4}>
+                <Stack>
+                    { entriesMemo }
+                </Stack>
+            </AccordionPanel>
+        </AccordionItem>
+    )
+}
+
+
+type LogsProps = {
+    logs: Log[]
+}
+
+
+
+export const Logs = ({ logs }: LogsProps) => {
+    const logsMemo = useMemo(() => {
+        return logs.map(l => <BaseLog log={l}/>)
+    }, [logs])
+
+    return (
+        <Accordion allowMultiple defaultIndex={[0]}>
+            {logsMemo}
+        </Accordion>
+    )
+}
diff --git a/services/frontend/react_app/src/components/features/map/map.tsx b/services/frontend/react_app/src/components/features/map/map.tsx
@@ -0,0 +1,13 @@
+import {Flex} from "@chakra-ui/react";
+import {Marker, Map as PigeonMap} from "pigeon-maps";
+
+
+export const Map = () => {
+    return (
+        <Flex w='100%' h='100%' borderRadius={16} overflow='hidden'>
+            <PigeonMap  defaultCenter={[37.562304, -122.32668]} defaultZoom={17}>
+                <Marker width={50} anchor={[37.562304, -122.32668]} />
+            </PigeonMap>
+        </Flex>
+    )
+}
diff --git a/services/frontend/react_app/src/components/layouts/common/header.tsx b/services/frontend/react_app/src/components/layouts/common/header.tsx
@@ -0,0 +1,14 @@
+import { Flex, Heading, HStack, Image,} from "@chakra-ui/react";
+
+
+export const Header = () => {
+    return (
+        <Flex w='100%' borderBottom={12}>
+            <HStack>
+                <Image src='/web_assets/hotrod_logo.png' h={20} w={20}/>
+                <Heading>Hotrod Demo App</Heading>
+                <Heading as='h6' size='xs' justifySelf='self-end' placeSelf='flex-end'>by Signadot</Heading>
+            </HStack>
+        </Flex>
+    )
+}
diff --git a/services/frontend/react_app/src/components/layouts/index.ts b/services/frontend/react_app/src/components/layouts/index.ts
@@ -0,0 +1 @@
+export * from './mainLayout.tsx'
diff --git a/services/frontend/react_app/src/components/layouts/mainLayout.tsx b/services/frontend/react_app/src/components/layouts/mainLayout.tsx
@@ -0,0 +1,19 @@
+import {ReactNode} from "react";
+import {Stack} from "@chakra-ui/react";
+import {Header} from "./common/header.tsx";
+
+
+type MainLayoutProps = {
+    children: ReactNode,
+}
+
+export const MainLayout = ({ children }: MainLayoutProps) => {
+    return (
+        <Stack h='100vh' w='100vw' px={12} py={8}>
+            <Header />
+            <Stack mt={12} h='100%'>
+                {children}
+            </Stack>
+        </Stack>
+    )
+}