Package updates / Redux toolkit / TS interface / boilerplate

package.json

@@ -3,25 +3,31 @@
   "version": "0.4.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^1.10.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/pickers": "^3.2.10",
     "@react-google-maps/api": "^1.10.1",
+    "@reduxjs/toolkit": "^1.8.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@types/jest": "^28.1.6",
+    "@types/node": "^18.0.6",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^18.0.6",
     "axios": "^0.21.1",
     "connected-react-router": "^6.8.0",
-    "node-sass": "^4.14.1",
+    "dotenv": "^16.0.1",
+    "node-sass": "^7.0.1",
     "notistack": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.0",
+    "react-scripts": "^5.0.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
+    "typescript": "^4.7.4",
     "universal-cookie": "^4.0.4",
     "validator": "^13.1.1"
   },

src/index.js

@@ -1,37 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { Provider } from "react-redux";
-import "./index.scss";
-import App from "./App";
-import * as serviceWorker from "./serviceWorker";
-import thunk from "redux-thunk";
-import { createBrowserHistory } from "history";
-import { createStore, applyMiddleware, compose } from "redux";
-import { routerMiddleware, ConnectedRouter } from "connected-react-router";
-import rootReducer from "./reducers";
-
-const history = createBrowserHistory();
-
-const store = createStore(
-  rootReducer(history),
-  compose(
-    applyMiddleware(routerMiddleware(history), thunk),
-    //window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
-  )
-);
-
-ReactDOM.render(
-  <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <App history={history} />
-    </ConnectedRouter>
-  </Provider>,
-  document.getElementById("root")
-);
-
-export default store;
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import * as dotenv from "dotenv";
+dotenv.config();
+import ReactDOM from "react-dom";
+import { Auth0Provider } from "@auth0/auth0-react";
+import "./index.scss";
+import { Provider } from "react-redux";
+import store from "./redux/store";
+import App from "./App";
+
+ReactDOM.render(
+  <Auth0Provider
+    domain={process.env.AUTH0_DOMAIN as string}
+    clientId={process.env.AUTH0_CLIENTID as string}
+    redirectUri={window.location.origin}
+  >
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </Auth0Provider>,
+  document.getElementById("root")
+);

src/reducers/autoComplete.js

@@ -1,12 +0,0 @@
-const autoCompleteReducer = (state = [], action) => {
-  switch (action.type) {
-    case "AUTOCOMPLETE_ADD":
-      return action.payload;
-    case "AUTOCOMPLETE_CLEAR":
-      return (state = []);
-    default:
-      return state;
-  }
-};
-
-export default autoCompleteReducer;

src/redux/hooks.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { RootState, AppDispatch } from "./store";
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/redux/slices/notificationsSlice.ts

@@ -0,0 +1,16 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = [];
+
+export const userSlice = createSlice({
+  name: "notifications",
+  initialState: initialState,
+  reducers: {
+    addNotification: (state, action) => {
+      state = [...state, { key: action.key }];
+    },
+  },
+});
+
+export const { clearUserData } = userSlice.actions;
+export default userSlice.reducer;

src/redux/slices/tempDataSlice.ts

@@ -0,0 +1,29 @@
+import { User } from "../../typescript/interfaces";
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: User = {
+  id: "",
+  username: "",
+  email: "",
+  isRestaurant: true,
+  trialUsed: false,
+  billing: {
+    NIP: "",
+    adress: "",
+    companyName: "",
+  },
+  restaurants: [],
+};
+
+export const tempDataSlice = createSlice({
+  name: "tempData",
+  initialState: initialState,
+  reducers: {
+    clearTempData: (state) => {
+      state = initialState;
+    },
+  },
+});
+
+export const { clearTempData } = tempDataSlice.actions;
+export default tempDataSlice.reducer;

src/redux/slices/userSlice.ts

@@ -0,0 +1,29 @@
+import { User } from "../../typescript/interfaces";
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: User = {
+  id: "",
+  username: "",
+  email: "",
+  isRestaurant: true,
+  trialUsed: false,
+  billing: {
+    NIP: "",
+    adress: "",
+    companyName: "",
+  },
+  restaurants: [],
+};
+
+export const userSlice = createSlice({
+  name: "user",
+  initialState: initialState,
+  reducers: {
+    clearUserData: (state) => {
+      state = initialState;
+    },
+  },
+});
+
+export const { clearUserData } = userSlice.actions;
+export default userSlice.reducer;

src/redux/slices/viewportSlice.ts

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  backdrop: false,
+};
+
+export const viewportSlice = createSlice({
+  name: "viewport",
+  initialState: initialState,
+  reducers: {
+    showBackdrop: (state) => {
+      state = { ...state, backdrop: true };
+    },
+    hideBackdrop: (state) => {
+      state = { ...state, backdrop: false };
+    },
+  },
+});
+
+export const { showBackdrop, hideBackdrop } = viewportSlice.actions;
+export default viewportSlice.reducer;

src/redux/store.ts

@@ -0,0 +1,16 @@
+import { configureStore } from "@reduxjs/toolkit";
+import userReducer from "./slices/userSlice";
+import tempDataReducer from "./slices/tempDataSlice";
+import viewportReducer from "./slices/viewportSlice";
+
+const store = configureStore({
+  reducer: {
+    user: userReducer,
+    tempData: tempDataReducer,
+    viewport: viewportReducer,
+  },
+});
+
+export default store;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/typescript/interfaces.ts

@@ -0,0 +1,99 @@
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+  billing: BillingData;
+  isRestaurant: boolean;
+  restaurants?: Restaurant[];
+  trialUsed: boolean;
+}
+
+export interface BillingData {
+  NIP: string;
+  adress: string;
+  companyName: string;
+}
+
+export interface Restaurant {
+  id: string;
+  name: string;
+  descritpion: string;
+  type: string;
+  city: string;
+  adress: string;
+  location: number[];
+  placesId: string;
+  imgURL: string;
+  phone: string;
+  social: Social;
+  tags: RestaurantTags;
+  hours: WorkingHours;
+  hidden: boolean;
+  categories: string[];
+  dishes: Dish[];
+}
+
+export interface Social {
+  facebook: string;
+  instagram: string;
+  www: string;
+}
+
+export interface RestaurantTags {
+  cardPayments: boolean;
+  petFriendly: boolean;
+  glutenFree: boolean;
+  vegan: boolean;
+  vegetarian: boolean;
+  alcohol: boolean;
+  delivery: boolean;
+}
+
+export interface WorkingHours {
+  pn: string;
+  wt: string;
+  sr: string;
+  cz: string;
+  pt: string;
+  so: string;
+  nd: string;
+}
+
+export interface Dish {
+  id: string;
+  restaurantId: string;
+  name: string;
+  imgURL: string;
+  category: string;
+  prices: DishPrices;
+  notes: string;
+  hidden: boolean;
+  weight: string;
+  allergens: Allergens;
+  ingredients: string;
+  glicemicIndex: string;
+  kcal: string;
+  vegan: boolean;
+  vegetarian: boolean;
+}
+
+export interface Allergens {
+  gluten: boolean;
+  lactose: boolean;
+  soy: boolean;
+  eggs: boolean;
+  seaFood: boolean;
+  peanuts: boolean;
+  sesame: boolean;
+}
+
+export interface DishPrices {
+  price1: Price;
+  price2: Price;
+  price3: Price;
+}
+
+export interface Price {
+  name: string;
+  price: string;
+}