From 2aaf582245c97f7627fd88f59073105bbf275f59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julian=20T=C3=B6lle?= Date: Mon, 24 May 2021 18:54:34 +0200 Subject: [PATCH] feat(frontend): add footer with version number --- .dockerignore | 2 ++ Dockerfile | 3 +++ frontend/.env.production | 1 + frontend/src/App.tsx | 32 ++++++++++++++++++---------- frontend/src/components/Footer.tsx | 33 +++++++++++++++++++++++++++++ frontend/src/components/NavBar.tsx | 8 +++---- frontend/src/components/NavItem.tsx | 5 ----- 7 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 frontend/.env.production create mode 100644 frontend/src/components/Footer.tsx delete mode 100644 frontend/src/components/NavItem.tsx diff --git a/.dockerignore b/.dockerignore index ba787e9..3e72e30 100644 --- a/.dockerignore +++ b/.dockerignore @@ -3,3 +3,5 @@ dist/ frontend/node_modules/ frontend/src/tailwind/tailwind.generated.css + +charts/ diff --git a/Dockerfile b/Dockerfile index d94d3ab..146668b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -33,6 +33,8 @@ RUN NODE_ENV=production npm run build FROM common as build-frontend LABEL stage="build-frontend" +ARG VERSION=unknown + WORKDIR /app/frontend RUN npm ci @@ -41,6 +43,7 @@ COPY frontend/postcss.config.js /app/frontend/postcss.config.js COPY frontend/tailwind.config.js /app/frontend/tailwind.config.js COPY frontend/src/ /app/frontend/src/ COPY frontend/public/ /app/frontend/public/ +COPY frontend/.env.production /app/frontend/.env.production RUN NODE_ENV=production npm run build ################## diff --git a/frontend/.env.production b/frontend/.env.production new file mode 100644 index 0000000..18fbdfe --- /dev/null +++ b/frontend/.env.production @@ -0,0 +1 @@ +REACT_APP_VERSION=$VERSION \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8c8e4c0..d91debc 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Route, Switch } from "react-router-dom"; +import { Footer } from "./components/Footer"; import { LoginFailure } from "./components/LoginFailure"; import { LoginSuccess } from "./components/LoginSuccess"; import { NavBar } from "./components/NavBar"; @@ -19,20 +20,29 @@ export function App() { } return ( -
+
- - - - - - - - - - +
+ + + + + + + + + + +
+
+
+
); } diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx new file mode 100644 index 0000000..299d842 --- /dev/null +++ b/frontend/src/components/Footer.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +const REPO_URL = "https://github.com/apricote/Listory"; +const CHANGELOG_URL = `${REPO_URL}/blob/master/CHANGELOG.md`; + +const VERSION = process.env.REACT_APP_VERSION || "Unknown"; + +export const Footer: React.FC = () => { + return ( +
+
+ + v{VERSION} + {" "} +
+
+ + Check out on GitHub + +
+
+ ); +}; diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx index 8f78495..294018f 100644 --- a/frontend/src/components/NavBar.tsx +++ b/frontend/src/components/NavBar.tsx @@ -8,11 +8,11 @@ export const NavBar: React.FC = () => { const { user, loginWithSpotifyProps } = useAuth(); return ( - + +
); }; diff --git a/frontend/src/components/NavItem.tsx b/frontend/src/components/NavItem.tsx deleted file mode 100644 index 77ee8b0..0000000 --- a/frontend/src/components/NavItem.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export const NavItem: React.FC = ({ children }) => { - return
  • {children}
    • ; -};