Merge pull request #234 from TogetherCrew/feat/announcements

Feat/announcements

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.9.4",
+    "@date-io/date-fns": "^2.17.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
@@ -23,6 +24,7 @@
     "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.10.13",
+    "@mui/x-date-pickers": "^6.18.6",
     "@sentry/nextjs": "^7.50.0",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
@@ -34,6 +36,7 @@
     "axios": "^1.2.2",
     "clsx": "^1.2.1",
     "d3-force": "^3.0.0",
+    "date-fns": "^2.30.0",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.2",
     "eslint-config-prettier": "^8.6.0",

src/axiosInstance.ts

@@ -169,6 +169,22 @@ axiosInstance.interceptors.response.use(
         });
         window.location.href = '/';
 
+        Sentry.captureException(
+          new Error(
+            `API responded with status code ${error.response.status}: ${error.response.data.message}`
+          )
+        );
+        break;
+      case 500:
+        toast.error(`${error.response.data.message}`, {
+          position: 'bottom-left',
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: 0,
+        });
         Sentry.captureException(
           new Error(
             `API responded with status code ${error.response.status}: ${error.response.data.message}`

src/components/announcements/TcAnnouncementsAlert.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TcAnnouncementsAlert from './TcAnnouncementsAlert';
+
+const mockGrantWritePermissions = jest.fn();
+
+jest.mock('../../store/useStore', () => () => ({
+  grantWritePermissions: mockGrantWritePermissions,
+}));
+
+jest.mock('../../context/TokenContext', () => ({
+  useToken: () => ({
+    community: {
+      platforms: [
+        { id: '1', disconnectedAt: null, metadata: { id: '3123141414221' } },
+      ],
+    },
+  }),
+}));
+
+describe('TcAnnouncementsAlert', () => {
+  it('renders correctly', () => {
+    render(<TcAnnouncementsAlert />);
+    expect(
+      screen.getByText(/Announcements needs write access at the server-level/i)
+    ).toBeInTheDocument();
+  });
+});

src/components/announcements/TcAnnouncementsAlert.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TcAlert from '../shared/TcAlert';
+import TcCollapse from '../shared/TcCollapse';
+import TcText from '../shared/TcText';
+import TcButton from '../shared/TcButton';
+import useAppStore from '../../store/useStore';
+import { useToken } from '../../context/TokenContext';
+
+function TcAnnouncementsAlert() {
+  const { grantWritePermissions } = useAppStore();
+
+  const { community } = useToken();
+
+  const handleGrantAccess = () => {
+    const guildId = community?.platforms.find(
+      (platform) => platform.disconnectedAt === null
+    )?.metadata.id;
+
+    if (guildId)
+      grantWritePermissions({
+        platformType: 'discord',
+        moduleType: 'Announcement',
+        id: guildId,
+      });
+  };
+  return (
+    <TcCollapse
+      in={true}
+      sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 999,
+        '&:MuiPaper-root': {
+          display: 'flex',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <TcAlert
+        variant="filled"
+        className={'bg-error-500'}
+        icon={false}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingY: 0,
+        }}
+      >
+        <div className="md:space-x-3 flex flex-col md:flex-row items-center justify-center p-0">
+          <TcText
+            text={
+              'Announcements needs write access at the server-level (i.e. Send Message, Send Messages in Threads, Create Public Threads, Create Private Threads, etc)'
+            }
+            color={'white'}
+            variant={'subtitle1'}
+          />
+          <TcButton
+            text="Update Permissions"
+            onClick={handleGrantAccess}
+            className="text-white"
+          />
+        </div>
+      </TcAlert>
+    </TcCollapse>
+  );
+}
+
+export default TcAnnouncementsAlert;