Skip to content

Commit

Permalink
[Feat] Manage friends
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nouakchi
Nouakchi committed May 6, 2024
1 parent 1c80d84 commit e3f1d11
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 11 deletions.
8 changes: 4 additions & 4 deletions app/front-end/src/app/profile/[username]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,11 +203,11 @@ export default function ({ params }: { params: { username: string } })
</div>
<div className='col d-flex flex-column justify-content-end '>
<h4 style={{borderLeft: '1px solid #61627C', borderRight: '1px solid #61627C'}}>Win</h4>
<span style={{borderLeft: '1px solid #61627C', borderRight: '1px solid #61627C'}}>{profile.win_games}%</span>
<span style={{borderLeft: '1px solid #61627C', borderRight: '1px solid #61627C'}}>{((profile.win_games / profile.total_games) * 100).toFixed(1)}%</span>
</div>
<div className='col d-flex flex-column justify-content-end '>
<h4>Lose</h4>
<span>{profile.lose_games}%</span>
<span>{((profile.lose_games / profile.total_games) * 100).toFixed(1)}%</span>
</div>
</div>
</div>
Expand All @@ -225,7 +225,7 @@ export default function ({ params }: { params: { username: string } })
{profile.intro}
</p>
<h2 className='text-center' style={{color: '#ACACAC', fontFamily: 'itim'}}>{profile.quote}</h2>
<ProgressBar className={`${styles.progres_bar} my-5`} now={(profile?.level ?? 0) * 10} label={`${profile.level}`} striped variant="danger" animated/>
<ProgressBar className={`${styles.progres_bar} my-5`} now={(profile?.level ?? 0) * 10} label={`${profile.level} %`} striped variant="danger" animated/>
<hr className=" my-2 mx-2" style={{color: '#61627C', borderWidth: '2px'}}/>
<span style={{color: '#61627C', fontFamily: 'itim'}}>Rank</span>
<div className='d-flex flex-row my-4'>
Expand Down Expand Up @@ -272,7 +272,7 @@ export default function ({ params }: { params: { username: string } })
</InputGroup>
<InputGroup hasValidation className='mb-3'>
<InputGroup.Text style={{backgroundColor: '#2C3143'}}><MdRoundaboutRight color='#FFEBEB'/></InputGroup.Text>
<Form.Control className={`${styles.form_control}`} required as="textarea" placeholder='Intro' aria-label='Intro' defaultValue={parag} style={{backgroundColor: '#2C3143'}}/>
<Form.Control className={`${styles.form_control}`} required type="textarea" placeholder='Intro' aria-label='Intro' defaultValue={parag} style={{backgroundColor: '#2C3143'}}/>
<Form.Control.Feedback type="invalid">
Please talk about yourslef.
</Form.Control.Feedback>
Expand Down
4 changes: 2 additions & 2 deletions app/front-end/src/app/profile/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,11 +203,11 @@ export default function ()
</div>
<div className='col d-flex flex-column justify-content-end '>
<h4 style={{borderLeft: '1px solid #61627C', borderRight: '1px solid #61627C'}}>Win</h4>
<span style={{borderLeft: '1px solid #61627C', borderRight: '1px solid #61627C'}}>{((profile.win_games / profile.total_games) * 100).toFixed(2)}%</span>
<span style={{borderLeft: '1px solid #61627C', borderRight: '1px solid #61627C'}}>{((profile.win_games / profile.total_games) * 100).toFixed(1)}%</span>
</div>
<div className='col d-flex flex-column justify-content-end '>
<h4>Lose</h4>
<span>{((profile.lose_games / profile.total_games) * 100).toFixed(2)}%</span>
<span>{((profile.lose_games / profile.total_games) * 100).toFixed(1)}%</span>
</div>
</div>
</div>
Expand Down
50 changes: 45 additions & 5 deletions app/front-end/src/components/inviteFriend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { TiUserAdd } from "react-icons/ti";
import { IoIosSearch, IoMdCheckmarkCircle, IoIosRemoveCircle } from "react-icons/io";
import { ImUserPlus , ImUserMinus , ImUsers } from "react-icons/im";
import { CgUnblock } from "react-icons/cg";
import { toast } from 'react-toastify';

interface Props{
show: boolean;
Expand All @@ -28,6 +29,7 @@ interface User {
interface Friend_ {
user: User;
is_accepted: boolean;
is_user_from: boolean;
}

export default function InviteFriend( {show, close}: Props) {
Expand Down Expand Up @@ -57,6 +59,7 @@ export default function InviteFriend( {show, close}: Props) {
image_url: friend.user.image_url,
},
is_accepted: friend.is_accepted,
is_user_from: friend.is_user_from
}));

