Skip to content

Commit bf3cdde

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
enhance home components formatte
1 parent 938a44f commit bf3cdde

File tree

8 files changed

+173
-144
lines changed

8 files changed

+173
-144
lines changed

‎src/Components/Home/FriendsList/FriendsList.jsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
import MyFriends from "./MyFriends/MyFriends"
2-
import Requests from "./Requests/Requests"
1+
import Requests from './Requests/Requests';
32

4-
function FriendsList({isFixed}) {
3+
function FriendsList({ isFixed }) {
54
return (
6-
<div className="w-1/4">
7-
<div className={`w-full ${!isFixed?'':'fixed !w-1/4 top-0 transform '} `}>
8-
<Requests/>
5+
<div className={`w-1/4 ${isFixed ? 'fixed !w-1/4 top-0 transform' : ''}`}>
6+
<Requests />
97
</div>
10-
</div>
11-
12-
)
8+
);
139
}
1410

15-
export default FriendsList
11+
export default FriendsList;

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

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
1-
import { imgLink } from '../../../../api'
2-
import { transferDate } from '../../../../Functions/transferDate'
3-
import RespondToInvite from './RespondToInvite'
4-
function RequestItem({request}) {
1+
/* eslint-disable react/prop-types */
2+
import { imgLink } from '../../../../api';
3+
import { transferDate } from '../../../../Functions/transferDate';
4+
import RespondToInvite from './RespondToInvite';
5+
6+
function RequestItem({ request }) {
57
return (
6-
<div className='flex justify-between items-center py-2 '>
7-
<div className='flex gap-4'>
8-
<img src={`${imgLink}/${request.team.imageUrl}`} alt='profile img' className='align-middle justify-self-center w-14 h-14 rounded-full'/>
9-
<div>
10-
<h5 className='font-semibold text-sm mb-3'>you are invited to join {request.team.name}</h5>
11-
<p className='text-xs'>{transferDate(request.created_at)}</p>
12-
</div>
8+
<div className="flex justify-between items-center py-2">
9+
<div className="flex gap-4">
10+
<img
11+
src={`${imgLink}/${request.team.imageUrl}`}
12+
alt="Profile Image"
13+
className="align-middle justify-self-center w-14 h-14 rounded-full"
14+
/>
15+
<div>
16+
<h5 className="font-semibold text-sm mb-3">
17+
You are invited to join {request.team.name}
18+
</h5>
19+
<p className="text-xs">{transferDate(request.created_at)}</p>
1320
</div>
14-
<RespondToInvite request={request} response='accept'/>
15-
<RespondToInvite request={request} response='reject'/>
16-
17-
21+
</div>
22+
<RespondToInvite request={request} response="accept" />
23+
<RespondToInvite request={request} response="reject" />
1824
</div>
19-
)
25+
);
2026
}
2127

22-
export default RequestItem
28+
export default RequestItem;

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

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,62 @@
1-
import { useEffect, useState } from "react";
1+
import { useEffect, useState } from "react";
22
import { useSelector } from "react-redux";
33
import { api } from "../../../../api";
44
import useFetch from "../../../../CustomHooks/useFetch";
55
import { getOptions } from "../../../../options";
66
import RequestItem from "./RequestItem";
77
import ReactLoading from 'react-loading';
88

