Add create new post with cloudinary image upload

.env

@@ -0,0 +1,2 @@
+REACT_APP_PUBLIC_URL="https://beejathon.github.io/blog-cms"
+REACT_APP_API_URI="http://localhost:8080/api"

package.json

@@ -4,9 +4,14 @@
   "homepage": "https://beejathon.github.io/blog-cms",
   "private": true,
   "dependencies": {
+    "@cloudinary/react": "^1.11.2",
+    "@cloudinary/url-gen": "^1.10.1",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",

src/App.js

@@ -1,10 +1,7 @@
 import React from "react";
 import { PostsProvider } from "./hooks/usePosts";
 import { CommmentsProvider } from "./hooks/useComments";
-import { 
-  Routes, 
-  Route,
-} from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { Header } from "./components/Header";
 import { Home } from "./components/Home";
 import { NewPost } from "./components/NewPost";
@@ -28,7 +25,7 @@ export const App = () => {
             <Route path="/:postid" element={<Post />} />
           </Routes>
         </CommmentsProvider>
-        </PostsProvider>
+      </PostsProvider>
     </div>
   );
 }

src/components/Header.js

@@ -17,7 +17,6 @@ export const Header = () => {
     localStorage.removeItem('token');
     setUser(null);
     setToken(null);
-
   }
 
   return (

src/components/Home.js

@@ -5,7 +5,7 @@ import { usePosts } from "../hooks/usePosts";
 import { PostCard } from "./PostCard";
 
 export const Home = () => {
-  const posts = usePosts();
+  const { posts } = usePosts();
 
   if (!posts) return 'Loading...'
 
@@ -16,9 +16,9 @@ export const Home = () => {
           <h2 className="h4">All Posts</h2>
           {posts.map((post) => {
             return (
-              <div key={post._id}>
-                <PostCard post={post} />
-              </div>
+              <>
+                <PostCard key={post._id} post={post} />
+              </>
             )
           })}
         </Stack>