task/ya-begitulha

.env.example

@@ -0,0 +1,2 @@
+VITE_API_URL=http://localhost:1337/api
+VITE_COOKIE_DOMAIN=localhost

.env.production

@@ -0,0 +1,2 @@
+VITE_API_URL=https://api.katitb22.com/api
+VITE_COOKIE_DOMAIN=.katitb22.com

package.json

@@ -17,6 +17,7 @@
     "@chakra-ui/react": "^2.2.4",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "axios": "^0.27.2",
     "framer-motion": "^6.5.1",
     "leaflet": "^1.8.0",
     "react": "^18.2.0",

src/components/common/Navbar/index.tsx

@@ -145,7 +145,6 @@ const Navbar = () => {
                 color={match ? '#F4A641' : '#000000'}
                 textDecoration={match ? 'underline' : 'none'}
                 textDecorationColor="#FF7D4B"
-                transition="all 0.15s ease-in-out"
                 _hover={{
                   color: '#F4A641',
                   textDecoration: 'underline',

src/components/leaderboards/Card.tsx

@@ -1,13 +1,13 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Avatar, Flex, Text } from '@chakra-ui/react';
 
 interface Props {
-  nim: string;
   name: string;
-  score: number;
+  username: string;
+  score: number | null;
   rank: number;
 }
 
-export const Card = ({ nim, name, score, rank }: Props) => {
+export const Card = ({ username, name, score, rank }: Props) => {
   const colors = ['#C9B037', '#B4B4B4', '#AD8A56'];
   return (
     <Flex
@@ -16,29 +16,34 @@ export const Card = ({ nim, name, score, rank }: Props) => {
       border="2px solid #FFA06F"
       borderRadius="10px"
       background="#FFFFFF"
-      paddingLeft={{ md: '25px', base: '9px' }}
+      paddingLeft={{ md: '20px', base: '9px' }}
       paddingRight={{ md: '27px', base: '8px' }}
       py={2}
       alignItems="center"
     >
       <Text
         fontFamily="Subheading"
-        fontSize="3xl"
+        fontSize="2xl"
         color={colors[rank - 1] ?? '#000000'}
-        w="5ch"
+        mr={3}
       >
         #{rank}
       </Text>
+      <Avatar name={name} size="md" mx={1} />
       <Flex justifyContent="center" direction="column" ml={2}>
-        <Text fontFamily="Heading" fontSize="2xl" color="#000000" mb={-4}>
+        <Text fontFamily="Subheading" fontSize="xl" color="#000000" mb={-2}>
           {name}
         </Text>
-        <Text fontFamily="Caption" fontSize="2xl">
-          {nim}
+        <Text fontFamily="Caption" fontSize="xl" mb={-1}>
+          {username}
+        </Text>
+        {/* TODO: ubah ini nanti */}
+        <Text fontFamily="Caption" fontSize="xl">
+          STEI-K
         </Text>
       </Flex>
-      <Text marginLeft="auto" fontFamily="Subheading" fontSize="4xl">
-        {score}
+      <Text marginLeft="auto" fontFamily="Subheading" fontSize="3xl">
+        {score ?? 0}
       </Text>
     </Flex>
   );

src/components/leaderboards/Help.tsx

@@ -0,0 +1,48 @@
+import { QuestionIcon } from '@chakra-ui/icons';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  PopoverHeader,
+  PopoverCloseButton,
+  Button,
+  Text
+} from '@chakra-ui/react';
+
+export const Help = () => (
+  <Popover placement="bottom" closeOnBlur>
+    <PopoverTrigger>
+      <Button
+        w={{ base: '100%', lg: 'inherit' }}
+        bg="#FFA06F"
+        color="white"
+        leftIcon={<QuestionIcon />}
+        _hover={{ backgroundColor: '#FFB08D' }}
+      >
+        Help
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent bg="#FFA06F" color="white">
+      <PopoverHeader pt={3} fontFamily="Heading" fontSize="xl" border="0">
+        Search Help
+      </PopoverHeader>
+      <PopoverCloseButton />
+      <PopoverBody fontFamily="Body">
+        <b>Halo!!</b>
+        <br />
+        Sulit menemukan teman atau dirimu? Yuk cari di sini!! Dengan search ini
+        kamu bisa mencari data kamu atau temanmu berdasarkan <b>
+          NIM
+        </b> atau <b>Nama</b>
+        <br /> <br />
+        Kamu juga bisa mem-<i>filter</i> data berdasarkan <b>Fakultas</b> lho!
+        Caranya dengan mengetik query
+        <Text bg="gray" w="fit-content">
+          |<b>&lt;fakultas&gt;</b>|
+        </Text>
+        Contoh: <b>|FITB|</b>
+      </PopoverBody>
+    </PopoverContent>
+  </Popover>
+);

src/components/leaderboards/PaginationIcon.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable */
 // errornya: react/destructuring-assignment. mager benerin wkwkwk
-import { useState } from 'react';
 import { Stack, Box } from '@chakra-ui/react';
 import { ChevronRightIcon, ChevronLeftIcon } from '@chakra-ui/icons';
+import { useSearchParams } from 'react-router-dom';
 
 interface PaginationIconProps {
   pageSize: number;
+  currentPage: number;
   parentPageSetter: Function;
 }
 
@@ -14,12 +15,12 @@ interface PageProps {
 }
 
 const PaginationIcon = (props: PaginationIconProps) => {
-  const { pageSize } = props;
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams]: any = useSearchParams();
+  const { pageSize, currentPage, parentPageSetter } = props;
 
   function changePage(destination: number) {
-    props.parentPageSetter(destination);
-    setCurrentPage(destination);
+    setSearchParams({ page: destination });
+    parentPageSetter(destination);
   }
 
   const ButtonIcon = ({
@@ -75,11 +76,17 @@ const PaginationIcon = (props: PaginationIconProps) => {
   const PageButton = (props: PageProps) => (
     <Box
       borderRadius="10px"
-      background={props.page === currentPage ? '#FFA06F' : 'transparent'}
+      background={
+        props.page.toString() === currentPage.toString()
+          ? '#FFA06F'
+          : 'transparent'
+      }
       onClick={() =>
         props.page !== currentPage ? changePage(props.page) : null
       }
-      color={props.page === currentPage ? '#FFFFFF' : '#000000'}
+      color={
+        props.page.toString() === currentPage.toString() ? '#FFFFFF' : '#000000'
+      }
       fontSize="xl"
       w={10}
       h={10}

src/components/leaderboards/Search.tsx

@@ -1,83 +1,58 @@
-import { useState } from 'react';
-import {
-  Container,
-  Flex,
-  Button,
-  Input,
-  IconButton,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  PopoverHeader,
-  PopoverCloseButton
-} from '@chakra-ui/react';
-import { Search2Icon, QuestionIcon } from '@chakra-ui/icons';
+import { Container, Flex, Input, IconButton } from '@chakra-ui/react';
+import { Search2Icon } from '@chakra-ui/icons';
+import { Help } from '@components/leaderboards/Help';
+import { TagList } from './Tag';
 
-const Search = () => {
-  // TODO: implement search + fakultas?
-  const [keyword, setKeyword] = useState('');
+interface Props {
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  keyword: string;
+  handleSubmit: any;
+  filter: string[];
+  setFilter: React.Dispatch<React.SetStateAction<string[]>>;
+}
 
-  return (
-    <Container maxW="80ch" mb={8} px={0}>
-      <Flex
-        alignItems="center"
-        gap={2}
-        flexDirection={{ base: 'column', lg: 'row' }}
-      >
-        <Flex w="100%" alignItems="center" flexDirection="row">
-          <Input
-            type="search"
-            placeholder="Search..."
-            bg="white"
-            borderWidth="2px"
-            borderColor="#FFA06F"
-            focusBorderColor="#FFA06F"
-            // onKeyUp={(e) => {
-            // if (e.key === 'Enter' && keyword !== '') {
-            // }
-            // }}
-            _hover={{ borderColor: '#FFA06F' }}
-            value={keyword}
-            onChange={(event) => setKeyword(event.target.value)}
-          />
-          <IconButton
-            ml={2}
-            icon={<Search2Icon />}
-            type="submit"
-            aria-label="Search button"
-            _hover={{ backgroundColor: '#FFB08D' }}
-          />
-        </Flex>
-        <Popover placement="bottom" closeOnBlur>
-          <PopoverTrigger>
-            <Button
-              w={{ base: '100%', lg: 'inherit' }}
-              bg="#FFA06F"
-              color="white"
-              leftIcon={<QuestionIcon />}
-              _hover={{ backgroundColor: '#FFB08D' }}
-            >
-              Help
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent bg="#FFA06F" color="white">
-            <PopoverHeader pt={3} fontFamily="Heading" fontSize="xl" border="0">
-              Search Help
-            </PopoverHeader>
-            <PopoverCloseButton />
-            <PopoverBody fontFamily="Body">
-              <b>Halo!!</b>
-              <br />
-              Sulit menemukan teman atau dirimu? Yuk cari di sini!! Dengan
-              search ini kamu bisa mencari data kamu atau temanmu berdasarkan{' '}
-              <b>NIM</b> atau <b>Nama</b>
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
+const Search = ({
+  onChange,
+  keyword,
+  handleSubmit,
+  filter,
+  setFilter
+}: Props) => (
+  <Container maxW="80ch" mb={4} px={0}>
+    <Flex
+      alignItems="center"
+      gap={2}
+      flexDirection={{ base: 'column', lg: 'row' }}
+    >
+      <Flex w="100%" alignItems="center" flexDirection="row">
+        <Input
+          type="search"
+          placeholder="Search..."
+          bg="white"
+          borderWidth="2px"
+          borderColor="#FFA06F"
+          focusBorderColor="#FFA06F"
+          onKeyUp={(e) => {
+            if (e.key === 'Enter' && keyword !== '') {
+              handleSubmit();
+            }
+          }}
+          _hover={{ borderColor: '#FFA06F' }}
+          value={keyword}
+          onChange={onChange}
+        />
+        <IconButton
+          ml={2}
+          icon={<Search2Icon />}
+          aria-label="Search button"
+          onClick={handleSubmit}
+          _hover={{ backgroundColor: '#FFB08D' }}
+        />
       </Flex>
-    </Container>
-  );
-};
+      <Help />
+    </Flex>
+    <TagList fakultas={filter} setFakultas={setFilter} />
+  </Container>
+);
 
 export default Search;

src/components/leaderboards/Tag.tsx

@@ -0,0 +1,35 @@
+import { Flex, Tag, TagLabel, TagCloseButton } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+
+interface Props {
+  fakultas: string[];
+  setFakultas: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+export const TagList = ({ fakultas, setFakultas }: Props) => (
+  <Flex flexDirection="row" gap={2} mt={3} mb={2}>
+    {fakultas.map((item, idx) => (
+      <motion.div
+        // eslint-disable-next-line
+        key={idx}
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0 }}
+        transition={{ duration: 0.4 }}
+      >
+        <Tag
+          key={item}
+          size="lg"
+          borderRadius="full"
+          bg="#FFA06F"
+          color="white"
+        >
+          <TagLabel>{item}</TagLabel>
+          <TagCloseButton
+            onClick={() => setFakultas(fakultas.filter((x) => x !== item))}
+          />
+        </Tag>
+      </motion.div>
+    ))}
+  </Flex>
+);