merge patches from waldo-vision/v1/patches

V1/patches
waldo-vision · Mar 26, 2023 · 21f6690 · 21f6690
2 parents 0cac94b + 21cbe17
commit 21f6690
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 72 deletions.
diff --git a/apps/web/components/Navbar.tsx b/apps/web/components/Navbar.tsx
@@ -9,13 +9,14 @@ import {
   Collapse,
   useDisclosure,
   Heading,
+  Image as Img,
 } from '@chakra-ui/react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import WaldoLogo from '../public/android-chrome-256x256.png';
 import GithubLogo from '../public/navbar_github.png';
-import { discord, docs, githubrepo } from '@utils/links';
+import { discord, docs, github, githubrepo } from '@utils/links';
 import useSite from '@site';
 import BlacklistedModal from './BlacklistedModal';
 export default function Navigation() {
@@ -97,9 +98,17 @@ export default function Navigation() {
               <DesktopNav />
             </Flex>
           </Flex>
-          <Link href={githubIconHref}>
-            <Image alt="Github" src={GithubLogo} width={35} height={35} />
-          </Link>
+          {session && session.user && (
+            <Link href={'/account'}>
+              <Img
+                alt="Profile"
+                src={session.user.image as string}
+                width={30}
+                height={30}
+                borderRadius={'12'}
+              />
+            </Link>
+          )}
         </Flex>
         <Collapse in={isOpen} animateOpacity>
           <MobileNav />
@@ -167,7 +176,6 @@ const MobileNavItem = ({ label, href }: NavItem) => {
   );
 };
 
-const githubIconHref = githubrepo;
 interface NavItem {
   label: string;
   href: string;
@@ -195,4 +203,9 @@ const NAV_ITEMS: Array<NavItem> = [
     href: docs,
     pathName: null,
   },
+  {
+    label: 'Github',
+    href: github,
+    pathName: null,
+  },
 ];
diff --git a/apps/web/components/account/AccountGameplayItem.tsx b/apps/web/components/account/AccountGameplayItem.tsx
@@ -1,8 +1,10 @@
-import { Box, Flex, Text, Image } from '@chakra-ui/react';
+import { Box, Flex, Text, Image, useToast, Button } from '@chakra-ui/react';
 import Loading from '@components/Loading';
 import Link from 'next/link';
 import { Gameplay } from 'pages/account';
 import { useEffect, useState } from 'react';
+import { trpc } from '@utils/trpc';
+import { BiTrash } from 'react-icons/bi';
 
 type youtubeOembed = {
   title: string;
@@ -12,6 +14,38 @@ type youtubeOembed = {
 };
 export default function AccountGameplayItem({ item }: { item: Gameplay }) {
   const [videoData, setVideoData] = useState<youtubeOembed>();
+  const utils = trpc.useContext();
+  const toast = useToast();
+
+  const deleteGameplayTrpc = trpc.gameplay.delete.useMutation({
+    async onSuccess() {
+      await utils.gameplay.invalidate();
+    },
+  });
+
+  const deleteGameplay = () => {
+    try {
+      deleteGameplayTrpc.mutateAsync({ gameplayId: item.id });
+      toast({
+        position: 'bottom-right',
+        title: 'Gameplay Deletion',
+        description: 'Successfully deleted the gameplay!',
+        status: 'success',
+        duration: 5000,
+        isClosable: true,
+      });
+    } catch (error) {
+      toast({
+        position: 'bottom-right',
+        title: 'Gameplay Deletion',
+        description:
+          'An error occurred while attempting to delete the gameplay. Try logging out and then back in. If the issue persists please contact support@waldo.vision',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  };
 
   useEffect(() => {
     getVideo(item.youtubeUrl).then(data => {
@@ -40,13 +74,28 @@ export default function AccountGameplayItem({ item }: { item: Gameplay }) {
             alt={`${videoData.title} by ${videoData.author_name}`}
           />
         </Link>
-        <Flex direction={'column'}>
-          <Text fontSize={'lg'}>{videoData.title}</Text>
-          <Link href={videoData.author_url}>
+        <Flex direction={'row'}>
+          <Flex direction={'column'} width={'90%'}>
+            <Text fontSize={'lg'}>{videoData.title}</Text>
             <Text fontSize={'md'}>
-              By <b>{videoData.author_name}</b>
+              By&nbsp;
+              <Link href={videoData.author_url}>
+                <b>{videoData.author_name}</b>
+              </Link>
             </Text>
-          </Link>
+          </Flex>
+          <Box alignSelf={'end'}>
+            <Button
+              ml={3}
+              variant={'solid'}
+              bgColor={'red.300'}
+              _hover={{ bgColor: 'red.200' }}
+              color={'white'}
+              onClick={() => deleteGameplay()}
+            >
+              <BiTrash size={25} />
+            </Button>
+          </Box>
         </Flex>
       </Flex>
     </Box>

diff --git a/apps/web/pages/account.tsx b/apps/web/pages/account.tsx
@@ -55,10 +55,6 @@ const ProvidersList: Array<ProvidersListType> = [
     name: 'Github',
     icon: <BsGithub size={30} color={'#000000'} />,
   },
-  {
-    name: 'Facebook',
-    icon: <BsFacebook size={30} color={'#0165E1'} />,
-  },
 ];
 
 export interface Gameplay {
@@ -275,7 +271,8 @@ export default function Account() {
                                         md: 15,
                                       }}
                                     >
-                                      Your are connected to a {name} account.
+                                      You are connected to a{' '}
+                                      {name.toLowerCase()} account.
                                     </Text>
                                   </Flex>
                                   {name.toUpperCase() !=
@@ -321,7 +318,8 @@ export default function Account() {
                                 >
                                   <RxCross2 color={'red'} />
                                   <Text fontSize={{ base: 11, sm: 13, md: 15 }}>
-                                    You are not connected to a {name} account.
+                                    You are not connected to a{' '}
+                                    {name.toLowerCase()} account.
                                   </Text>
                                 </Flex>
                               )}

diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
@@ -234,11 +234,12 @@ export default function Login() {
                     boxShadow={'lg'}
                     borderRadius={8}
                     h={24}
+                    cursor={provider == 'Google' ? 'not-allowed' : ''}
                     bgColor={
                       provider == 'Google'
-                        ? 'gray.400'
+                        ? '#a3a6ab'
                         : selected
-                        ? 'gray.700'
+                        ? 'black'
                         : 'white'
                     }
                   >
@@ -252,7 +253,10 @@ export default function Login() {
                               )}
                               {provider == 'Google' && <FcGoogle size={40} />}
                               {provider == 'Github' && (
-                                <BsGithub size={40} color={hex} />
+                                <BsGithub
+                                  size={40}
+                                  color={selected ? '#fff' : hex}
+                                />
                               )}
                               {provider == 'BattleNET' && (
                                 <FaBattleNet size={40} color={hex} />
@@ -290,18 +294,18 @@ export default function Login() {
             <Flex mt={8} alignItems={'center'}>
               <Text>
                 <Checkbox
-                  fontWeight={'bold'}
+                  fontWeight={'medium'}
                   ml={6}
                   onChange={() => setIsLegalChecked(!isLegalChecked)}
                 >
-                  I agree &nbsp;to the&nbsp;
+                  I agree to the&nbsp;
                 </Checkbox>
                 <Link href={legal.TOS}>
                   <Text as={'span'} fontWeight={'bold'}>
                     Terms of Service
                   </Text>
                 </Link>
-                &nbsp;and &nbsp;
+                &nbsp;and&nbsp;
                 <Link href={legal.privacy}>
                   <Text as={'span'} fontWeight={'bold'}>
                     Privacy Policy

diff --git a/apps/web/pages/dash/gameplay.tsx b/apps/web/pages/dash/gameplay.tsx
@@ -20,6 +20,7 @@ import {
   Tfoot,
   useToast,
   Spinner,
+  Link,
 } from '@chakra-ui/react';
 import Layout from '@components/dashboard/Layout';
 import { ReactElement, useEffect, useState } from 'react';
@@ -49,12 +50,17 @@ type Query =
     }[]
   | undefined;
 type possibleGames = 'VAL' | 'CSG' | 'TF2' | 'APE' | 'COD' | 'R6S' | null;
+interface GoToItem {
+  number: number;
+}
 export default function Gameplay() {
   // Searching states
 
   const [searchRole, setSearchRole] = useState<possibleGames>(null);
   // Data and Rows
   // const { data, isLoading } = trpc.user.getUsers.useQuery({ page: 1 });
+  const [gtMenuItems, setGtMenuItems] = useState<GoToItem[]>();
+
   const [pageNumber, setPageNumber] = useState<number>(1);
   const [data, setData] = useState<Query>();
   const {
@@ -110,6 +116,21 @@ export default function Gameplay() {
         setPageNumber(pageNumber + 1);
       }
     };
+    const goToPage = (number: number) => {
+      setPageNumber(number);
+    };
+
+    const autoFillMenu = () => {
+      let menuItems: GoToItem[] = [];
+      if (data == undefined || data[0] == undefined) return;
+      if (!data[0].gameplayCount) return;
+      const totalPages = Math.ceil(data[0].gameplayCount / Math.round(10));
+      for (var i = 0; i < totalPages; i++) {
+        menuItems.push({ number: i + 1 });
+      }
+      setGtMenuItems(menuItems);
+    };
+
     return (
       <Center width={'100%'} flexDirection={'column'} gap={5}>
         <InputGroup width={{ base: '100%', md: '60%' }}>
@@ -127,25 +148,30 @@ export default function Gameplay() {
           </InputRightElement>
         </InputGroup>
         <Box width={{ base: '100%', md: '70%' }}>
-          <Menu>
-            <MenuButton
-              as={Button}
-              bgColor={'white'}
-              _hover={{ bgColor: 'white' }}
-              _active={{ bgColor: 'white' }}
-              rightIcon={<ChevronDownIcon />}
-            >
-              Filters: {searchRole}
-            </MenuButton>
-            <MenuList>
-              <MenuItem onClick={() => handleFilter('CSG')}>CSG</MenuItem>
-              <MenuItem onClick={() => handleFilter('VAL')}>VAL</MenuItem>
-              <MenuItem onClick={() => handleFilter('APE')}>APE</MenuItem>
-              <MenuItem onClick={() => handleFilter('TF2')}>TF2</MenuItem>
-              <MenuItem onClick={() => handleFilter('COD')}>COD</MenuItem>
-              <MenuItem onClick={() => handleFilter('R6S')}>R6S</MenuItem>
-            </MenuList>
-          </Menu>
+          <Flex alignItems={'center'} gap={3}>
+            <Menu>
+              <MenuButton
+                as={Button}
+                bgColor={'white'}
+                _hover={{ bgColor: 'white' }}
+                _active={{ bgColor: 'white' }}
+                rightIcon={<ChevronDownIcon />}
+              >
+                Filters: {searchRole}
+              </MenuButton>
+              <MenuList>
+                <MenuItem onClick={() => handleFilter('CSG')}>CSG</MenuItem>
+                <MenuItem onClick={() => handleFilter('VAL')}>VAL</MenuItem>
+                <MenuItem onClick={() => handleFilter('APE')}>APE</MenuItem>
+                <MenuItem onClick={() => handleFilter('TF2')}>TF2</MenuItem>
+                <MenuItem onClick={() => handleFilter('COD')}>COD</MenuItem>
+                <MenuItem onClick={() => handleFilter('R6S')}>R6S</MenuItem>
+              </MenuList>
+            </Menu>
+            <Text fontWeight={'semibold'}>
+              Total gameplay items: {data && data[0].gameplayCount}
+            </Text>
+          </Flex>
           <Box overflowX="auto">
             {data && (
               <Table
@@ -244,7 +270,13 @@ export default function Gameplay() {
                             </Text>
                           </Td>
                           <Td>
-                            <Text fontSize={15}>{result.youtubeUrl}</Text>
+                            <Link
+                              fontSize={15}
+                              href={result.youtubeUrl}
+                              textColor={'blue.500'}
+                            >
+                              {result.youtubeUrl}
+                            </Link>
                           </Td>
                           <Td>
                             <Text fontSize={15}>
@@ -324,6 +356,28 @@ export default function Gameplay() {
                 )}
               </Table>
             )}
+            <Menu>
+              <MenuButton
+                as={Button}
+                bgColor={'white'}
+                _hover={{ bgColor: 'white' }}
+                _active={{ bgColor: 'white' }}
+                rightIcon={<ChevronDownIcon />}
+                onClick={() => autoFillMenu()}
+              >
+                Go to Page
+              </MenuButton>
+              <MenuList>
+                {gtMenuItems &&
+                  gtMenuItems.map((item: GoToItem) => {
+                    return (
+                      <MenuItem onClick={() => goToPage(item.number)}>
+                        {item.number}
+                      </MenuItem>
+                    );
+                  })}
+              </MenuList>
+            </Menu>
           </Box>
         </Box>
       </Center>