Update README and re-add db global css class

README.md

@@ -1,5 +1,11 @@
 # Mgruber sample project (React)
 
+A react showcase app.
+The visual part was not the main focus.
+It uses [miragejs](https://miragejs.com/) to mock api-server.
+
+Deployed on https://cv.mgruber.dev
+
 ---
 
 ## How to start
@@ -13,6 +19,7 @@
 Even this app only uses one service I use `docker-compose`. I like the simplesness of just calling `docker-compose up -d`.
 
 - Start docker-compose with `docker-compose up` or `docker-compose up -d` (deamon mode)
+- Wait for server ready (it will install dependencies which may take a bit)
 - Go to `http://localhost:3000`
 
 ## Run tests
@@ -24,3 +31,10 @@ Even this app only uses one service I use `docker-compose`. I like the simplesne
 
 - Install npm dependencies: `npm install`
 - Start build: `npm run build`
+
+### TODOS:
+
+- Add E2E testing
+- Add translations (https://react.i18next.com/)
+- Remove `data-testid` from production build (https://github.com/oliviertassinari/babel-plugin-react-remove-properties)
+- Allow `today` as valid date for new bank transfer

src/components/DynamicCard.jsx

@@ -29,6 +29,7 @@ export const DynamicCard = (props) => {
   useEffect(() => {
     setState({ isError: false, isLoading: true });
 
+    // TODO: Fix potential component state update while component is unmounted
     promiseWithMinRuntime(backendFetch({ urlPath }))
       .then((response) => {
         if (!response.ok) {

src/components/StatefulFetchHoc.jsx

@@ -34,6 +34,7 @@ export const StatefulFetchHoc = (props) => {
   const fetch = () => {
     setState({ isError: false, isLoading: true, isResolved: false });
 
+    // TODO: Fix potential component state update while component is unmounted
     backendFetch({ urlPath, method, headers, body })
       .then((fetchResponse) => {
         if (!fetchResponse.ok) {

src/styles/layout/display.scss

@@ -1,6 +1,11 @@
 .dn {
   display: none;
 }
+
+.db {
+  display: block;
+}
+
 .df {
   display: flex;
 }
@@ -9,6 +14,7 @@
   .dn-md {
     display: none;
   }
+
   .df-md {
     display: flex;
   }