9-
let init=false
9+
let init = false;
10+
1011
function Requests() {
11-
const {fetchApi:getJoinRequest,loading}=useFetch(`${api}/invite-requests`,getOptions,true)
12-
const user=useSelector(state=>state.auth.user)
13-
const [requests,setRequest]=useState([])
14-
useEffect(()=>{
15-
const fetchData=async()=>{
16-
const resData= await getJoinRequest()
17-
if(resData.ok && user && !init){
18-
setRequest(resData.data.invite_requests)
19-
init=true
20-
}
21-
}
22-
fetchData()
23-
},[user])
12+
const { fetchApi: getJoinRequest, loading } = useFetch(
13+
`${api}/invite-requests`,
14+
getOptions,
15+
true
16+
);
17+
const user = useSelector((state) => state.auth.user);
18+
const [requests, setRequests] = useState([]);
19+
20+
useEffect(() => {
21+
const fetchData = async () => {
22+
const resData = await getJoinRequest();
23+
if (resData.ok && user && !init) {
24+
setRequests(resData.data.invite_requests);
25+
init = true;
26+
}
27+
};
28+
fetchData();
29+
}, [user]);
30+
2431
return (
2532
<div className="border-b-4 border-b-white">
26-
<div className="flex justify-between items-center pl-6 pt-9 ">
33+
<div className="flex justify-between items-center pl-6 pt-9">
2734
<h3 className="font-bold text-xl text-mulish text-customblack">Invite to teams requests</h3>
2835
</div>
29-
{loading?<div className="h-20 py-10 center-element"><ReactLoading className="mx-auto" type={'spin'} color={"#D9C6A4"} height={30} width={30} /></div>:<div className="flex flex-col gap-3 mt-10">
30-
{ requests.length>0?
31-
requests.map((request, index) => (
32-
<div
33-
key={index}
34-
className={`${
35-
index % 2 == 0 ? 'bg-white' : ''
36-
} p-4 rounded-md`}
37-
>
38-
<RequestItem request={request} />
39-
40-
</div>
41-
)):<p className="pt-3 py-6 text-center">There are no invitations to join teams</p>}
42-
</div>}
36+
{loading ? (
37+
<div className="h-20 py-10 center-element">
38+
<ReactLoading className="mx-auto" type={'spin'} color={"#D9C6A4"} height={30} width={30} />
39+
</div>
40+
) : (
41+
<div className="flex flex-col gap-3 mt-10">
42+
{requests.length > 0 ? (
43+
requests.map((request, index) => (
44+
<div
45+
key={index}
46+
className={`${
47+
index % 2 === 0 ? 'bg-white' : ''
48+
} p-4 rounded-md`}
49+
>
50+
<RequestItem request={request} />
51+
</div>
52+
))
53+
) : (
54+
<p className="pt-3 py-6 text-center">There are no invitations to join teams</p>
55+
)}
56+
</div>
57+
)}
4358
</div>
4459
);
4560
}
4661

47-
export default Requests;
62+
export default Requests;

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

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,53 @@
11
/* eslint-disable react/prop-types */
2-
3-
import { api } from "../../../../api"
4-
import useFetch from "../../../../CustomHooks/useFetch"
2+
import { api } from '../../../../api';
3+
import useFetch from '../../../../CustomHooks/useFetch';
54
import ReactLoading from 'react-loading';
6-
import { postOptions } from "../../../../options";
7-
import {useNavigate} from 'react-router-dom'
5+
import { postOptions } from '../../../../options';
6+
import { useNavigate } from 'react-router-dom';
87

