Set up frontend

README.md

@@ -14,4 +14,5 @@ Table:
 | 11.07.2023 | Add mock data + Fix package.json not pushed | 2 |
 | 11.07.2023 | Add REST requests | 1 |
 | 12.07.2023 | Add mock assets and initialize frontend | 3 |
+| 13.07.2023 | Setup frontend | 6 |
 

client/src/App.js

@@ -1,9 +1,18 @@
-import './App.css';
+import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom";
+import HomePage from "scenes/homePage";
+import LoginPage from "scenes/loginPage";
+import ProfilePage from "scenes/profilePage";
 
 function App() {
   return (
     <div className="App">
-
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<LoginPage />} />
+          <Route path="/home" element={<HomePage />} />
+          <Route path="/profile/:userId" element={<ProfilePage />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

client/src/index.js

@@ -1,11 +1,42 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
+import authReducer from "./state";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from "redux-persist";
+import storage from "redux-persist/lib/storage";
+import { PersistGate } from "redux-persist/integration/react";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const persistConfig = { key: "root", storage, version: 1 };
+const persistedReducer = persistReducer(persistConfig, authReducer);
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+});
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistStore(store)}>
         <App />
+      </PersistGate>
+    </Provider>
   </React.StrictMode>
 );

client/src/scenes/homePage/index.jsx

@@ -0,0 +1,7 @@
+const HomePage = () => {
+    return (
+        <div>homepage</div>
+    )
+};
+
+export default HomePage;

client/src/scenes/loginPage/index.jsx

@@ -0,0 +1,7 @@
+const LoginPage = () => {
+    return (
+        <div>loginpage</div>
+    )
+};
+
+export default LoginPage;

client/src/scenes/navbar/index.jsx

@@ -0,0 +1,7 @@
+const Navbar = () => {
+    return (
+        <div>navbar</div>
+    )
+};
+
+export default Navbar;

client/src/scenes/profilePage/index.jsx

@@ -0,0 +1,7 @@
+const ProfilePage = () => {
+    return (
+        <div>profilepage</div>
+    )
+};
+
+export default ProfilePage;

client/src/state/index.js

@@ -0,0 +1,49 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  mode: "light",
+  user: null,
+  token: null,
+  posts: [],
+};
+
+export const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setMode: (state, action) => {
+      state.mode = state.mode === "light" ? "dark" : "light";
+    },
+    setLogin: (state, action) => {
+      state.user = action.payload.user;
+      state.token = action.payload.token;
+    },
+    setLogout: (state, action) => {
+      state.user = null;
+      state.token = null;
+    },
+    setFriends: (state, action) => {
+      if (state.user) {
+        state.user.friends = action.payload.friends;
+      } else {
+        console.error("No user to set friends to");
+      }
+    },
+    setPost: (state, action) => {
+      const updatedPosts = state.posts.map((post) => {
+        if (post._id === action.payload.post._id) {
+          return action.payload.post;
+        }
+        return post;
+      });
+      state.posts = updatedPosts;
+    },
+    setPosts: (state, action) => {
+      state.posts = action.payload.posts;
+    },
+  },
+});
+
+export const { setMode, setLogin, setLogout, setFriends, setPost, setPosts } =
+  authSlice.actions;
+export default authSlice.reducer;