fixes

raid-guild · Jan 17, 2023 · 53cd9a5 · 53cd9a5
1 parent db8feeb
commit 53cd9a5
Show file tree

Hide file tree

Showing 26 changed files with 1,210 additions and 393 deletions.
diff --git a/apps/frontend/.eslintrc.json b/apps/frontend/.eslintrc.json
@@ -10,10 +10,7 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@next/next/no-html-link-for-pages": [
-          "error",
-          "apps/dungeon-master-v2/pages"
-        ]
+        "@next/next/no-html-link-for-pages": ["error", "apps/frontend/pages"]
       }
     },
     {

diff --git a/apps/frontend/auth.d.ts b/apps/frontend/auth.d.ts
@@ -0,0 +1,17 @@
+import 'next-auth';
+
+declare module 'next-auth' {
+  interface User {
+    id?: string;
+    address?: string;
+  }
+
+  interface Session {
+    token?: string;
+    user?: User;
+  }
+
+  interface JWT {
+    user: User;
+  }
+}
diff --git a/apps/frontend/components/CommandPalette.tsx b/apps/frontend/components/CommandPalette.tsx
@@ -12,10 +12,11 @@ import 'react-cmdk/dist/cmdk.css';
 
 import useSearchResults from '../hooks/useSearchResults';
 import ChakraNextLink from './ChakraNextLink';
+import { useOverlay } from '../contexts/OverlayContext';
 
 const CommandPaletteInternalLink = ({ href, children }) => (
   <ChakraNextLink href={href}>
-    <Flex w="100%" justify="space-between" p={2}>
+    <Flex w='100%' justify='space-between' p={2}>
       {children}
     </Flex>
   </ChakraNextLink>
@@ -24,14 +25,14 @@ const CommandPaletteInternalLink = ({ href, children }) => (
 let timeout = null;
 
 const CommandPalette = () => {
-  const [page, setPage] = useState<'root' | 'projects'>('root');
-  const [open, setOpen] = useState<boolean>(false);
+  const [page] = useState<'root' | 'projects'>('root');
+  const { commandPallet: isOpen, setCommandPallet: setOpen } = useOverlay();
   const [search, setSearch] = useState('');
   const [serverSearch, setServerSearch] = useState<string | null>(null);
   const [localResults, setLocalResults] = useState<JsonStructure>(null);
   const { data: session } = useSession();
   const token = _.get(session, 'token');
-  const { data: searchData, isLoading } = useSearchResults({
+  const { data: searchData } = useSearchResults({
     token,
     search: serverSearch,
   });
@@ -141,10 +142,10 @@ const CommandPalette = () => {
       onChangeSearch={setSearchTimeout}
       onChangeOpen={handleClose}
       search={search}
-      isOpen={open}
+      isOpen={isOpen}
       page={page}
     >
-      <CmdkCommandPalette.Page id="root">
+      <CmdkCommandPalette.Page id='root'>
         {filteredItems.length ? (
           filteredItems.map((list) => (
             <CmdkCommandPalette.List key={list.id} heading={list.heading}>
@@ -180,13 +181,13 @@ const CommandPalette = () => {
             </CmdkCommandPalette.List>
           ))
         ) : (
-          <Flex justify="center" p={4}>
+          <Flex justify='center' p={4}>
             <Spinner />
           </Flex>
         )}
       </CmdkCommandPalette.Page>
 
-      <CmdkCommandPalette.Page id="projects">
+      <CmdkCommandPalette.Page id='projects'>
         {/* Projects page */}
       </CmdkCommandPalette.Page>
     </CmdkCommandPalette>

diff --git a/apps/frontend/components/MemberAvatar.tsx b/apps/frontend/components/MemberAvatar.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { Avatar, Tooltip } from '@raidguild/design-system';
-import { useEnsAvatar, useEnsName, chain } from 'wagmi';
+import { useEnsAvatar, useEnsName, mainnet } from 'wagmi';
 import { IMember, memberDisplayName } from '../utils';
 import * as blockies from 'blockies-ts';
 
@@ -12,12 +12,12 @@ const MemberAvatar = ({ member }: MemberAvatarProps) => {
   const address = _.get(member, 'ethAddress');
   const { data: ensName } = useEnsName({
     address,
-    chainId: chain.mainnet.id,
+    chainId: mainnet.id,
     enabled: !!address,
   });
   let { data: avatarSrc } = useEnsAvatar({
     address,
-    chainId: chain.mainnet.id,
+    chainId: mainnet.id,
     enabled: !!address,
     cacheTime: 360_000,
   });
@@ -36,7 +36,7 @@ const MemberAvatar = ({ member }: MemberAvatarProps) => {
   return (
     <Tooltip
       label={memberDisplayName(member, ensName)}
-      placement="left"
+      placement='left'
       hasArrow
     >
       <Avatar src={avatarSrc} />

diff --git a/apps/frontend/components/MiniRaidCard.tsx b/apps/frontend/components/MiniRaidCard.tsx
@@ -1,5 +1,12 @@
 import _ from 'lodash';
-import { Card, Flex, Heading, Stack, HStack, Text } from '@raidguild/design-system';
+import {
+  Card,
+  Flex,
+  Heading,
+  Stack,
+  HStack,
+  Text,
+} from '@raidguild/design-system';
 import { format } from 'date-fns';
 import { IRaid, IConsultation } from '../types';
 import ChakraNextLink from './ChakraNextLink';
@@ -28,30 +35,29 @@ const MiniRaidCard = ({
         : `/consultations/${_.get(consultation, 'id')}`
     }
   >
-    <Card
-      variant="outline"
-      width="100%"
-    >
-      <Stack spacing={2} width="100%">
-        <Heading color="white" size={smallHeader ? 'sm' : 'md'}>
-          {_.get(raid, 'name', _.get(consultation, 'name'))}
-        </Heading>
-        <HStack>
-          <RaidStatusBadge status={_.get(raid, 'raidStatus.raidStatus')} />
-          {newRaid &&
-            _.get(raid, 'createdAt', _.get(consultation, 'createdAt')) && (
-              <Text>
-                {format(
-                  new Date(
-                    _.get(raid, 'createdAt', _.get(consultation, 'createdAt'))
-                  ),
-                  'Pp'
-                )}
-              </Text>
-            )}
-        </HStack>
-      </Stack>
-      {!noAvatar && <MemberAvatar member={_.get(raid, 'cleric')} />}
+    <Card variant='outline' width='100%'>
+      <Flex w='100%' justify='space-between' align='center'>
+        <Stack spacing={2}>
+          <Heading color='white' size={smallHeader ? 'sm' : 'md'}>
+            {_.get(raid, 'name', _.get(consultation, 'name'))}
+          </Heading>
+          <HStack>
+            <RaidStatusBadge status={_.get(raid, 'raidStatus.raidStatus')} />
+            {newRaid &&
+              _.get(raid, 'createdAt', _.get(consultation, 'createdAt')) && (
+                <Text>
+                  {format(
+                    new Date(
+                      _.get(raid, 'createdAt', _.get(consultation, 'createdAt'))
+                    ),
+                    'Pp'
+                  )}
+                </Text>
+              )}
+          </HStack>
+        </Stack>
+        {!noAvatar && <MemberAvatar member={_.get(raid, 'cleric')} />}
+      </Flex>
     </Card>
   </ChakraNextLink>
 );

diff --git a/apps/frontend/components/Navbar.tsx b/apps/frontend/components/Navbar.tsx
@@ -13,6 +13,7 @@ import { AiOutlineClose } from 'react-icons/ai';
 import { HiSearch } from 'react-icons/hi';
 import Link from './ChakraNextLink';
 import ConnectWallet from './ConnectWallet';
+import { useOverlay } from '../contexts/OverlayContext';
 
 const links = [
   { href: '/raids', label: 'Raids' },
@@ -28,24 +29,30 @@ interface NavItem {
 
 const Navbar = () => {
   const { isOpen, onToggle } = useDisclosure();
+  const { setCommandPallet: setOpen } = useOverlay();
 
   return (
     <Box>
-      <Flex justify="space-between" p={8}>
+      <Flex justify='space-between' p={8}>
         <HStack>
-          <Link href="/" mr={6}>
+          <Link href='/' mr={6}>
             <Heading>🏰</Heading>
           </Link>
           <Flex display={{ base: 'none', md: 'flex' }}>
             <DesktopNav />
           </Flex>
         </HStack>
 
-        <Flex align="center">
-          <Flex cursor="pointer" mx={6} display={{ base: 'none', md: 'flex' }}>
+        <Flex align='center'>
+          <Flex
+            cursor='pointer'
+            mx={6}
+            display={{ base: 'none', md: 'flex' }}
+            onClick={() => setOpen(true)}
+          >
             <Tooltip
               label={'press CMD + K to search'}
-              placement="bottom"
+              placement='bottom'
               hasArrow
             >
               <span>
@@ -84,10 +91,10 @@ const Navbar = () => {
 
 const DesktopNav = () => {
   return (
-    <HStack align="center" spacing={4}>
+    <HStack align='center' spacing={4}>
       {_.map(links, ({ href, label }) => (
         <Link key={href} href={href}>
-          <Heading size="sm">{label}</Heading>
+          <Heading size='sm'>{label}</Heading>
         </Link>
       ))}
     </HStack>
@@ -109,7 +116,7 @@ const MobileNavItem = ({ href, label }: NavItem) => {
   return (
     <Stack spacing={4}>
       <Link key={href} href={href} py={2}>
-        <Heading size="sm">{label}</Heading>
+        <Heading size='sm'>{label}</Heading>
       </Link>
     </Stack>
   );

diff --git a/apps/frontend/components/RaidCard.tsx b/apps/frontend/components/RaidCard.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   Text,
   HStack,
-  Box,
   Card,
   Icon,
   Tooltip,
@@ -74,13 +73,9 @@ const RaidCard: React.FC<RaidProps> = ({ raid, consultation }: RaidProps) => {
   const [upTo780] = useMediaQuery('(max-width: 780px)');
 
   return (
-    <Card
-      variant="filled"
-      p={3}
-      w={['95%', null, null, '100%']}
-    >
+    <Card variant='filled' p={3} w={['95%', null, null, '100%']}>
       <Flex
-        w="100%"
+        w='100%'
         direction={{ base: 'column', md: 'row' }}
         alignItems='space-apart'
         justifyContent='space-between'
@@ -161,7 +156,7 @@ const RaidCard: React.FC<RaidProps> = ({ raid, consultation }: RaidProps) => {
           </Link>
         </Flex>
       </Flex>
-      <Flex direction='row' justifyContent='space-between' w="100%">
+      <Flex direction='row' justifyContent='space-between' w='100%'>
         <Stack w='90%'>
           <Flex
             direction='column'
@@ -226,7 +221,7 @@ const RaidCard: React.FC<RaidProps> = ({ raid, consultation }: RaidProps) => {
         </Stack>
       )}
       {latestUpdate && (
-        <Flex direction='column' paddingY={4} w="100%">
+        <Flex direction='column' paddingY={4} w='100%'>
           <HStack spacing={10} align='center'>
             <Heading size='sm' color='white'>
               Last Status Update

diff --git a/apps/frontend/components/RaidDetailsSidebar.tsx b/apps/frontend/components/RaidDetailsSidebar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
-import { HStack, Button, Text, Stack, Modal } from '@raidguild/design-system';
+import { HStack, Button, Text, Stack } from '@raidguild/design-system';
 import { IRaid } from '../utils';
 import StatusUpdateForm from './StatusUpdateForm';
 import RaidUpdateForm from './RaidUpdateForm';
@@ -31,18 +31,18 @@ const RaidDetailsSidebar: React.FC<RaidDetailsSidebarProps> = ({
   return (
     <Stack spacing={5}>
       <HStack>
-        <Button onClick={handleShowStatusModal} w="75%">
+        <Button onClick={handleShowStatusModal} w='75%'>
           {_.get(raid, 'raidStatus.raidStatus')}
         </Button>
-        <Button variant="outline" onClick={handleShowRaidUpdatFormModal}>
+        <Button variant='outline' onClick={handleShowRaidUpdatFormModal}>
           Edit
         </Button>
       </HStack>
 
       <ModalWrapper
-        name="raidStatus"
-        size="sm"
-        title="Update Raid Status"
+        name='raidStatus'
+        size='sm'
+        title='Update Raid Status'
         localOverlay={localOverlay}
         content={
           <StatusUpdateForm
@@ -54,9 +54,9 @@ const RaidDetailsSidebar: React.FC<RaidDetailsSidebarProps> = ({
         }
       />
       <ModalWrapper
-        name="raidForm"
-        size="xl"
-        title="Update Raid"
+        name='raidForm'
+        size='xl'
+        title='Update Raid'
         localOverlay={localOverlay}
         content={
           <RaidUpdateForm