8+
function RespondToInvite({ response, request }) {
9+
const { fetchApi: respondToJoin, loading } = useFetch(
10+
`${api}/invite-requests/${response}-invite/${request.id}`,
11+
postOptions
12+
);
13+
const navigate = useNavigate();
914

10-
function RespondToInvite({response,request}) {
11-
const {fetchApi:respondToJoin,loading}=useFetch(`${api}/invite-requests/${response}-invite/${request.id}`,postOptions)
12-
const navigate=useNavigate()
13-
const clickHandler=async()=>{
14-
const resData=await respondToJoin()
15-
if(resData.ok){
16-
navigate(0)
17-
}
15+
const clickHandler = async () => {
16+
const resData = await respondToJoin();
17+
if (resData.ok) {
18+
navigate(0);
1819
}
19-
const style=' py-2 px-4 rounded-xl text-sm font-medium transition-all duration-300 border-2 border-solid'
20+
};
21+
22+
const style =
23+
'py-2 px-4 rounded-xl text-sm font-medium transition-all duration-300 border-2 border-solid';
24+
2025
return (
2126
<div className="flex">
22-
{!loading?<button onClick={clickHandler} className={response=='accept'?`bg-primary mr-[10px] text-white border-transparent ${style}
23-
hover:border-primary hover:bg-white hover:text-primary `
24-
:`bg-white text-primary border-primary ${style} hover:bg-primary
25-
hover:text-white `}>{response=='accept'?'Accept':'Reject'}</button>:
26-
<div className="element-center center-element mx-auto w-[60px]">
27+
{!loading ? (
28+
<button
29+
onClick={clickHandler}
30+
className={
31+
response === 'accept'
32+
? `bg-primary mr-[10px] text-white border-transparent ${style} hover:border-primary hover:bg-white hover:text-primary`
33+
: `bg-white text-primary border-primary ${style} hover:bg-primary hover:text-white`
34+
}
35+
>
36+
{response === 'accept' ? 'Accept' : 'Reject'}
37+
</button>
38+
) : (
39+
<div className="element-center center-element mx-auto w-[60px]">
2740
<ReactLoading
28-
className="mx-auto"
29-
type="spin"
30-
color="#D9C6A4"
31-
height={40}
32-
width={40}
33-
/></div>
34-
35-
}
36-
41+
className="mx-auto"
42+
type="spin"
43+
color="#D9C6A4"
44+
height={40}
45+
width={40}
46+
/>
47+
</div>
48+
)}
3749
</div>
38-
)
50+
);
3951
}
4052

41-
export default RespondToInvite
53+
export default RespondToInvite;

‎src/Components/Home/HomeContent/HomeContent.jsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import CreatePost from "../../Posts/CreatePost"
2-
import Posts from "../../Posts/Posts"
3-
4-
1+
import CreatePost from '../../Posts/CreatePost';
2+
import Posts from '../../Posts/Posts';
53

64
function HomeContent() {
75
return (
8-
<div className="w-1/2 h-full shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] min-h-[calc(100vh_-_99px)] bg-[rgba(252,250,248,1)]">
9-
<div className="w-full 2xl:w-[700px] 2xl:mx-auto !2xl:px-0 px-9">
10-
<CreatePost/>
11-
<Posts/>
12-
</div>
6+
<div className="w-1/2 h-full shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] min-h-[calc(100vh_-_99px)] bg-[rgba(252,250,248,1)]">
7+
<div className="w-full 2xl:w-[700px] 2xl:mx-auto !2xl:px-0 px-9">
8+
<CreatePost />
9+
<Posts />
10+
</div>
1311
</div>
14-
)
12+
);
1513
}
1614

17-
export default HomeContent
15+
export default HomeContent;

