ajouter un post

src/App.tsx

@@ -4,6 +4,7 @@ import DiscoverView from './views/DiscoverView';
 import FeedView from './views/FeedView';
 import LoginView from './views/LoginView';
 import PostView from './views/PostView';
+import AddPostView from './views/AddPostView';
 import Profile from './views/Profile';
 
 import AuthGuard from './components/AuthGuard';
@@ -19,6 +20,7 @@ function App() {
       <Route element={<AuthGuard />}>
         <Route path="feed" element={<FeedView />} />
         <Route path="discover" element={<DiscoverView />} />
+        <Route path="addpost" element={<AddPostView />} />
         <Route path="post/:id" element={<PostView />} />
         <Route path="profile" element={<Profile />} />
       </Route>

src/components/Navbar.tsx

@@ -23,7 +23,7 @@ return <>
                     <FontAwesomeIcon className="text-[24px]" icon={faCompass} />
                     </Link>
                 {/* ADD PICS */}
-                <a href="#">
+                <a href="/addpost">
                     <FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} />
                 </a>
                 {/* PROFIL */}

src/redux/post/thunks.ts

@@ -4,22 +4,6 @@ import { data } from 'autoprefixer';
 import { AppThunkAction } from '../types';
 import { failurePostAction, loadPostAction, setPost, sucessPostAction } from './actions';
 
-export const fetchPostAsync = (postid: number): AppThunkAction<Promise<void>> => {
-  return async (dispatch, getState, api) => {
-    dispatch(loadPostAction());
-
-    try {
-      const { data } = await api.posts.find(postid).fetch();
-      dispatch(setPost(data));
-
-      dispatch(sucessPostAction());
-    } catch (eee) {
-      dispatch(failurePostAction());
-
-      throw eee;
-    }
-  };
-};
 
 // Calcul temps de publication d'un post / commentaire
 export const calculateTime = (createdAt: string): string => {
@@ -40,4 +24,40 @@ export const calculateTime = (createdAt: string): string => {
     } else {
       return diffDays === 1 ? `${diffDays} day ago` : `${diffDays} days ago`;
     }
-} 
+}
+
+
+// Réccupérer les posts
+export const fetchPost = (postid: number): AppThunkAction<Promise<void>> => {
+  return async (dispatch, getState, api) => {
+    dispatch(loadPostAction());
+
+    try {
+      const { data } = await api.posts.find(postid).fetch();
+      dispatch(setPost(data));
+
+      dispatch(sucessPostAction());
+    } catch (eee) {
+      dispatch(failurePostAction());
+
+      throw eee;
+    }
+  };
+};
+
+
+// Ajouter un post
+export const addPost = (resources: File[], location: string, caption: string): AppThunkAction<Promise<void>> => { //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
+  return async (dispatch, getState, api) => {
+    try {
+      const { data } = await api.posts.create({
+        resources: resources,
+        location: location,
+        caption: caption,
+      });
+      dispatch(setPost(data));
+    } catch (fff) {
+      throw fff;
+    }
+  };
+};

src/views/AddPostView.tsx

+import { useEffect, useState } from 'react';
+import { Navigate, Link } from 'react-router-dom';
+
+// COMPOSANTS
+import Navbar from '../components/Navbar';
+
+// AUTRES FICHIERS
+import useAppDispatch from '../hooks/useAppDispatch';
+import usePost from '../hooks/usePostItems';
+import { addPost } from '../redux/post/thunks';
+
+const AddPostView = () => {
+const dispatch = useAppDispatch();
+const [selectedImg, setSelectedImg] = useState<File[]>([]);
+    const [location, setLocation] = useState("");
+    const [caption, setCaption] = useState("");
+    const [redirect, setRedirect] = useState(false);
+    const post = usePost().items || { id: -1 }; // Initialisation de post avec un objet par défaut
+
+    useEffect(() => {
+    post.id = -1;
+    }, []);
+
+    useEffect(() => {
+    if (post.id !== -1) {
+    setRedirect(true);
+    }
+    }, [post.id]);
+
+    return (
+    <>
+        {/* HEADER */}
+        <Navbar />
+        {/* MODAL */}
+        <div className="max-w-[640px] mx-auto p-6 border rounded-xl mt-10 bg-white flex flex-col">
+            <p className="text-center font-bold text-2xl">Créer un post</p>
+            <form className="flex flex-col gap-4 mt-6">
+                {/* IMAGE */}
+                <div className="flex flex-col gap-1">
+                    <label htmlFor="image-upload" className="font-bold">Ajouter une image :</label>
+                    <input type="file" accept="image/*" id="image-upload" onChange={(test)=> {
+                        if (test.target.files) {
+                        setSelectedImg(selectedImg.concat(test.target.files[0]));
+                        }
+                    }}
+                    />
+                </div>
+                {/* LOCATION */}
+                <div className="flex flex-col gap-1">
+                    <label htmlFor="location-input" className="font-bold">Lieu :</label>
+                    <input className="h-10 p-2 rounded-sm border" id="location-input" placeholder="Lieu" value={location} onChange={(e)=>
+                    setLocation(e.target.value)} />
+                </div>
+                {/* DESCRIPTION */}
+                <div className="flex flex-col gap-1">
+                    <label htmlFor="caption-input" className="font-bold">Description :</label>
+                    <input className="h-10 p-2 rounded-sm border" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
+                    setCaption(e.target.value)} />
+                </div>
+                {/* BTNS */}
+                <div className="grid grid-cols-2 gap-4 mt-6">
+                    {/* CANCEL BTN */}
+                    <Link to="/feed">
+                    <button
+                        className="bg-red-600 text-white font-bold h-10 rounded-md mt-2 uppercase w-full">Annuler</button>
+                    </Link>
+                    {/* SUBMIT BTN */}
+                    <button className="bg-green-700 text-white font-bold h-10 rounded-md mt-2 uppercase w-full"
+                        onClick={(test)=> {
+                            dispatch(addPost(selectedImg, location, caption)); //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
+                        }}
+                        >
+                        Envoyer
+                    </button>
+                </div>
+            </form>
+
+            {redirect &&
+            <Navigate to={'post/' + post.id} replace={true} />}
+        </div>
+
+    </>
+    );
+    };
+
+    export default AddPostView;
\ No newline at end of file

src/views/PostView.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import useAppDispatch from '../hooks/useAppDispatch';
 import usePost from '../hooks/usePostItems';
-import { fetchPostAsync, calculateTime } from '../redux/post/thunks';
+import { fetchPost, calculateTime } from '../redux/post/thunks';
 import Post from '../components/Post';
 
 
@@ -15,7 +15,7 @@ const PostView = () => {
   const dispatch = useAppDispatch();
   const id = usePostId();
   useEffect(() => {
-    dispatch(fetchPostAsync(id));
+    dispatch(fetchPost(id));
   }, []);
   const post = usePost().items;