setUsers(transData);
Expand Down Expand Up @@ -94,6 +97,7 @@ export default function InviteFriend( {show, close}: Props) {
image_url: user.image_url,
},
is_accepted: false,
is_user_from: false
}));
setsearchedFriends(transData);

Expand All @@ -105,6 +109,42 @@ export default function InviteFriend( {show, close}: Props) {
console.log('Access token is undefined or falsy');
}

const fetchUser = async (api: string, message: string, username: string) => {
const access = Cookies.get('access');
if (access)
{
try {

const res = await fetch(`http://localhost:8000/api/${api}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${access}`
},
body: JSON.stringify({ username: username })
});

if (!res.ok)
throw new Error('Failed to fetch data');

const data = await res.json();
if (data)
{
if (api === 'friends-remove' || api === 'friends-add')
setsearchedFriends(searchedFriends.filter(friend => friend.user.username !== username));
else if (api === 'friends-accept')
setsearchedPendingFriends(searchedPendingFriends.filter(friend => friend.user.username !== username));
toast.success(`${username} ${message}.`);
}

} catch (error) {
console.error('Error fetching data: ', error);
}
}
else
console.log('Access token is undefined or falsy');
}

useEffect(() => {
if (show)
fetchUsersData();
Expand All @@ -114,7 +154,7 @@ export default function InviteFriend( {show, close}: Props) {
if (users)
{
setsearchedFriends(users.filter(friend => friend.is_accepted));
setsearchedPendingFriends(users.filter(friend => !friend.is_accepted));
setsearchedPendingFriends(users.filter(friend => !friend.is_accepted && friend.is_user_from));
}
}, [users])

Expand Down Expand Up @@ -190,9 +230,9 @@ export default function InviteFriend( {show, close}: Props) {
<div className='col-3 text-start'><Splayer nickname={friend.user.username} id={1} image={'/char3.png'} isConnected={false} /></div>
{
friend.is_accepted ? (
<div className='col-9 text-end'><Button variant="dark">Remove <IoIosRemoveCircle color="#FFEBEB" /></Button></div>
<div className='col-9 text-end' onClick={() => fetchUser('friends-remove', 'removed from friends', friend.user.username)}><Button variant="dark" onClick={() => fetchUser('friends-remove', 'removed from friends', friend.user.username)}>Remove <IoIosRemoveCircle color="#FFEBEB" /></Button></div>
) : (
<div className='col-9 text-end'><Button variant="dark">Invite <TiUserAdd color="#FFEBEB" /></Button></div>
<div className='col-9 text-end' onClick={() => fetchUser('friends-add', 'added to friends',friend.user.username)}><Button variant="dark" onClick={() => fetchUser('friends-add', 'added to friends',friend.user.username)}>Invite <TiUserAdd color="#FFEBEB" /></Button></div>
)
}

Expand Down Expand Up @@ -229,7 +269,7 @@ export default function InviteFriend( {show, close}: Props) {
(
<div key={index} className='row d-flex flex-row d-flex align-items-center justify-content-between px-3 py-1 m-2' style={{ borderRadius: '25px', backgroundColor: '#161625' }}>
<div className='col-3 text-start'><Splayer nickname={friend.user.username} id={1} image={'/char3.png'} isConnected={false} /></div>
<div className='col-9 text-end'><Button variant="dark">Accept <IoMdCheckmarkCircle color="#FFEBEB" /></Button></div>
<div className='col-9 text-end' onClick={() => fetchUser('friends-accept', 'added to friends',friend.user.username)}><Button variant="dark" onClick={() => fetchUser('friends-accept', 'added to friends',friend.user.username)}>Accept <IoMdCheckmarkCircle color="#FFEBEB" /></Button></div>
</div>
)
)
Expand Down Expand Up @@ -263,7 +303,7 @@ export default function InviteFriend( {show, close}: Props) {
(
<div key={index} className='row d-flex flex-row d-flex align-items-center justify-content-between px-3 py-1 m-2' style={{ borderRadius: '25px', backgroundColor: '#161625' }}>
<div className='col-3 text-start'><Splayer nickname={friend.user.username} id={1} image={'/char3.png'} isConnected={false} /></div>
<div className='col-9 text-end'><Button variant="dark">Unblock <CgUnblock color="#FFEBEB" /></Button></div>
<div className='col-9 text-end' onClick={() => fetchUser('friends-unblock', 'unblocked',friend.user.username)}><Button variant="dark" onClick={() => fetchUser('friends-unblock', 'unblocked',friend.user.username)}>Unblock <CgUnblock color="#FFEBEB" /></Button></div>
</div>
)
)
Expand Down

0 comments on commit e3f1d11

Please sign in to comment.