‎src/Components/Home/HomeSideBar/BoxItem.jsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { Link } from 'react-router-dom';
2-
function BoxItem({path,imgPath,text}) {
2+
3+
function BoxItem({ path, imgPath, text }) {
34
return (
4-
<Link to={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 '>
5-
<img src={imgPath} alt={`Image`} />
6-
<p className='text-sm text-center font-semibold' >{text}</p>
7-
</Link>
8-
)
5+
<Link
6+
to={path}
7+
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"
8+
>
9+
<img src={imgPath} alt="Image" />
10+
<p className="text-sm text-center font-semibold">{text}</p>
11+
</Link>
12+
);
913
}
1014

11-
export default BoxItem
15+
export default BoxItem;

‎src/Components/Home/HomeSideBar/HomeSideBar.jsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import { Outlet } from 'react-router-dom';
22

3-
4-
5-
function HomeSideBar({isFixed}) {
3+
function HomeSideBar({ isFixed }) {
64
return (
7-
<div className={` mx-auto w-1/4 ${!isFixed?'':'fixed top-0 right-0 '} scroll-y overflow-y-auto custom-scrollbar h-screen `}>
8-
<div className={`w-[408px] mx-auto `}>
9-
<div className='px-[35px] pt-[32px] flex flex-wrap justify-between h-fit w-full'>
10-
<Outlet/>
11-
5+
<div
6+
className={`mx-auto w-1/4 ${isFixed ? 'fixed top-0 right-0' : ''} scroll-y overflow-y-auto custom-scrollbar h-screen`}
7+
>
8+
<div className="w-[408px] mx-auto">
9+
<div className="px-[35px] pt-[32px] flex flex-wrap justify-between h-fit w-full">
10+
<Outlet />
11+
</div>
12+
</div>
1213
</div>
13-
</div>
14-
</div>
1514
);
1615
}
1716

18-
export default HomeSideBar;
17+
export default HomeSideBar;

‎src/Components/Home/HomeSideBar/SelectionsSearch.jsx

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
1-
import FriendsImg from '../../../assets/images/home/Refer a friend-pana 2.svg'
2-
import MentorsImg from '../../../assets/images/home/Product presentation-pana 2.svg'
3-
import TeamImg from '../../../assets/images/home/Creative team-pana 2.svg'
4-
import ResourcesImg from '../../../assets/images/home/Pair programming-cuate 2.svg'
5-
import communities from '../../../assets/images/home/Connected world-pana 1 (1).svg'
6-
import Hackathons from '../../../assets/images/home/Team goals-amico 1 (1).svg'
1+
import FriendsImg from '../../../assets/images/home/Refer a friend-pana 2.svg';
2+
import MentorsImg from '../../../assets/images/home/Product presentation-pana 2.svg';
3+
import TeamImg from '../../../assets/images/home/Creative team-pana 2.svg';
4+
import ResourcesImg from '../../../assets/images/home/Pair programming-cuate 2.svg';
5+
import CommunitiesImg from '../../../assets/images/home/Connected world-pana 1 (1).svg';
6+
import HackathonsImg from '../../../assets/images/home/Team goals-amico 1 (1).svg';
77
import BoxItem from './BoxItem';
8-
import SearchField from '../../GlobalComponents/SearchField'
8+
import SearchField from '../../GlobalComponents/SearchField';
99

1010
function SelectionsSearch() {
11-
const links = [
12-
{ imgPath: FriendsImg, text: 'Individuals',path:'individuals' },
13-
{ imgPath: MentorsImg, text: 'Mentors',path:'/mentors' },
14-
{ imgPath: TeamImg, text: 'Teams',path:'/teams' },
15-
{ imgPath: ResourcesImg, text: 'Resources', path:'/resources' },
16-
{ imgPath: communities,text:'Communities',path:'/communities'},
17-
{ imgPath: Hackathons,text:'hackathons',path:'/hackathons'},
11+
const links = [
12+
{ imgPath: FriendsImg, text: 'Individuals', path: 'individuals' },
13+
{ imgPath: MentorsImg, text: 'Mentors', path: '/mentors' },
14+
{ imgPath: TeamImg, text: 'Teams', path: '/teams' },
15+
{ imgPath: ResourcesImg, text: 'Resources', path: '/resources' },
16+
{ imgPath: CommunitiesImg, text: 'Communities', path: '/communities' },
17+
{ imgPath: HackathonsImg, text: 'Hackathons', path: '/hackathons' },
18+
];
1819

19-
20-
];
2120
return (
22-
<>
23-
<SearchField/>
24-
<p className='text-xl my-6 font-normal'>Choose what you want!</p>
25-
<div className='flex flex-wrap justify-between h-fit w-full'>
26-
{links.map((link, index) => (
27-
<BoxItem key={index} path={link.path} text={link.text} imgPath={link.imgPath}/>
28-
))}
29-
</div>
30-
</>
31-
)
21+
<>
22+
<SearchField />
23+
<p className='text-xl my-6 font-normal'>Choose what you want!</p>
24+
<div className='flex flex-wrap justify-between h-fit w-full'>
25+
{links.map((link, index) => (
26+
<BoxItem key={index} path={link.path} text={link.text} imgPath={link.imgPath} />
27+
))}
28+
</div>
29+
</>
30+
);
3231
}
3332

34-
export default SelectionsSearch
33+
export default SelectionsSearch;

0 commit comments

Comments
 (0)