add users and teams search

Author: BasharElmetwaliahmed

src/Components/Friends/FriendsList.jsx

@@ -1,9 +1,27 @@
+/* eslint-disable react/prop-types */
 import searchIcon from '../../assets/images/global/searchIcon.svg'
 
-function SearchField() {
+function SearchField({setKeyWord,getSearch,setCurrent,type}) {
+
+  
+  const changeHandler=async(e)=>{
+    setKeyWord(e.target.value);
+    const resData=await getSearch();
+    if(resData.ok && type=='users'){
+    setCurrent(resData.data.users)
+    }
+    else if(resData.ok && type=='teams'){
+      setCurrent(resData.data.teams)
+    }
+
+
+
+
+  }
   return (
       <div className="relative w-full bg-white  rounded-2xl  shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] ">
       <input
+        onChange={changeHandler}
         type="text"
         placeholder="Search..."
         className="  py-4 pl-10 pr-8  border w-full  rounded-2xl outline-none border-none focus:outline-none focus:ring focus:border-blue-500"

src/Components/GlobalComponents/SearchField.jsx

@@ -4,9 +4,8 @@ import Requests from "./Requests/Requests"
 function FriendsList({isFixed}) {
   return (
     <div className="w-1/4">
-    <div className={`w-full p-4 ${!isFixed?'':'fixed !w-1/4 top-0 transform    '} `}>
+    <div className={`w-full  ${!isFixed?'':'fixed !w-1/4 top-0 transform    '} `}>
     <Requests/>
-    <MyFriends/>
     </div>
     </div>
 

src/Components/Home/FriendsList/FriendsList.jsx

@@ -1,15 +1,20 @@
-import profileImg from '../../../../assets/images/home/Ellipse 64.svg'
-function RequestItem() {
+import { imgLink } from '../../../../api'
+import { transferDate } from '../../../../Functions/transferDate'
+import RespondToInvite from './RespondToInvite'
+function RequestItem({request}) {
   return (
-    <div className='flex justify-between gap-2 py-2 '>
-      <div className='flex-grow px-4'>
-        <h4 className='text-end text-xs mb-1'>Lincoln</h4>
-        <div className='font-inter font-bold text-lg  flex  justify-between' >
-          <button >delete</button>
-          <button className='ml-2  p-2 rounded-xl bg-[rgba(200,174,125,1)] '>Confirm</button>
+    <div className='flex justify-between items-center py-2 '>
+        <div className='flex gap-4'>
+         <img src={`${imgLink}/${request.team.imageUrl}`} alt='profile img' className='align-middle justify-self-center w-14 h-14 rounded-full'/>
+         <div>
+          <h5 className='font-semibold text-sm mb-3'>you are invited to join {request.team.name}</h5>
+          <p className='text-xs'>{transferDate(request.created_at)}</p>
+         </div>
         </div>
-      </div>
-      <img src={profileImg} alt='profile img' className='align-middle justify-self-center w-fit'/>
+                <RespondToInvite request={request} response='accept'/>
+                <RespondToInvite request={request} response='reject'/>
+
+
     </div>
   )
 }

src/Components/Home/FriendsList/Requests/RequestItem.jsx

@@ -1,20 +1,45 @@
-import RequestItem from "./RequestItem"
-
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { api } from "../../../../api";
+import useFetch from "../../../../CustomHooks/useFetch";
+import { getOptions } from "../../../../options";
+import RequestItem from "./RequestItem";
+let init=false
 function Requests() {
+  const {fetchApi:getJoinRequest,loading}=useFetch(`${api}/invite-requests`,getOptions,true)
+  const user=useSelector(state=>state.auth.user)
+  const [requests,setRequest]=useState([])
+  useEffect(()=>{
+   const fetchData=async()=>{
+    const resData= await getJoinRequest()
+    if(resData.ok && user && !init){
+      setRequest(resData.data.invite_requests)
+      init=true
+    }
+   }
+   fetchData()
+  },[user])
+  if(requests.length>0)
   return (
     <div className="border-b-4 border-b-white">
-        <div className="flex justify-between items-center text-inter ">
-            <h3 className=" font-bold text-xl text-customblack">Follow-up requests</h3>
-            <button className="text-base">View all</button>
-        </div>
-        <div className="flex flex-col gap-3">
-            <RequestItem/>
-            <RequestItem/>
-            <RequestItem/>
+      <div className="flex justify-between items-center pl-6 pt-9 ">
+        <h3 className="font-bold text-xl text-mulish text-customblack">Invite to teams requests</h3>
+      </div>
+      <div className="flex flex-col gap-3 mt-10">
+        {requests.map((request, index) => (
+          <div
+            key={index}
+            className={`${
+              index % 2 == 0 ? 'bg-white' : ''
+            } p-4 rounded-md`}
+          >
+            <RequestItem request={request}  />
 
-        </div>
+          </div>
+        ))}
+      </div>
     </div>
-  )
+  );
 }
 
-export default Requests
+export default Requests;

src/Components/Home/FriendsList/Requests/Requests.jsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/prop-types */
+
+import { api } from "../../../../api"
+import useFetch from "../../../../CustomHooks/useFetch"
+import ReactLoading from 'react-loading';
+import { postOptions } from "../../../../options";
+
+
+function RespondToInvite({response,request}) {
+    const {fetchApi:respondToJoin,loading}=useFetch(`${api}/join-requests/${response}-join/${request.id}`,postOptions)
+
+    const clickHandler=async()=>{
+        console.log(request.id)
+        const resData=await respondToJoin()
+        if(resData.ok){
+            console.log(resData)
+        }
+    }
+    const style=' py-2 px-4 rounded-xl text-sm font-medium transition-all duration-300 border-2 border-solid'
+  return (
+    <div className="flex">
+        {!loading?<button onClick={clickHandler} className={response=='accept'?`bg-primary mr-[10px] text-white border-transparent ${style}
+         hover:border-primary hover:bg-white hover:text-primary `
+        :`bg-white text-primary border-primary ${style}  hover:bg-primary
+         hover:text-white `}>{response=='accept'?'Accept':'Reject'}</button>:
+                 <div className="element-center center-element mx-auto w-[60px]">
+          <ReactLoading
+          className="mx-auto"
+          type="spin"
+          color="#D9C6A4"
+          height={40}
+          width={40}
+        /></div>
+
+        }
+         
+    </div>
+  )
+}
+
+export default RespondToInvite

src/Components/Home/FriendsList/Requests/RespondToInvite.jsx

@@ -9,7 +9,7 @@ import SearchField from '../../GlobalComponents/SearchField'
 
 function SelectionsSearch() {
     const links = [
-  { imgPath: FriendsImg, text: 'Friends',path:'friends' },
+  { imgPath: FriendsImg, text: 'Individuals',path:'individuals' },
   { imgPath: MentorsImg, text: 'Mentors',path:'/mentors' },
   { imgPath: TeamImg, text: 'Teams',path:'/teams' },
   { imgPath: ResourcesImg, text: 'Resources', path:'/resources' },

src/Components/Home/HomeSideBar/SelectionsSearch.jsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/prop-types */
+import { imgLink } from '../../api'
+import noImage from '../../assets/images/profile/no-profile-picture.svg'
+function Indivdual({name,img,followed,track}) {
+  return (
+    <div className='flex justify-between items-center'>
+        <div className='flex items-center gap-6'>
+            <img src={img?`${imgLink}/${img}`:noImage} alt="profile img" className='w-14' />
+            <div>
+                <h3 className='text-base font-semibold'>{name}</h3>
+                <p className='text-xs font-semibold'>{track}</p>
+
+            </div>
+        </div>
+        <button className={`${followed?'bg-white !text-primary border-[1px] border-primary border-solid':'bg-primary text-white'} py-2 px-5 w-fit  rounded-[10px] h-fit`}>Following</button>
+    </div> 
+  )
+}
+
+export default Indivdual

src/Components/Individuals/Individual.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { api } from '../../api'
+import useFetch from '../../CustomHooks/useFetch'
+import { getOptions } from '../../options'
+import SearchField from '../GlobalComponents/SearchField'
+import Indivdual from './Individual'
+import ReactLoading from 'react-loading';
+
+
+function IndividualsList() {
+  const {fetchApi:getAllUsers, loading}=useFetch(`${api}/users`,getOptions,true)
+  const [keyword,setKeyWord]=useState('')
+  const {fetchApi:getSearch,loading:searchLoading}=useFetch(`${api}/search/users?query=${keyword}`,getOptions,true)
+  const [currentUsers,setCurrentUsers]=useState([]);
+  useEffect(()=>{
+    const fetchUsers=async()=>{
+      const resData=await getAllUsers();
+      if(resData){
+        setCurrentUsers(resData.data.users)
+      }
+
+      }
+      fetchUsers()
+
+  },[])
+
+  return (
+   <>
+    <SearchField setKeyWord={setKeyWord} getSearch={getSearch} type='users' setCurrent={setCurrentUsers}/>
+    {(searchLoading | loading)?       <div className="element-center center-element mx-auto h-full mt-10 w-[60px]">             <ReactLoading
+          className="mx-auto"
+          type="spin"
+          color="#D9C6A4"
+          height={40}
+          width={40}
+        /></div>:<div className='flex flex-col gap-4 w-full py-8 h-[calc(100vh_-_99px)]'>
+                     { currentUsers.map(user=> <Indivdual key={user.id} name={user.name}
+               img={user.imageUrl} track={user.track} followed={true}/>)}
+    </div>}
+    </>
+  )
+}
+
+export default IndividualsList

src/Components/Individuals/IndividualsList.jsx

@@ -0,0 +1,13 @@
+import { api } from "../../api"
+import useFetch from "../../CustomHooks/useFetch"
+
+function SearcQuery(type,keyword) {
+  const {fetchApi:setSearch,loading:searchLoading}=useFetch(`${api}/search/${type}?query=${keyword}`)
+  return {
+    setSearch,
+    searchLoading
+  }
+
+}
+
+export default SearcQuery

src/Components/Individuals/SearchQuery.jsx

@@ -0,0 +1,8 @@
+
+function InviteRequestItem() {
+  return (
+    <div>InviteRequestItem</div>
+  )
+}
+
+export default InviteRequestItem

src/Components/Friends/TrackItem.jsx renamed to src/Components/Individuals/TrackItem.jsx

@@ -0,0 +1,8 @@
+
+function InviteRequests() {
+  return (
+    <div className="w-1/">InviteRequests</div>
+  )
+}
+
+export default InviteRequests

src/Components/Friends/Tracks.jsx renamed to src/Components/Individuals/Tracks.jsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import Profileimg from '../../assets/images/posts/Ellipse 25 (1).svg'
 import ModalComponent from './Post/ModalComponent';
-
-
+import noPicture from '../../assets/images/profile/no-profile-picture.svg'
+import { useSelector } from 'react-redux';
+import { imgLink } from '../../api';
 
 const CreatePost=()=> {
   const [open, setOpen] = useState(false);
+  const user = useSelector(state=>state.auth.user)
 
   const openModal=()=>{
     setOpen(true)
@@ -15,7 +16,7 @@ const CreatePost=()=> {
   }
   return (
   <>   <div className='mt-[32px] mb-[50px]  mb-2   element-center' >
-            <img src={Profileimg}/>
+            <img className='w-14 rounded-full h-14' src={user&&user.imageUrl?`${imgLink}/${user.imageUrl}`:noPicture}/>
 
         <button onClick={openModal} className="text-[rgba(152,150,150,1)] text-base flex items-center text-roboto text-xl bg-white pl-11 shadow-[shadow:0px_10px_10px_0px_rgba(218,218,218,0.3)] hover:opacity-50 transition-all duration-30000    w-full rounded-2xl   h-[50px]">
         What’s on your mind?

src/Components/InviteRequests/InviteRequestItem.jsx

@@ -36,7 +36,7 @@ function Post({ post }) {
       <div >
       <PostContent post={post} />
       <PostDetails post={post} openLikesList={setOpenLikesList} openCommentsList={()=>setOpenCommentsList(true)} likesNumber={likesDataForPost?likesDataForPost.length:0} commentsNumber={commentsDataForPost?commentsDataForPost.length:0}  />
-      <PostActions post={post} usersLikesThisPost={existedPost?existedPost.likesData:[]} />
+      <PostActions post={post} openCommentsList={()=>setOpenCommentsList(true)} usersLikesThisPost={existedPost?existedPost.likesData:[]} />
       </div>
       {openLikesList &&<LikesList datalikes={likesDataForPost} closeLikesList={()=>setOpenLikesList(false)}/>}
      {openCommentsList&& <CommentList closeCommentsList={()=>setOpenCommentsList(false)} comments={commentsofPost?commentsofPost.commentsData:[]} id={post.id}/>}

src/Components/InviteRequests/InviteRequests.jsx

@@ -1,13 +1,18 @@
+/* eslint-disable react/prop-types */
 import { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import likeIcon from '../../../../assets/images/posts/icons8-like-24 2.svg';
 import useFetch from '../../../../CustomHooks/useFetch';
 import { postOptions } from '../../../../options';
+import { fetchLikesForPost } from '../../../../store/posts/fetchLikesForPost';
+import { fetchPosts } from '../../../../store/posts/fetchPosts';
 
 const user_id = 2;
 
 function LikeButton({ post, usersLikesThisPost }) {
   const { fetchApi: likePost } = useFetch(`http://localhost:8000/api/posts/${post.id}/like`, postOptions);
   const [userLikedPost, setUserLikedPost] = useState(false);
+  const dispatch=useDispatch()
 
 
 
@@ -19,6 +24,9 @@ function LikeButton({ post, usersLikesThisPost }) {
     const resData = await likePost();
     if (resData.ok) {
       setUserLikedPost(!userLikedPost);
+    dispatch(fetchPosts())
+    dispatch(fetchLikesForPost(resData.data.post_id))
+
     }
   };
 

src/Components/Posts/CreatePost.jsx

@@ -1,13 +1,13 @@
+/* eslint-disable react/prop-types */
 import { actions } from "./postActionsData"
 import LikeButton from './LikeButton'
 
-function PostActions({post,usersLikesThisPost}) {
+function PostActions({post,usersLikesThisPost,openCommentsList}) {
 
   return (
     <div className='flex justify-between text-base font-medium    py-4'>
       <LikeButton post={post} usersLikesThisPost={usersLikesThisPost}/>
-   {actions.map((action,index)=><button className='flex flex-row-reverse items-center gap-3' key={index}><img className="w-5" src={action.icon}/><span>{action.text}</span></button>
-   )}
+  <button className='flex flex-row-reverse items-center gap-3' onClick={openCommentsList} ><img className="w-5" src={actions[0].icon}/><span>{actions[0].text}</span></button>
     </div>
   )
 }