Deps update 3

.dockerignore

@@ -8,3 +8,4 @@ gradle
 *.bat
 *.sh
 yarn.lock
+.env

.github/workflows/build-docker-image.yml

@@ -1,16 +1,16 @@
 name: Build Docker image
 
 on:
-  workflow_dispatch:
-  pull_request:
-    branches: ["main"]
+    workflow_dispatch:
+    pull_request:
+        branches: ["main"]
 
 jobs:
-  build:
-    name: Build docker image
-    runs-on: self-hosted
+    build:
+        name: Build docker image
+        runs-on: ubuntu-latest
 
-    steps:
-      - uses: actions/checkout@v3
-      - name: Build the Docker image
-        run: docker build . --file Dockerfile
+        steps:
+            - uses: actions/checkout@v3
+            - name: Build the Docker image
+              run: docker build . --file Dockerfile

.github/workflows/deploy-github-pages.yml

@@ -0,0 +1,43 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+    release:
+        types: [published]
+
+jobs:
+    build-and-deploy:
+        runs-on: ubuntu-latest
+
+        permissions:
+            contents: write
+
+        steps:
+            - name: Checkout Repository
+              uses: actions/checkout@v2
+
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v1
+
+            - name: Cache Docker layers
+              uses: actions/cache@v1
+              with:
+                  path: /tmp/.buildx-cache
+                  key: ${{ runner.os }}-buildx-${{ github.sha }}
+                  restore-keys: |
+                      ${{ runner.os }}-buildx-
+
+            - name: Build and Extract Static Files
+              run: |
+                  docker build --build-arg REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }} --target builder -t react-app .
+                  id=$(docker create react-app)
+                  docker cp $id:/app/build ./build
+                  docker rm -v $id
+
+            - name: Create CNAME File
+              run: echo '${{ secrets.CNAME }}' > ./build/CNAME
+
+            - name: Deploy to GitHub Pages
+              uses: peaceiris/actions-gh-pages@v3
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  publish_dir: ./build

.github/workflows/publish-to-dockerhub.yml

@@ -1,29 +1,29 @@
 name: Publish to Dockerhub
 
 on:
-  release:
-    types: [published]
+    release:
+        types: [published]
 
 jobs:
-  publish:
-    name: Build and Publish docker image to dockerhub
-    permissions:
-      contents: write
-      pull-requests: write
-      packages: read
-    runs-on: self-hosted
+    publish:
+        name: Publish to dockerhub
+        permissions:
+            contents: write
+            pull-requests: write
+            packages: read
+        runs-on: ubuntu-latest
 
-    steps:
-      - name: Login to Dockerhub
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - uses: actions/checkout@v2
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-      - name: Build and publish Docker image
-        run: |
-          docker buildx build --platform linux/amd64,linux/arm64/v8 -t daithihearn/electricity-prices-dashboard:latest -t daithihearn/electricity-prices-dashboard:${{ github.ref_name }} --push .
+        steps:
+            - name: Login to Dockerhub
+              uses: docker/login-action@v1
+              with:
+                  username: ${{ secrets.DOCKER_USERNAME }}
+                  password: ${{ secrets.DOCKER_PASSWORD }}
+            - uses: actions/checkout@v2
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v1
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v1
+            - name: Build and publish Docker image
+              run: |
+                  docker buildx build --platform linux/amd64,linux/arm64/v8,linux/arm/v7 -t daithihearn/electricity-prices-dashboard:latest -t daithihearn/electricity-prices-dashboard:${{ github.event.release.tag_name }} --push .

.github/workflows/unit-tests.yml

@@ -6,7 +6,8 @@ on:
         branches: ["main"]
 
 jobs:
-    test:
+    unit-tests:
+        name: Run unit tests
         runs-on: ubuntu-latest
 
         steps:
@@ -23,3 +24,8 @@ jobs:
 
             - name: Run tests
               run: yarn test
+
+            - name: Upload coverage reports to Codecov
+              uses: codecov/codecov-action@v3
+              env:
+                  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode
+
+.env

.nvmrc

@@ -0,0 +1 @@
+v18.18.0

.typesafe-i18n.json

@@ -0,0 +1,5 @@
+{
+   "adapter": "react",
+   "baseLocale": "es",
+   "$schema": "https://unpkg.com/[email protected]/schema/typesafe-i18n.json"
+}

Dockerfile

@@ -1,23 +1,33 @@
 # build
-FROM node:16 AS builder
+FROM node:18.18 AS builder
 
 WORKDIR /app
 
 COPY package.json ./
 
-RUN yarn --network-timeout 100000
+RUN yarn --network-timeout 1000000
 
 COPY ./src ./src
 COPY ./public ./public
 COPY ./tsconfig.json tsconfig.json
 
+# Set the build argument
+ARG REACT_APP_API_URL
+
+# Set the environment variable to the value of the build argument
+ENV REACT_APP_API_URL=${REACT_APP_API_URL}
+
 RUN yarn build
 
 # deployment
 FROM nginx:1.19-alpine AS deployment
 
 COPY --from=builder /app/build /usr/share/nginx/html
-COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf.template
 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY ./nginx/entrypoint.sh /entrypoint.sh
+
+# Make our entrypoint script executable
+RUN chmod +x /entrypoint.sh
 
-CMD nginx -g 'daemon off;'
+CMD ["/entrypoint.sh"]

