diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 1758093c..58a09c03 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,84 +1,83 @@ -import Link from 'next/link'; -import { Container } from '@/components/Container'; -import { NavLink } from '@/components/NavLink'; -const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL; +import Link from 'next/link' +import { Container } from '@/components/Container' +import { NavLink } from '@/components/NavLink' +const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL -export function Footer() { +export function Footer () { return ( - ); + ) } diff --git a/src/components/profile/ChallengeCard.jsx b/src/components/profile/ChallengeCard.jsx index 568983fb..25e11327 100644 --- a/src/components/profile/ChallengeCard.jsx +++ b/src/components/profile/ChallengeCard.jsx @@ -1,102 +1,102 @@ -import React, { useEffect, useState } from 'react'; -import { CardDecorator } from '../design/CardDecorator'; -import Link from 'next/link'; -import Skeleton from 'react-loading-skeleton'; -import { EyeIcon, HeartIcon, PuzzlePieceIcon, ThumbUpIcon, ThumbDownIcon } from '@heroicons/react/20/solid'; -import request from '@/utils/request'; +import React, { useEffect, useState } from 'react' +import { CardDecorator } from '../design/CardDecorator' +import Link from 'next/link' +import Skeleton from 'react-loading-skeleton' +import { EyeIcon, HeartIcon, PuzzlePieceIcon, ThumbUpIcon, ThumbDownIcon } from '@heroicons/react/20/solid' +import request from '@/utils/request' -/** - * @param {import('react').HTMLAttributes & { challenge: {id: string, title: string, category: string, difficulty: string, createdAt: string, creator: string, views: number, likes: number} }} props +/** + * @param {import('react').HTMLAttributes & { challenge: {id: string, title: string, category: string, difficulty: string, createdAt: string, creator: string, views: number, likes: number} }} props * */ const ChallengeCard = (_props) => { - const { challenge, ...props } = _props; - const [creatorPfp, setCreatorPfp] = useState(''); - const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL; + const { challenge, ...props } = _props + const [creatorPfp, setCreatorPfp] = useState('') + const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL // generate code to hit /users endpoint for each challenge creator - const [creator, setCreator] = useState(null); + const [creator, setCreator] = useState(null) useEffect(() => { - async function fetchCreatorData(username) { - const endPoint = `${process.env.NEXT_PUBLIC_API_URL}/users/${username}`; - const result = await request(endPoint, "GET", null); - setCreator(result); + async function fetchCreatorData (username) { + const endPoint = `${process.env.NEXT_PUBLIC_API_URL}/users/${username}` + const result = await request(endPoint, 'GET', null) + setCreator(result) if (result.profileImage) { - setCreatorPfp(result.profileImage); + setCreatorPfp(result.profileImage) } else { - setCreatorPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`); + setCreatorPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`) } } if (challenge && challenge.creator) { - fetchCreatorData(challenge.creator); + fetchCreatorData(challenge.creator) } - }, [challenge]); + }, [challenge]) const dateFormatted = (date) => new Date(date) .toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', - year: 'numeric', - }); + year: 'numeric' + }) const colorBG = { - 'BEGINNER': 'group-hover:bg-blue-500', - 'EASY': 'group-hover:bg-green-500', - 'MEDIUM': 'group-hover:bg-orange-500', - 'HARD': 'group-hover:bg-red-500', - 'INSANE': 'group-hover:bg-purple-500', - }; + BEGINNER: 'group-hover:bg-blue-500', + EASY: 'group-hover:bg-green-500', + MEDIUM: 'group-hover:bg-orange-500', + HARD: 'group-hover:bg-red-500', + INSANE: 'group-hover:bg-purple-500' + } const colorText = { - 'BEGINNER': 'bg-blue-500 text-blue-50', - 'EASY': 'bg-green-500 text-green-50', - 'MEDIUM': 'bg-orange-500 text-orange-50', - 'HARD': 'bg-red-500 text-red-50', - 'INSANE': 'bg-purple-500 text-purple-50', - }; + BEGINNER: 'bg-blue-500 text-blue-50', + EASY: 'bg-green-500 text-green-50', + MEDIUM: 'bg-orange-500 text-orange-50', + HARD: 'bg-red-500 text-red-50', + INSANE: 'bg-purple-500 text-purple-50' + } const colorBorder = { - 'BEGINNER': 'border-blue-500', - 'EASY': 'border-green-500', - 'MEDIUM': 'border-orange-500', - 'HARD': 'border-red-500', - 'INSANE': 'border-purple-500', - }; + BEGINNER: 'border-blue-500', + EASY: 'border-green-500', + MEDIUM: 'border-orange-500', + HARD: 'border-red-500', + INSANE: 'border-purple-500' + } return ( challenge && ( - -
-

{challenge.title}

+ +
+

{challenge.title}

-
- {challenge.upvotes !== undefined ? challenge.upvotes : } - {challenge.downvotes !== undefined ? challenge.downvotes : } +
+ {challenge.upvotes !== undefined ? challenge.upvotes : } + {challenge.downvotes !== undefined ? challenge.downvotes : }
-
+
Profile Picture @{challenge.creator} {creator && creator.role === 'ADMIN' && ( - + )} {creator && creator.role === 'PRO' && ( - - - )} + + + )}
-
- - {challenge.category} +
+ + {challenge.category} {challenge.difficulty?.toLowerCase() || } -
- - {challenge.views !== undefined ? challenge.views : } - -
+
+ + {challenge.views !== undefined ? challenge.views : } + +
) || ( @@ -107,7 +107,7 @@ const ChallengeCard = (_props) => {
) - ); -}; + ) +} -export default ChallengeCard; \ No newline at end of file +export default ChallengeCard