Skip to content

Commit b56b4b1

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
enhance formate of individuals and mentors
1 parent bf3cdde commit b56b4b1

File tree

11 files changed

+196
-183
lines changed

11 files changed

+196
-183
lines changed

‎src/Components/Individuals/Individual.jsx

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
/* eslint-disable react/prop-types */
2-
import { imgLink } from '../../api'
3-
import noImage from '../../assets/images/profile/no-profile-picture.svg'
4-
function Indivdual({name,img,followed,track}) {
2+
import { imgLink } from '../../api';
3+
import noImage from '../../assets/images/profile/no-profile-picture.svg';
4+
5+
function Individual({ name, img, followed, track }) {
56
return (
67
<div className='flex justify-between items-center'>
7-
<div className='flex items-center gap-6'>
8-
<img src={img?`${imgLink}/${img}`:noImage} alt="profile img" className='w-14' />
9-
<div>
10-
<h3 className='text-base font-semibold'>{name}</h3>
11-
<p className='text-xs font-semibold'>{track}</p>
12-
13-
</div>
8+
<div className='flex items-center gap-6'>
9+
<img
10+
src={img ? `${imgLink}/${img}` : noImage}
11+
alt='Profile Image'
12+
className='w-14'
13+
/>
14+
<div>
15+
<h3 className='text-base font-semibold'>{name}</h3>
16+
<p className='text-xs font-semibold'>{track}</p>
1417
</div>
15-
<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>
16-
</div>
17-
)
18+
</div>
19+
<button
20+
className={`${
21+
followed
22+
? 'bg-white !text-primary border-[1px] border-primary border-solid'
23+
: 'bg-primary text-white'
24+
} py-2 px-5 w-fit rounded-[10px] h-fit`}
25+
>
26+
{followed ? 'Following' : 'Follow'}
27+
</button>
28+
</div>
29+
);
1830
}
1931

20-
export default Indivdual
32+
export default Individual;

‎src/Components/Individuals/IndividualsList.jsx

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,57 @@
1-
import { useEffect, useState } from 'react'
2-
import { api } from '../../api'
3-
import useFetch from '../../CustomHooks/useFetch'
4-
import { getOptions } from '../../options'
5-
import SearchField from '../GlobalComponents/SearchField'
6-
import Indivdual from './Individual'
1+
import { useEffect, useState } from 'react';
2+
import { api } from '../../api';
3+
import useFetch from '../../CustomHooks/useFetch';
4+
import { getOptions } from '../../options';
5+
import SearchField from '../GlobalComponents/SearchField';
6+
import Individual from './Individual';
77
import ReactLoading from 'react-loading';
88

9-
109
function IndividualsList() {
11-
const {fetchApi:getAllUsers, loading}=useFetch(`${api}/users`,getOptions,true)
12-
const [keyword,setKeyWord]=useState('')
13-
const {fetchApi:getSearch,loading:searchLoading}=useFetch(`${api}/search/users?query=${keyword}`,getOptions,true)
14-
const [currentUsers,setCurrentUsers]=useState([]);
15-
useEffect(()=>{
16-
const fetchUsers=async()=>{
17-
const resData=await getAllUsers();
18-
if(resData){
19-
setCurrentUsers(resData.data.users)
20-
}
10+
const { fetchApi: getAllUsers, loading: userListLoading } = useFetch(
11+
`${api}/users`,
12+
getOptions,
13+
true
14+
);
15+
const [keyword, setKeyword] = useState('');
16+
const { fetchApi: getSearch, loading: searchLoading } = useFetch(
17+
`${api}/search/users?query=${keyword}`,
18+
getOptions,
19+
true
20+
);
21+
const [currentUsers, setCurrentUsers] = useState([]);
2122

23+
useEffect(() => {
24+
const fetchUsers = async () => {
25+
const resData = await getAllUsers();
26+
if (resData) {
27+
setCurrentUsers(resData.data.users);
2228
}
23-
fetchUsers()
24-
25-
},[])
29+
};
30+
fetchUsers();
31+
}, []);
2632

2733
return (
28-
<>
29-
<SearchField setKeyWord={setKeyWord} getSearch={getSearch} type='users' setCurrent={setCurrentUsers}/>
30-
{(searchLoading | loading)? <div className="element-center center-element mx-auto h-full mt-10 w-[60px]"> <ReactLoading
31-
className="mx-auto"
32-
type="spin"
33-
color="#D9C6A4"
34-
height={40}
35-
width={40}
36-
/></div>:<div className='flex flex-col gap-4 w-full py-8 h-[calc(100vh_-_99px)]'>
37-
{ currentUsers.map(user=> <Indivdual key={user.id} name={user.name}
38-
img={user.imageUrl} track={user.track} followed={true}/>)}
39-
</div>}
34+
<>
35+
<SearchField setKeyWord={setKeyword} getSearch={getSearch} type='users' setCurrent={setCurrentUsers} />
36+
{(searchLoading || userListLoading) ? (
37+
<div className="element-center center-element mx-auto h-full mt-10 w-[60px]">
38+
<ReactLoading type="spin" color="#D9C6A4" height={40} width={40} />
39+
</div>
40+
) : (
41+
<div className='flex flex-col gap-4 w-full py-8 h-[calc(100vh_-_99px)]'>
42+
{currentUsers.map((user) => (
43+
<Individual
44+
key={user.id}
45+
name={user.name}
46+
img={user.imageUrl}
47+
track={user.track}
48+
followed={true}
49+
/>
50+
))}
51+
</div>
52+
)}
4053
</>
41-
)
54+
);
4255
}
4356

