Skip to content

Commit a90a680

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
fix two bugs
1 parent e83a9e1 commit a90a680

28 files changed

+381
-467
lines changed

‎src/Components/GlobalComponents/Header.jsx

+25-24
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
import logo from '../../assets/images/logo.svg';
2-
import StartPageNav from './NavBar';
1+
import logo from '../../assets/images/logo.svg'
2+
import StartPageNav from './NavBar'
33
import { ToastContainer } from 'react-toastify';
4-
import 'react-toastify/dist/ReactToastify.css';
4+
import 'react-toastify/dist/ReactToastify.css';
5+
56

67
function Header() {
8+
79
return (
8-
<div className='py-7 bg-white border-b-[1.5px] border-b-[rgba(227, 227, 227, 1)] border-solid'>
9-
<div className='container flex justify-between items-center'>
10-
<h1 className='flex text-3xl gap-5 font-bold items-center'>
11-
<img src={logo} className='w-[54px]' alt='CodeLink Logo' /> CodeLink
12-
</h1>
13-
<StartPageNav />
14-
</div>
15-
<ToastContainer
16-
position="top-left"
17-
autoClose={2000}
18-
hideProgressBar={false}
19-
newestOnTop={false}
20-
closeOnClick
21-
rtl={false}
22-
pauseOnFocusLoss
23-
draggable
24-
pauseOnHover
25-
theme="light"
26-
/>
10+
<div className=' py-7 bg-white border-b-[1.5px] border-b-[rgba(227, 227, 227, 1)] border-solid'>
11+
<div className='container flex justify-between items-center'>
12+
<h1 className='flex text-3xl gap-5 font-bold items-center'><img src={logo} className='w-[54px]'/> CodeLink</h1>
13+
<StartPageNav/>
14+
15+
</div>
16+
<ToastContainer
17+
position="top-left"
18+
autoClose={2000}
19+
hideProgressBar={false}
20+
newestOnTop={false}
21+
closeOnClick
22+
rtl={false}
23+
pauseOnFocusLoss
24+
draggable
25+
pauseOnHover
26+
theme="light"
27+
/>
2728
</div>
28-
);
29+
)
2930
}
3031

31-
export default Header;
32+
export default Header

‎src/Components/GlobalComponents/LandingScreen.jsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import landingimage from '../../assets/images/global/Team spirit-cuate 1.svg';
2-
3-
function LandingScreen({ title }) {
1+
import landingimage from '../../assets/images/global/Team spirit-cuate 1.svg'
2+
function LandingScreen({title}) {
43
return (
5-
<div className="w-full h-full flex flex-col items-center justify-center shadow-[1px_1px_4px_0px_rgba(0,0,0,0.25)] border-[rgba(209,208,208,1)]">
6-
<h4 className="font-semibold text-4xl">{title}</h4>
7-
<h3 className="text-xl font-semibold">We are happy to have you with us and wish you a happy trip</h3>
8-
<img src={landingimage} alt="landing" />
4+
<div className="w-full h-full element-center center-element shadow-[1px_1px_4px_0px_rgba(0,0,0,0.25)] flex-col border-[rgba(209,208,208,1)]">
5+
<h4 className='font-semibold text-4xl'>{title}</h4>
6+
<h3 className='text-xl font-semibold'>We are happy to have you with us and wish you a happy trip</h3>
7+
<img src={landingimage} alt='landing' />
98
</div>
10-
);
9+
10+
)
1111
}
1212

13-
export default LandingScreen;
13+
export default LandingScreen

‎src/Components/GlobalComponents/NavBar.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useEffect } from 'react';
2-
import { useSelector, useDispatch } from 'react-redux';
3-
import { NavLink } from 'react-router-dom';
4-
import { setSavedUser } from '../../store/user/userSlice';
1+
import { useEffect } from "react";
2+
import { useSelector, useDispatch } from "react-redux";
3+
import { NavLink } from "react-router-dom";
4+
import { setSavedUser } from "../../store/user/userSlice";
55

66
function StartPageNav() {
77
const userData = useSelector((state) => state.auth);
@@ -61,4 +61,4 @@ function StartPageNav() {
6161
);
6262
}
6363

64-
export default StartPageNav;
64+
export default StartPageNav;

‎src/Components/GlobalComponents/SearchField.jsx

+21-24
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,36 @@
1-
import PropTypes from 'prop-types';
2-
import searchIcon from '../../assets/images/global/searchIcon.svg';
1+
/* eslint-disable react/prop-types */
2+
import searchIcon from '../../assets/images/global/searchIcon.svg'
33

