-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: user ranking based on user points
- Loading branch information
Showing
14 changed files
with
298 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { CalendarFold, Trash, SquareArrowOutUpRight } from 'lucide-react'; | ||
| import { Button } from '@/components/ui/button'; | ||
| import Hover from '@/components/app/User/Hover'; | ||
| import Link from 'next/link'; | ||
|
|
||
| export default function Card({ index, user }) { | ||
| return ( | ||
| <div | ||
| className={ | ||
| index === 0 | ||
| ? 'p-[2px] rounded-lg bg-yellow-500' | ||
| : index === 1 | ||
| ? 'p-[2px] rounded-lg bg-zinc-400' | ||
| : index === 2 | ||
| ? 'p-[2px] rounded-lg bg-amber-700' | ||
| : '' | ||
| } | ||
| > | ||
| <div className='p-5 bg-zinc-900 opacity-85 rounded-lg'> | ||
| <div className='flex items-center justify-between'> | ||
| <div className='flex items-start'> | ||
| <div className='mr-3 w-10 h-10 rounded-lg bg-zinc-800'></div> | ||
| <div className='flex flex-col mr-2'> | ||
| <Hover user={user} /> | ||
| <div className='text-xs text-zinc-400'>@{user.username}</div> | ||
| </div> | ||
| </div> | ||
| <Button variant='ghost' size='icon' asChild> | ||
| <Link href={`/app/users/${user.username}`}> | ||
| <SquareArrowOutUpRight className='w-4 h-4' /> | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| <div className='mt-2 mb-3 text-sm'>{user.about}</div> | ||
| <div className='mt-2 flex items-center gap-2 text-xs text-zinc-400'> | ||
| <div className='flex'> | ||
| <CalendarFold className='w-4 h-4 mr-1' /> | ||
| {new Date(user.created_at.T * 1000).toLocaleDateString('tr-TR', { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric' | ||
| })} | ||
| </div> | ||
| {' · '} | ||
| <div className='flex items-center'> | ||
| <Trash className='w-4 h-4 mr-1' /> | ||
| <div className='static'>{user.points} çöp puanı</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -36,4 +36,4 @@ export default function Hover({ user }) { | |
| </HoverCardContent> | ||
| </HoverCard> | ||
| ); | ||
| } | ||
| } | ||
4 changes: 2 additions & 2 deletions
4
client/components/app/UserCard/index.jsx → client/components/app/User/Info.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import { LoaderCircle } from 'lucide-react'; | ||
| import { Button } from '@/components/ui/button'; | ||
| import { useToast } from '@/components/ui/use-toast'; | ||
| import Card from '@/components/app/User/Card'; | ||
|
|
||
| export default function UserList({ fetchUsers }) { | ||
| const [users, setUsers] = useState([]); | ||
| const [offset, setOffset] = useState(10); | ||
| const [hasMoreUser, setHasMoreUser] = useState(true); | ||
| const { toast } = useToast(); | ||
|
|
||
| const loadMoreUsers = async () => { | ||
| if (!hasMoreUser) return; | ||
|
|
||
| const response = await fetchUsers(offset); | ||
| if (!response) { | ||
| toast({ | ||
| title: 'hay aksi, bir şeyler ters gitti!', | ||
| description: | ||
| 'sunucudan yanıt alınamadı. lütfen daha sonra tekrar deneyin.', | ||
| duration: 3000 | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| const newUsers = response.data.users || []; | ||
|
|
||
| if (newUsers.length > 10) { | ||
| setUsers((prevUsers) => [...prevUsers, ...newUsers.slice(0, 10)]); | ||
| } else { | ||
| setUsers((prevUsers) => [...prevUsers, ...newUsers]); | ||
| setHasMoreUser(false); | ||
| } | ||
|
|
||
| setOffset((prevOffset) => prevOffset + 10); | ||
| }; | ||
|
|
||
| useEffect( | ||
| () => { | ||
| const fetchInitialUsers = async () => { | ||
| const response = await fetchUsers(0); | ||
| if (!response) { | ||
| toast({ | ||
| title: 'hay aksi, bir şeyler ters gitti!', | ||
| description: | ||
| 'sunucudan yanıt alınamadı. lütfen daha sonra tekrar deneyin.', | ||
| duration: 3000 | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| const initialUsers = response.data.users || []; | ||
|
|
||
| if (initialUsers.length > 10) { | ||
| setUsers(initialUsers.slice(0, 10)); | ||
| } else { | ||
| setUsers(initialUsers); | ||
| setHasMoreUser(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchInitialUsers(); | ||
| }, | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <div className='flex flex-col gap-2'> | ||
| {users.length > 0 ? ( | ||
| <> | ||
| {users.map((user, index) => ( | ||
| <Card key={user.id} index={index} user={user} /> | ||
| ))} | ||
| {hasMoreUser && ( | ||
| <Button onClick={loadMoreUsers} className='w-full'> | ||
| daha fazla göster | ||
| </Button> | ||
| )} | ||
| </> | ||
| ) : ( | ||
| <LoaderCircle className='mt-3 w-4 h-4 animate-spin self-center' /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.