44-
export default IndividualsList
57+
export default IndividualsList;

‎src/Components/Individuals/SearchQuery.jsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/Components/Individuals/TrackItem.jsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
/* eslint-disable react/prop-types */
22
/* eslint-disable react/no-unknown-property */
3-
function TrackItem({path,imgPath,click}) {
3+
4+
function TrackItem({ path, imgPath, click }) {
45
return (
5-
<button onClick={()=>click(`${path}`)} className='shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] bg-white px-8 py-5 rounded-2xl element-center flex-col w-[150px] h-[150px] mb-9 justify-between hover:scale-[0.9] transition-all duration-200 hover:bg-opacity-70 '>
6-
<img src={imgPath} alt={`Image`} />
7-
<p className='text-sm text-center font-semibold' >{path}</p>
8-
</button>
9-
)
6+
<button
7+
onClick={() => click(path)}
8+
className='shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] bg-white px-8 py-5 rounded-2xl element-center flex-col w-[150px] h-[150px] mb-9 justify-between hover:scale-[0.9] transition-all duration-200 hover:bg-opacity-70'
9+
>
10+
<img src={imgPath} alt={`Image`} />
11+
<p className='text-sm text-center font-semibold'>{path}</p>
12+
</button>
13+
);
1014
}
1115

12-
export default TrackItem
16+
export default TrackItem;