Makefile

@@ -0,0 +1,13 @@
+help:
+	@egrep -h '\s#@\s' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?#@ "}; {printf "\033[36m  %-30s\033[0m %s\n", $$1, $$2}'
+
+start: #@ Start local
+	yarn start
+build: #@ Build local
+	yarn build
+.PHONY:build
+
+docker-up: #@ Start docker
+	docker compose up --build -d
+docker-down: #@ Stop docker
+	docker compose down

README.md

@@ -1,6 +1,11 @@
+# Electricity Prices Dashboard
+
+[![Publish to Dockerhub](https://github.com/daithihearn/electricity-prices-dashboard/actions/workflows/publish-to-dockerhub.yml/badge.svg)](https://github.com/daithihearn/electricity-prices-dashboard/actions/workflows/publish-to-dockerhub.yml)
+[![Build and Deploy to GitHub Pages](https://github.com/daithihearn/electricity-prices-dashboard/actions/workflows/deploy-github-pages.yml/badge.svg)](https://github.com/daithihearn/electricity-prices-dashboard/actions/workflows/deploy-github-pages.yml)
+
 ## Description
 
-A dashboard to display the PVPC electricity prices in Spain.
+[A dashboard to display the PVPC electricity prices for Spain](https://preciosdelaelectricidad.es/). A docker image for this can also be found on [docker hub](https://hub.docker.com/repository/docker/daithihearn/electricity-prices-dashboard/general).
 
 ## Stack
 

docker-compose.yaml

@@ -2,9 +2,15 @@ version: "3.5"
 
 services:
     electricity-prices-dashboard:
-        image: electricity-prices-dashboard
+        build:
+            context: .
+            dockerfile: Dockerfile
+            args:
+                - REACT_APP_API_URL=https://elec-api.daithiapp.com/api/v1/price
         container_name: electricity-prices-dashboard
         restart: always
+        environment:
+            - PORT=80
         ports:
             - 3000:80
         networks:

heroku.yml

@@ -0,0 +1,8 @@
+build:
+    docker:
+        web: Dockerfile
+    config:
+        REACT_APP_API_URL: https://elec-prices-9603b16ade4e.herokuapp.com/api/v1/price
+
+run:
+    web: ./entrypoint.sh

nginx/default.conf

@@ -1,5 +1,5 @@
 server {
-    listen 80;
+    listen ${PORT};
 
     #charset koi8-r;
     #access_log  /var/log/nginx/host.access.log  main;

nginx/entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Substitute environment variables in the Nginx configuration file
+envsubst '$PORT' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
+
+# Start Nginx
+exec nginx -g 'daemon off;'

package.json

@@ -1,37 +1,42 @@
 {
   "name": "daithi-dashboard",
-  "version": "2.1.2",
+  "version": "2.9.2",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.4",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "axios": "^1.4.0",
-    "chart.js": "^4.3.0",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "@mui/x-date-pickers": "^6.18.7",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
+    "@types/luxon": "^3.4.0",
+    "@types/node": "^20.10.8",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "axios": "^1.6.5",
+    "chart.js": "^4.4.1",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-annotation": "^3.0.1",
-    "date-fns": "^2.30.0",
-    "prettier": "^3.0.0",
+    "luxon": "^3.4.4",
+    "mixpanel-browser": "^2.48.1",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "typescript": "^5.1.6",
-    "web-vitals": "^3.4.0"
+    "typesafe-i18n": "^5.26.2",
+    "typescript": "^5.3.3",
+    "web-vitals": "^3.5.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "yarn prettier --write src",
+    "i18n": "typesafe-i18n",
     "format:check": "yarn prettier --check src"
   },
   "eslintConfig": {
@@ -59,9 +64,10 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "babel-jest": "^29.6.1"
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/mixpanel-browser": "^2.48.1",
+    "babel-jest": "^29.7.0"
   }
 }

public/manifest.json

@@ -18,7 +18,7 @@
       "sizes": "512x512"
     }
   ],
-  "version": "2.1.2",
+  "version": "2.9.2",
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

src/App.tsx

@@ -1,11 +1,22 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { ThemeProvider } from "@mui/material/styles"
 import { lightTheme, darkTheme } from "Themes"
 import Dashboard from "pages/Dashboard"
 import { Box, CssBaseline, createTheme, useMediaQuery } from "@mui/material"
+import TypesafeI18n from "i18n/i18n-react"
+import { loadLocale } from "i18n/i18n-util.sync"
+import { Locales } from "i18n/i18n-types"
+import mixpanel from "mixpanel-browser"
+
+mixpanel.init("c22c74cac287fb74387b7ce250f1548f")
 
 function App() {
     const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)")
+    const locale: Locales = navigator?.language.startsWith("en") ? "en" : "es"
+
+    useEffect(() => {
+        mixpanel.track("Website Accessed")
+    }, [])
 
     const theme = React.useMemo(
         () =>
@@ -14,12 +25,15 @@ function App() {
             }),
         [prefersDarkMode],
     )
+    loadLocale(locale)
     return (
         <>
             <ThemeProvider theme={theme}>
                 <Box sx={{ display: "flex" }}>
                     <CssBaseline />
-                    <Dashboard />
+                    <TypesafeI18n locale={locale}>
+                        <Dashboard />
+                    </TypesafeI18n>
                 </Box>
             </ThemeProvider>
         </>