Discord Id Check

README.md

@@ -75,7 +75,7 @@
 
   1. Copy the Client ID and update the `DISCORD_CLIENT_ID` value.
 
-  2. Reveal and copy the Client Secret and update the `DISCORD_SECRET` value.
+  2. Reveal and copy the Client Secret and update the `DISCORD_SECRET_ID` value.
 
 ## Setting up Discord Server
 

packages/web/src/components/DiscordButton/DiscordButton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button, Box, Alert, AlertIcon } from '@chakra-ui/react';
+import { FaDiscord } from 'react-icons/fa';
+import { User } from '../userprofile/UserProfile';
+
+export const DiscordButton: React.FC = () => {
+  const [user, setUser] = React.useState<User | undefined>();
+  const [errorMessage, setErrorMessage] = React.useState<string>('');
+
+  React.useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const res = await fetch(`/api/users/me`);
+        const data = await res.json();
+
+        setUser(data);
+      } catch {
+        setErrorMessage('User could not be found');
+      }
+    };
+
+    fetchUser();
+  }, []);
+
+  if (!user) {
+    if (errorMessage == '') return null;
+    else
+      return (
+        <Alert status="error">
+          <AlertIcon />
+          {errorMessage}
+        </Alert>
+      );
+  } else {
+    return (
+      <Box>
+        {user.discordId ? (
+          <Button
+            as="a"
+            href="https://discord.com/"
+            bg="discord.400"
+            textColor="white"
+            leftIcon={<FaDiscord color="white" />}
+          >
+            Go to Discord
+          </Button>
+        ) : (
+          <Button
+            as="a"
+            href="/api/auth/discord/login"
+            bg="discord.400"
+            textColor="white"
+            leftIcon={<FaDiscord color="white" />}
+          >
+            Join our Discord
+          </Button>
+        )}
+      </Box>
+    );
+  }
+};

packages/web/src/components/DiscordButton/index.ts

@@ -0,0 +1 @@
+export * from './DiscordButton';

packages/web/src/components/Layout/MarketingLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Link, Heading, HStack, Spacer, VStack } from '@chakra-ui/react';
+import { Button, Heading, HStack, Spacer, VStack } from '@chakra-ui/react';
 import { GiCrossFlare } from 'react-icons/gi';
 
 export const MarketingLayout: React.FC = ({ children }) => {

packages/web/src/components/userprofile/UserProfile.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import { Heading, HStack, Spacer, useTheme, VStack, Text, Box, Button } from '@chakra-ui/react';
+import { Text, Box, Button } from '@chakra-ui/react';
 
-interface User {
+export interface User {
   name: string;
   pronouns?: string;
   schoolName?: string;
@@ -29,7 +29,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ user, setUser }: UserP
         'content-type': 'application/json',
       },
       body: JSON.stringify({
-        discordId: undefined,
+        discordId: null,
       }),
     });
     if (!res.ok) {

packages/web/src/pages/app/community.tsx

@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react';
 import { NextPage } from 'next';
 import React from 'react';
-import { FaDiscord } from 'react-icons/fa';
+import { DiscordButton } from '../../components/DiscordButton';
 import { AppLayout } from '../../components/Layout';
 
 const Community: NextPage = () => {
@@ -91,11 +91,7 @@ const Community: NextPage = () => {
       </Accordion>
       <HStack>
         <Spacer />
-        <Button bg="discord.400" textColor="white" leftIcon={<FaDiscord color="white" />}>
-          <Link _hover={{ textDecoration: 'none' }} href="https://discord.gg">
-            Join our Discord
-          </Link>
-        </Button>
+        <DiscordButton />
         <Spacer />
       </HStack>
     </AppLayout>

packages/web/tests/components/DiscordButton/DiscordButton.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import fetchMock from 'fetch-mock-jest';
+import { DiscordButton } from '../../../src/components/DiscordButton';
+import { render, screen, waitFor } from '../../testUtils/testTools';
+import { User } from '../../../src/components/userprofile/UserProfile';
+
+const sampleUser: Partial<User> = {
+  name: 'James',
+  discordId: undefined,
+};
+
+const sampleUser2: User = {
+  name: 'James',
+  discordId: '34523452345',
+};
+
+describe('DiscordButton component', () => {
+  beforeEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  it('shows an error message when the user is not found', async () => {
+    fetchMock.get('/api/users/me', 500);
+
+    render(<DiscordButton />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveFetched('/api/users/me');
+      expect(screen.getByText('User could not be found')).toBeVisible();
+    });
+  });
+
+  it('renders the Join Discord button when user has no discord id', async () => {
+    fetchMock.get('/api/users/me', sampleUser);
+
+    render(<DiscordButton />);
+
+    await waitFor(() => {
+      const JoinDiscord = screen.queryByText('Join our Discord');
+      expect(fetchMock).toHaveFetched('/api/users/me');
+
+      expect(JoinDiscord).toBeVisible();
+      expect(JoinDiscord).toHaveAttribute('href', '/api/auth/discord/login');
+    });
+  });
+
+  it('renders Go to Discord button when user has a discordId', async () => {
+    fetchMock.get('/api/users/me', sampleUser2);
+
+    render(<DiscordButton />);
+
+    await waitFor(() => {
+      const GoToDiscord = screen.queryByText('Go to Discord');
+      expect(fetchMock).toHaveFetched('/api/users/me');
+
+      expect(GoToDiscord).toBeVisible();
+      expect(GoToDiscord).toHaveAttribute('href', 'https://discord.com/');
+    });
+  });
+});

packages/web/tests/components/UserProfile/UserProfile.test.tsx

@@ -1,4 +1,3 @@
-import { sample } from 'lodash';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock-jest';

packages/web/tests/pages/app/community.test.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
-
 import { render, screen, waitFor } from '../../testUtils/testTools';
 import { getMock } from '../../testUtils/getMock';
 import { AppLayout } from '../../../src/components/Layout';
 import Community from '../../../src/pages/app/community';
+import { DiscordButton } from '../../../src/components/DiscordButton/DiscordButton';
 
 jest.mock('../../../src/components/Layout/AppLayout.tsx');
 getMock(AppLayout).mockImplementation(({ children }) => <>{children}</>);
 
+jest.mock('../../../src/components/DiscordButton/DiscordButton.tsx');
+const discordText = 'discordButton';
+getMock(DiscordButton).mockImplementation(() => <p>{discordText}</p>);
+
 describe('community page', () => {
   beforeEach(async () => {
     jest.clearAllMocks();
@@ -25,8 +29,6 @@ describe('community page', () => {
       screen.queryByText('Remember to follow the Community Guidelines listed above.'),
     ).not.toBeVisible();
     expect(screen.queryByText('Should I change my Discord profile avatar?')).not.toBeVisible();
-    expect(screen.queryByText('Join our Discord')).toBeVisible();
-    expect(screen.queryByText('Join our Discord')).toHaveAttribute('href', 'https://discord.gg');
-    expect(screen.queryByText('here')).toHaveAttribute('href', '/api/auth/discord/login');
+    expect(screen.queryByText(discordText)).toBeVisible();
   });
 });