‎src/Components/Individuals/Tracks.jsx

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
import tracks from "../../fakedata/tracks"
2-
import TrackItem from "./TrackItem"
3-
function Tracks({setTrack}) {
4-
return (
5-
<div className="scroll-y overflow-y-auto custom-scrollbar">
6-
<h2 className="text-xl my-6 font-normal">Choose your technical circle!</h2>
7-
<div className="flex flex-wrap justify-between h-fit w-full ">
8-
{tracks.map((track, index) => {
9-
return <TrackItem key={index} imgPath={track.trackImg} path={track.trackText} click={setTrack} />
10-
})}
11-
</div>
1+
import tracks from '../../fakedata/tracks';
2+
import TrackItem from './TrackItem';
123

4+
function Tracks({ setTrack }) {
5+
return (
6+
<div className="scroll-y overflow-y-auto custom-scrollbar">
7+
<h2 className="text-xl my-6 font-normal">Choose your technical circle!</h2>
8+
<div className="flex flex-wrap justify-between h-fit w-full">
9+
{tracks.map((track, index) => (
10+
<TrackItem
11+
key={index}
12+
imgPath={track.trackImg}
13+
path={track.trackText}
14+
click={setTrack}
15+
/>
16+
))}
17+
</div>
1318
</div>
14-
)
19+
);
1520
}
1621

17-
export default Tracks
22+
export default Tracks;

‎src/Components/InviteRequests/InviteRequestItem.jsx

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/Components/InviteRequests/InviteRequests.jsx

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/Components/Mentors/MentorsChat/MentorsChat.jsx

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,54 @@
1-
import ChatBoxHeader from "../../Chat/ChatBox/ChatBoxHeader"
2-
import SendMessage from "../../Chat/ChatBox/SendMessage"
3-
import { useState } from "react"
4-
import MessageContainer from "../../Chat/ChatBox/MessageContainer/MessageContainer"
5-
import { useEffect } from "react"
1+
/* eslint-disable react/prop-types */
2+
import { useState, useEffect } from 'react';
3+
import ChatBoxHeader from '../../Chat/ChatBox/ChatBoxHeader';
4+
import SendMessage from '../../Chat/ChatBox/SendMessage';
5+
import MessageContainer from '../../Chat/ChatBox/MessageContainer/MessageContainer';
6+
7+
function MentorsChat({ selectedChat }) {
8+
const [messages, setMessages] = useState([
9+
{
10+
img: selectedChat.mentorImage,
11+
text: 'How can I help you?',
12+
time: '6:37 PM',
13+
},
14+
]);
15+
16+
useEffect(() => {
17+
setMessages([
18+
{
19+
img: selectedChat.mentorImage,
20+
text: 'How can I help you?',
21+
time: '6:37 PM',
22+
},
23+
]);
24+
}, [selectedChat]);
625

7-
8-
function MentorsChat({selectedChat}) {
9-
const [messages,setMessages]=useState([
10-
{
11-
img:selectedChat.mentorImage,
12-
text:'How can i help you?',
13-
time:'6:37 PM'
14-
15-
}
16-
])
17-
18-
useEffect(()=>{
19-
setMessages([
20-
{
21-
img:selectedChat.mentorImage,
22-
text:'How can i help you?',
23-
time:'6:37 PM'
24-
25-
}
26-
])
27-
},[selectedChat])
2826
return (
29-
<div className='w-1/4 flex-col h-full flex bg-[rgba(252,250,248,1)] '>
30-
<div className="shadow-[0px_4px_4px_0px_rgba(0,0,0,0.1)]">
31-
<ChatBoxHeader selectedChat={selectedChat}/>
27+
<div className='w-1/4 flex-col h-full flex bg-[rgba(252,250,248,1)]'>
28+
<div className='shadow-[0px_4px_4px_0px_rgba(0,0,0,0.1)]'>
29+
<ChatBoxHeader selectedChat={selectedChat} />
30+
</div>
31+
32+
<div className='pt-9 overflow-y-auto custom-scrollbar'>
33+
<div className='w-44 h-44 bg-white rounded-full mx-auto element-center center-element mb-4'>
34+
<img
35+
src={selectedChat.mentorImage}
36+
className='rounded-full w-[85px]'
37+
alt='profile'
38+
/>
3239
</div>
33-
34-
<div className="pt-9 overflow-y-auto custom-scrollbar">
35-
<div className="w-44 h-44 bg-white rounded-full mx-auto element-center center-element mb-4">
36-
<img src={selectedChat.mentorImage} className=" rounded-full w-[85px]" alt="profile"/>
37-
</div>
38-
<p className="text-xs font-semibold text-center">You follow each other on CodeLink <br></br>He lives in USA </p>
39-
<MessageContainer messages={messages} profileimg={selectedChat.mentorImage} />
40-
41-
</div>
42-
<div className="mt-auto">
43-
<SendMessage setMessages={setMessages} profileimg={selectedChat.mentorImage}/>
44-
45-
</div>
40+
<p className='text-xs font-semibold text-center'>
41+
You follow each other on CodeLink <br />
42+
He lives in USA
43+
</p>
44+
<MessageContainer messages={messages} profileimg={selectedChat.mentorImage} />
45+
</div>
46+
47+
<div className='mt-auto'>
48+
<SendMessage setMessages={setMessages} profileimg={selectedChat.mentorImage} />
49+
</div>
4650
</div>
47-
)
51+
);
4852
}
4953

50-
export default MentorsChat
54+
export default MentorsChat;

‎src/Components/Mentors/MentorsList/MentorsList.jsx

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
11
/* eslint-disable react/prop-types */
2-
import { useState } from "react"
3-
import { useEffect } from "react"
4-
import { getFakeMentors } from "../../../Functions/getFakeMentors"
5-
import SearchField from "../../GlobalComponents/SearchField"
6-
import MentorsListItem from "./MentorsListItem"
2+
import { useState, useEffect } from 'react';
3+
import { getFakeMentors } from '../../../Functions/getFakeMentors';
4+
import SearchField from '../../GlobalComponents/SearchField';
5+
import MentorsListItem from './MentorsListItem';
6+
7+
function MentorsList({ setSelectedChat }) {
8+
const [mentors, setMentors] = useState([]);
9+
10+
useEffect(() => {
11+
const settedMentors = getFakeMentors(10);
12+
setMentors(settedMentors);
13+
}, []);
714

8-
function MentorsList({setSelectedChat}) {
9-
const [mentors,setMentors]=useState([])
10-
useEffect(()=>{
11-
const settedMentors=getFakeMentors(10)
12-
setMentors(settedMentors)
13-
},[])
1415
return (
15-
<div className="w-1/2 border-[1px] border-solid border-[rgba(209,208,208,1)] shadow-[1px_1px_4px_0px_rgba(0,0,0,0.25)]">
16-
<div className="w-full px-12 pt-5 overflow-y-auto h-[calc(100vh_-_99px)] custom-scrollbar pb-4 ">
16+
<div className="w-1/2 border-[1px] border-solid border-[rgba(209,208,208,1)] shadow-[1px_1px_4px_0px_rgba(0,0,0,0.25)]">
17+
<div className="w-full px-12 pt-5 overflow-y-auto h-[calc(100vh_-_99px)] custom-scrollbar pb-4">
1718
<div className="px-4 mb-10">
18-
<SearchField/>
19-
19+
<SearchField />
2020
</div>
21-
<div className=" flex flex-wrap gap-10 ">
22-
{
23-
mentors.map(mentor=><MentorsListItem key={mentor.mentorId} mentor={mentor} setSelectedChat={setSelectedChat}/>)
24-
}
25-
21+
<div className="flex flex-wrap gap-10">
22+
{mentors.map((mentor) => (
23+
<MentorsListItem key={mentor.mentorId} mentor={mentor} setSelectedChat={setSelectedChat} />
24+
))}
2625
</div>
26+
</div>
2727
</div>
28-
</div>
29-
)
28+
);
3029
}
3130

32-
export default MentorsList
31+
export default MentorsList;

0 commit comments

Comments
 (0)