4-
function SearchField({ setKeyWord, getSearch, setCurrent, type }) {
5-
const changeHandler = async (e) => {
4+
function SearchField({setKeyWord,getSearch,setCurrent,type}) {
5+
6+
7+
const changeHandler=async(e)=>{
68
setKeyWord(e.target.value);
7-
const resData = await getSearch();
8-
if (resData.ok) {
9-
if (type === 'users') {
10-
setCurrent(resData.data.users);
11-
} else if (type === 'teams') {
12-
setCurrent(resData.data.teams);
13-
}
9+
const resData=await getSearch();
10+
if(resData.ok && type=='users'){
11+
setCurrent(resData.data.users)
12+
}
13+
else if(resData.ok && type=='teams'){
14+
setCurrent(resData.data.teams)
1415
}
15-
};
1616

17+
18+
19+
20+
}
1721
return (
18-
<div className="relative w-full bg-white rounded-2xl shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)]">
22+
<div className="relative w-full bg-white rounded-2xl shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] ">
1923
<input
2024
onChange={changeHandler}
2125
type="text"
2226
placeholder="Search..."
23-
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"
27+
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"
2428
/>
2529
<div className="absolute inset-y-0 left-0 flex items-center pl-2">
26-
<img src={searchIcon} alt="Search Icon" />
30+
<img src={searchIcon} />
2731
</div>
2832
</div>
29-
);
33+
)
3034
}
3135

32-
SearchField.propTypes = {
33-
setKeyWord: PropTypes.func.isRequired,
34-
getSearch: PropTypes.func.isRequired,
35-
setCurrent: PropTypes.func.isRequired,
36-
type: PropTypes.string.isRequired,
37-
};
38-
39-
export default SearchField;
36+
export default SearchField

‎src/Components/GlobalComponents/UploadImage.jsx

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1-
import { useRef } from 'react';
1+
/* eslint-disable react/prop-types */
22

3-
function UploadImage({ uploadIcon, value, setFormData, formData, setUploadFromDevice }) {
4-
const imageRef = useRef();
3+
import { useEffect, useRef } from "react";
54

6-
const imageChange = (e) => {
5+
function UploadImage({uploadIcon,value,setFormData,formData,setUploadFromDevice}) {
6+
const imageRef=useRef()
7+
const imageChange = (e) => {
78
if (e.target.files && e.target.files.length > 0) {
8-
setFormData({ ...formData, [value]: e.target.files[0] });
9-
setUploadFromDevice(true);
9+
setFormData({...formData,[value]:e.target.files[0]})
10+
setUploadFromDevice(true)
1011
}
1112
};
1213

1314
return (
1415
<div className='flex'>
1516
<label htmlFor='file-input' className='cursor-pointer'>
16-
<img src={uploadIcon} alt='Upload Icon' />
17-
</label>
18-
<input id='file-input' className='hidden' type='file' ref={imageRef} onChange={imageChange} />
17+
<img src={uploadIcon}/>
18+
</label>
19+
<input id="file-input" className='hidden' type="file" ref={imageRef} onChange={imageChange}/>
20+
21+
1922
</div>
20-
);
23+
)
2124
}
2225

23-
export default UploadImage;
26+
export default UploadImage

‎src/Components/GlobalComponents/UserComponent.jsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable react/prop-types */
2-
3-
function UserComponent({ user }) {
2+
function UserComponent({user}) {
43
return (
5-
<div className="w-[141px] h-[141px] shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] bg-white border-[rgba(235,235,235,1)] border-[1px] rounded-[17px] mb-2">
6-
<img src={user.userImg} alt={user.userName} className="mx-auto mt-5 mb-2 object-cover" />
7-
<h5 className="text-sm font-semibold text-center">{user.userName}</h5>
8-
<p className="text-[10px] text-center">{user.track}</p>
9-
</div>
10-
);
4+
<div className="w-[141px] h-[141px] shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)]
5+
bg-white border-[rgba(235,235,235,1)] border-[1px] rounded-[17px] mb-2">
6+
<img src={user.userImg} className="mx-auto mt-5 mb-2 object-cover " />
7+
<h5 className="text-sm font-semibold text-center">{user.userName}</h5>
8+
<p className='text-[10px] text-center'>{user.track}</p>
9+
</div>
10+
)
1111
}
1212

13-
export default UserComponent;
13+
export default UserComponent

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

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import Requests from './Requests/Requests';
1+
import MyFriends from "./MyFriends/MyFriends"
2+
import Requests from "./Requests/Requests"
23

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

11-
export default FriendsList;
15+
export default FriendsList

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

+6-27
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<<<<<<< HEAD
21
import { useNavigate } from 'react-router-dom'
32
import { imgLink } from '../../../../api'
43
import { transferDate } from '../../../../Functions/transferDate'
@@ -13,33 +12,13 @@ function RequestItem({request}) {
1312
<h5 className='font-semibold text-sm mb-3 cursor-pointer' onClick={()=>navigate(`/teams/${request.team.id}`)}>you are invited to join {request.team.name}</h5>
1413
<p className='text-xs'>{transferDate(request.created_at)}</p>
1514
</div>
16-
=======
17-
/* eslint-disable react/prop-types */
18-
import { imgLink } from '../../../../api';
19-
import { transferDate } from '../../../../Functions/transferDate';
20-
import RespondToInvite from './RespondToInvite';
21-
22-
function RequestItem({ request }) {
23-
return (
24-
<div className="flex justify-between items-center py-2">
25-
<div className="flex gap-4">
26-
<img
27-
src={`${imgLink}/${request.team.imageUrl}`}
28-
alt="Profile Image"
29-
className="align-middle justify-self-center w-14 h-14 rounded-full"
30-
/>
31-
<div>
32-
<h5 className="font-semibold text-sm mb-3">
33-
You are invited to join {request.team.name}
34-
</h5>
35-
<p className="text-xs">{transferDate(request.created_at)}</p>
36-
>>>>>>> 93208e360a5a2ee3c21bdc27c1653278e4674cae
3715
</div>
38-
</div>
39-
<RespondToInvite request={request} response="accept" />
40-
<RespondToInvite request={request} response="reject" />
16+
<RespondToInvite request={request} response='accept'/>
17+
<RespondToInvite request={request} response='reject'/>
18+
19+
4120
</div>
42-
);
21+
)
4322
}
4423

45-
export default RequestItem;
24+
export default RequestItem

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

+31-46
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,47 @@
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;
10-
9+
let init=false
1110
function Requests() {
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-
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])
3124
return (
3225
<div className="border-b-4 border-b-white">
33-
<div className="flex justify-between items-center pl-6 pt-9">
26+
<div className="flex justify-between items-center pl-6 pt-9 ">
3427
<h3 className="font-bold text-xl text-mulish text-customblack">Invite to teams requests</h3>
3528
</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-
)}
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>}
5843
</div>
5944
);
6045
}
6146

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

0 commit comments

Comments
 (0)