Part 3: Refactor App.js to use <Routes> instead of <Switch>

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: adrianhajdin

README.md

@@ -9,5 +9,8 @@ Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack M
 
 By the end of this video, you will have a strong understanding of how the MERN Stack works.
 
+### [🌟 Become a top 1% Next.js 13 developer in only one course](https://jsmastery.pro/next13)
+### [🚀 Land your dream programming job in 6 months](https://jsmastery.pro/masterclass)
+
 Setup:
-- run ```npm i && npm start``` for both client and server side to start the app
+- run ```npm i && npm start``` for both client and server side to start the app

client/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Container } from '@material-ui/core';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import Home from './components/Home/Home';
 import Navbar from './components/Navbar/Navbar';
@@ -10,10 +10,10 @@ const App = () => (
   <BrowserRouter>
     <Container maxWidth="lg">
       <Navbar />
-      <Switch>
+      <Routes>
         <Route path="/" exact component={Home} />
         <Route path="/auth" exact component={Auth} />
-      </Switch>
+      </Routes>
     </Container>
   </BrowserRouter>
 );

client/src/actions/posts.js

@@ -45,7 +45,7 @@ export const likePost = (id) => async (dispatch) => {
 
 export const deletePost = (id) => async (dispatch) => {
   try {
-    await await api.deletePost(id);
+    await api.deletePost(id);
 
     dispatch({ type: DELETE, payload: id });
   } catch (error) {

client/src/index.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-
+// Install "npm install @reduxjs/toolkit" on server side
+import { configureStore } from "@reduxjs/toolkit";
 import { reducers } from './reducers';
 import App from './App';
 import './index.css';
 
-const store = createStore(reducers, compose(applyMiddleware(thunk)));
+const store = configureStore({ reducer: reducers });
 
 ReactDOM.render(
   <Provider store={store}>

server/controllers/posts.js

@@ -59,8 +59,8 @@ export const deletePost = async (req, res) => {
 
     if (!mongoose.Types.ObjectId.isValid(id)) return res.status(404).send(`No post with id: ${id}`);
 
-    await PostMessage.findByIdAndRemove(id);
-
+    await PostMessage.findByIdAndDelete(id);
+    
     res.json({ message: "Post deleted successfully." });
 }