From 91f8f173e81a078ce0fa59539c9243bf32574bb1 Mon Sep 17 00:00:00 2001
From: Mintae Kim <mkim221@myseneca.ca>
Date: Thu, 10 Dec 2020 18:59:25 -0500
Subject: [PATCH] Port AdminButton from gatsby to next.js

---
 src/frontend/next/package.json                |  2 +
 .../components/AdminButtons/AdminButtons.tsx  | 40 +++++++++++++++++++
 .../src/contexts/User/UserContext/index.js    |  4 ++
 3 files changed, 46 insertions(+)
 create mode 100644 src/frontend/next/src/components/AdminButtons/AdminButtons.tsx
 create mode 100644 src/frontend/next/src/contexts/User/UserContext/index.js

diff --git a/src/frontend/next/package.json b/src/frontend/next/package.json
index 3da5786453..43b20a1a5b 100644
--- a/src/frontend/next/package.json
+++ b/src/frontend/next/package.json
@@ -8,6 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
     "next": "^10.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
diff --git a/src/frontend/next/src/components/AdminButtons/AdminButtons.tsx b/src/frontend/next/src/components/AdminButtons/AdminButtons.tsx
new file mode 100644
index 0000000000..0139927d65
--- /dev/null
+++ b/src/frontend/next/src/components/AdminButtons/AdminButtons.tsx
@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { IconButton } from '@material-ui/core';
+import FlagIcon from '@material-ui/icons/Flag';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { UserStateContext } from '../../contexts/User/UserContext';
+
+const useStyles = makeStyles(() => ({
+  iconDiv: {
+    float: 'right',
+  },
+  iconSpan: {
+    paddingLeft: '10px',
+    paddingRight: '10px',
+  },
+}));
+
+function AdminButtons() {
+  const classes = useStyles();
+  const user = useContext(UserStateContext);
+
+  return (
+    user.isAdmin && (
+      <div className={classes.iconDiv}>
+        <span className={classes.iconSpan}>
+          <IconButton size="small">
+            <FlagIcon fontSize="large" />
+          </IconButton>
+        </span>
+        <span className={classes.iconSpan}>
+          <IconButton size="small">
+            <DeleteIcon fontSize="large" />
+          </IconButton>
+        </span>
+      </div>
+    )
+  );
+}
+
+export default AdminButtons;
diff --git a/src/frontend/next/src/contexts/User/UserContext/index.js b/src/frontend/next/src/contexts/User/UserContext/index.js
new file mode 100644
index 0000000000..43d5970a1a
--- /dev/null
+++ b/src/frontend/next/src/contexts/User/UserContext/index.js
@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+export const UserStateContext = createContext();
+export const UserDispatchContext = createContext();