Skip to content

Commit e83a9e1

Browse files
add require auth to profile
2 parents daafc0d + 93208e3 commit e83a9e1

27 files changed

+523
-383
lines changed

README.md

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,62 @@
1-
# React + Vite
1+
# Project Title
2+
3+
React Application with React Router, Redux Toolkit, and Tailwind CSS,emoji-mart,react-loading,react-otp-input,react-modal
4+
5+
## Description
6+
7+
our application with popular libraries and tools such as React Router, Redux Toolkit, and Tailwind CSS.
8+
9+
## Prerequisites
10+
11+
Before you begin, ensure you have met the following requirements:
12+
13+
- Node.js and npm installed on your development machine.
14+
15+
## Features
16+
17+
- **React**: A JavaScript library for building user interfaces.
18+
- **React Router**: routing for React applications and make application spa.
19+
- **Redux Toolkit**: The official, opinionated, batteries-included toolset for efficient Redux development.
20+
- **Tailwind CSS**: CSS framework
21+
22+
## Getting Started
23+
24+
1-to download project
25+
-cd your-project
26+
27+
2-Install the dependencies:
28+
-npm install
29+
30+
3-npm start
31+
-Start the development server:npm run dev
32+
33+
## Project Structure
34+
35+
src/
36+
37+
components: React components.
38+
39+
pages: pages of application.
40+
41+
router: routes of application.
42+
43+
assets:images of application.
44+
45+
App.jsx: The main application component.
46+
47+
main.jsx: Application entry point.
48+
49+
functions:contain main functions in application.
50+
51+
customhooks:contain custom hooks used in application.
52+
53+
54+
api:contains base url of api.
55+
56+
options:contains get and post options
57+
58+
store:contains store of state managment
59+
260

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
461

5-
Currently, two official plugins are available:
662

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
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';
5-
4+
import 'react-toastify/dist/ReactToastify.css';
65

76
function Header() {
8-
97
return (
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-
/>
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+
/>
2827
</div>
29-
)
28+
);
3029
}
3130

32-
export default Header
31+
export default Header;
Lines changed: 9 additions & 9 deletions
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-
function LandingScreen({title}) {
1+
import landingimage from '../../assets/images/global/Team spirit-cuate 1.svg';
2+
3+
function LandingScreen({ title }) {
34
return (
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' />
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" />
89
</div>
9-
10-
)
10+
);
1111
}
1212

13-
export default LandingScreen
13+
export default LandingScreen;

src/Components/GlobalComponents/NavBar.jsx

Lines changed: 5 additions & 5 deletions
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;
Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
1-
/* eslint-disable react/prop-types */
2-
import searchIcon from '../../assets/images/global/searchIcon.svg'
1+
import PropTypes from 'prop-types';
2+
import searchIcon from '../../assets/images/global/searchIcon.svg';
33

4-
function SearchField({setKeyWord,getSearch,setCurrent,type}) {
5-
6-
7-
const changeHandler=async(e)=>{
4+
function SearchField({ setKeyWord, getSearch, setCurrent, type }) {
5+
const changeHandler = async (e) => {
86
setKeyWord(e.target.value);
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)
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+
}
1514
}
15+
};
1616

17-
18-
19-
20-
}
2117
return (
22-
<div className="relative w-full bg-white rounded-2xl shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] ">
18+
<div className="relative w-full bg-white rounded-2xl shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)]">
2319
<input
2420
onChange={changeHandler}
2521
type="text"
2622
placeholder="Search..."
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"
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"
2824
/>
2925
<div className="absolute inset-y-0 left-0 flex items-center pl-2">
30-
<img src={searchIcon} />
26+
<img src={searchIcon} alt="Search Icon" />
3127
</div>
3228
</div>
33-
)
29+
);
3430
}
3531

36-
export default SearchField
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;
Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
/* eslint-disable react/prop-types */
1+
import { useRef } from 'react';
22

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

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

1413
return (
1514
<div className='flex'>
1615
<label htmlFor='file-input' className='cursor-pointer'>
17-
<img src={uploadIcon}/>
18-
</label>
19-
<input id="file-input" className='hidden' type="file" ref={imageRef} onChange={imageChange}/>
20-
21-
16+
<img src={uploadIcon} alt='Upload Icon' />
17+
</label>
18+
<input id='file-input' className='hidden' type='file' ref={imageRef} onChange={imageChange} />
2219
</div>
23-
)
20+
);
2421
}
2522

26-
export default UploadImage
23+
export default UploadImage;
Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable react/prop-types */
2-
function UserComponent({user}) {
2+
3+
function UserComponent({ user }) {
34
return (
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-
)
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+
);
1111
}
1212

13-
export default UserComponent
13+
export default UserComponent;
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: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< HEAD
12
import { useNavigate } from 'react-router-dom'
23
import { imgLink } from '../../../../api'
34
import { transferDate } from '../../../../Functions/transferDate'
@@ -12,13 +13,33 @@ function RequestItem({request}) {
1213
<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>
1314
<p className='text-xs'>{transferDate(request.created_at)}</p>
1415
</div>
15-
</div>
16-
<RespondToInvite request={request} response='accept'/>
17-
<RespondToInvite request={request} response='reject'/>
18-
16+
=======
17+
/* eslint-disable react/prop-types */
18+
import { imgLink } from '../../../../api';
19+
import { transferDate } from '../../../../Functions/transferDate';
20+
import RespondToInvite from './RespondToInvite';
1921

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
37+
</div>
38+
</div>
39+
<RespondToInvite request={request} response="accept" />
40+
<RespondToInvite request={request} response="reject" />
2041
</div>
21-
)
42+
);
2243
}
2344

24-
export default RequestItem
45+
export default RequestItem;

0 commit comments

Comments
 (0)