mise en place des userstories / suggestions (sans le follow)

src/components/Comment.tsx

@@ -26,7 +26,7 @@ const Comment = ({ tab_comments }: CommentProps) => {
             <div className="flex justify-between">
                 <div className="flex items-center gap-4">
                     <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-8 h-8">
-                        <p className="uppercase text-white">{comment.owner.userName.charAt(0)}</p>
+                        <p className="uppercase text-white text-xs">{comment.owner.userName.charAt(0)}</p>
                     </div>
                     <div>
                         {/* <p><span className="font-bold mr-1">{comment.owner.userName}</span>{limitCommentText(comment.text)}</p> */}

src/components/Post.tsx

@@ -41,7 +41,7 @@ return <>
         <div className="flex items-center gap-4">
             <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-12 h-12">
                 {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
-                <p className="uppercase text-white">{username.charAt(0)}</p>
+                <p className="uppercase text-white text-xl">{username.charAt(0)}</p>
             </div>
             <div>
                 <p className="font-bold">{username}</p>

src/components/UserStory.tsx → src/components/Suggestion.tsx

@@ -2,27 +2,28 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
-type UserProps = {
-    username: string;
+type SuggestionProps = {
+    firstname: string;
 };
 
-const UserStory = ({ username }: UserProps) => {
+const Suggestion = ({ firstname }: SuggestionProps) => {
 
 return <>
     {/* USER / STORY */}
     <li className="flex flex-col items-center">
         <div className="relative">
-            <div className="rounded-full overflow-hidden w-24 h-24">
-                <img src="/src/assets/images/pp_user.png" alt="" />
+            <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-24 h-24">
+                {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
+                <p className="uppercase text-white text-[38px]">{firstname.charAt(0)}</p>
             </div>
             <button
                 className="px-2 py-[7px] text-2xl rounded-full bg-gray-300/50 flex items-center justify-center absolute right-0 bottom-0">
                 <FontAwesomeIcon className="text-[14px]" icon={faPlus} />
             </button>
         </div>
-        <p className="mt-2">name : {username}</p>
+        <p className="mt-2">{firstname}</p>
     </li>
 </>;
 };
 
-export default UserStory;
\ No newline at end of file
+export default Suggestion; // suggestion = userstory
\ No newline at end of file

src/hooks/useSuggestionItems.ts

+import { selectSuggestion } from '../redux/suggestion/selectors';
+import useAppSelector from './useAppSelector';
+
+const useSuggestion = () => {
+  const data = useAppSelector(selectSuggestion);
+
+  return { data };
+};
+
+export default useSuggestion;
\ No newline at end of file

src/hooks/useUserStoryItems.ts

-import { selectFeedItems } from '../redux/feed/selectors'; //ici
-import useAppSelector from './useAppSelector';
-
-const useUserStoryItems = () => {
-  return useAppSelector(selectFeedItems);
-};
-
-export default useUserStoryItems;
\ No newline at end of file

src/redux/store.ts

@@ -6,6 +6,8 @@ import instalikeApi from '../instalikeApi';
 import authReducer from './auth/reducer';
 import feedReducer from './feed/reducer';
 import postReducer from './post/reducer';
+import suggestionReducer from './suggestion/reducer';
+
 
 
 
@@ -13,6 +15,7 @@ const rootReducer = combineReducers({
     auth: authReducer,
     feed: feedReducer,
     post: postReducer,
+    suggestion: suggestionReducer, // suggestion = userstory
 });  
 
 const middleware: Middleware[] = [];

src/redux/suggestion/actions.ts

+import { Instalike } from '@jmetterrothan/instalike';
+import { AppAction } from '../types';
+
+
+export const SET_SUGGESTION_FEED = 'USERSTORY/SET_FEED';
+
+
+export type getSuggestionFeedAction = AppAction<typeof SET_SUGGESTION_FEED, Instalike.User[]>;
+
+
+export type SuggestionAction = getSuggestionFeedAction;
+
+
+export const setSuggestionAction = (data: Instalike.User[]): getSuggestionFeedAction => ({
+  type: SET_SUGGESTION_FEED,
+  payload: data,
+});
\ No newline at end of file

src/redux/suggestion/reducer.ts

+import { Instalike } from '@jmetterrothan/instalike';
+import { Reducer } from 'redux';
+
+import { SET_SUGGESTION_FEED, SuggestionAction } from './actions';
+
+
+type SuggestionState = {
+  data: Instalike.User[];
+};
+
+
+const initalState: SuggestionState = {
+  data: [],
+};
+
+const suggestionReducer: Reducer<SuggestionState, SuggestionAction> = (state = initalState, action) => {
+  switch (action.type) {
+    case SET_SUGGESTION_FEED:
+      console.log(action.payload);
+      return { ...state, data: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default suggestionReducer;
\ No newline at end of file

src/redux/suggestion/selectors.ts

+import { RootState } from '../store';
+
+export const selectSuggestion = (state: RootState) => state.suggestion.data;

src/redux/suggestion/thunks.ts

+import { AppThunkAction } from '../types';
+import { setSuggestionAction } from './actions';
+
+export const fetchSuggestionAsync = (): AppThunkAction<Promise<void>> => {
+  return async (dispatch, getState, api) => {
+    try {
+      const { data } = await api.users.me.followSuggestions.fetch({ amount: 5 });
+      dispatch(setSuggestionAction(data));
+    } catch (e) {
+
+      throw e;
+    }
+  };
+};

src/views/FeedView.tsx

@@ -3,26 +3,32 @@ import { Instalike } from '@jmetterrothan/instalike';
 
 // COMPOSANTS
 import Navbar from '../components/Navbar';
-import UserStory from '../components/UserStory';
+import Suggestion from '../components/Suggestion';
 import Post from '../components/Post';
+// import { Link } from 'react-router-dom';
 
 // AUTRES FICHIERS
 import useAppDispatch from '../hooks/useAppDispatch';
 import useFeedItems from '../hooks/useFeedItems';
-import useUserStoryItems from '../hooks/useUserStoryItems';
+import useSuggestionItems from '../hooks/useSuggestionItems';
 import { fetchFeedUserAsync } from '../redux/feed/thunks';
 import { calculateTime } from '../redux/post/thunks';
-// import { Link } from 'react-router-dom';
+import { fetchSuggestionAsync } from '../redux/suggestion/thunks';
+
 
 
 const FeedView = () => {
     const dispatch = useAppDispatch();
     useEffect(() => {
       dispatch(fetchFeedUserAsync());
-}, []);
+    }, []);
+
+    useEffect(() => {
+        dispatch(fetchSuggestionAsync());
+    }, []);   
 
-const feedItems = useFeedItems();
-const userStoryItems = useUserStoryItems(); //ici
+    const feedItems = useFeedItems();
+    const suggestionItems = useSuggestionItems().data;
 
 
 return <>
@@ -33,22 +39,20 @@ return <>
         {/* USERS / STORIES */}
         <ul className="flex gap-8">
             {/* USER / STORY */}
-            {userStoryItems && //ici
-                userStoryItems.map((userstory: Instalike.User) => {
-                    console.log("ici" + userstory)
+            {suggestionItems && //ici
+                suggestionItems.map((user) => {
 
                 return (
-                    <UserStory key={userstory.id}
-                        username={userstory.userName}
-                    ></UserStory>
+                    <Suggestion key={user.id}
+                        firstname={user.firstName}
+                    ></Suggestion>
                 );
                 })
             }
-            {/* <UserStory /> */}
         </ul>
         {/* POSTS */}
         {feedItems &&
-        feedItems.map((post: Instalike.Post) => {
+            feedItems.map((post: Instalike.Post) => {
             console.log(post)
 
           return (