Add social media icons

backend/package.json

@@ -96,7 +96,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "npx lint-staged"
     }
   },
   "lint-staged": {

frontend/package.json

@@ -12,7 +12,7 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/pickers": "^3.2.10",
     "@material/layout-grid": "^0.41.0",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.3.3",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
     "@types/react-router": "^5.1.8",
@@ -73,8 +73,8 @@
     "@babel/core": "^7.11.1",
     "@openapitools/openapi-generator-cli": "^1.0.15-5.0.0-beta",
     "@storybook/addon-actions": "^6.0.13",
-    "@storybook/addon-docs": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-docs": "^6.3.3",
+    "@storybook/addon-essentials": "^6.3.3",
     "@storybook/addon-links": "^6.0.13",
     "@storybook/node-logger": "^6.0.13",
     "@storybook/preset-create-react-app": "^3.1.4",
@@ -101,4 +101,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

frontend/src/components/NavBar/index.js

@@ -22,11 +22,13 @@ import {
   DialogContentText,
   DialogTitle,
   Hidden,
+  Container,
 } from '@material-ui/core';
 import SignOutIcon from '@material-ui/icons/ExitToApp';
 import MenuIcon from '@material-ui/icons/Menu';
 
 import { OfficerTabs, InducteeTabs } from './tabs';
+import { SocialButtons } from './socialButtons';
 import styles from './styles';
 
 import { UserContext } from '@Contexts';
@@ -81,6 +83,11 @@ class NavBar extends React.Component {
         <ListItemText primary={tab.text} />
       </ListItem>
     ));
+    const socialComponents = SocialButtons.map(social => (
+      <ListItem button component={Link} to={{ pathname: social.pathname }} target={social.target} className={classes.socialButton}>
+        <ListItemIcon className={classes.socialIcon}>{social.icon}</ListItemIcon>
+      </ListItem>
+    ));
 
     const drawer = (
       <>
@@ -94,6 +101,9 @@ class NavBar extends React.Component {
             <ListItemText primary='Logout' />
           </ListItem>
         </List>
+        <Container className={classes.socialContainer}>
+          <List className={classes.socialSection}>{socialComponents}</List>
+        </Container>
 
         <Dialog
           open={isConfirmationModalOpen}

frontend/src/components/NavBar/socialButtons.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import LanguageIcon from '@material-ui/icons/Language';
+import InstagramIcon from '@material-ui/icons/Instagram';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
+
+const WebsiteButton = {
+  pathname: "https://hkn.ucsd.edu/",
+  icon: <LanguageIcon fontSize='inherit' />,
+  target: "_blank"
+}
+
+const FacebookButton = {
+  pathname: "https://www.facebook.com/hknucsd",
+  icon: <FacebookIcon fontSize='inherit' />,
+  target: "_blank"
+}
+
+const InstagramButton = {
+  pathname: "https://www.instagram.com/hkn_ucsd/",
+  icon: <InstagramIcon fontSize='inherit' />,
+  target: "_blank"
+}
+
+const LinkedInButton = {
+  pathname: "https://www.linkedin.com/company/hkn-ucsd/about/",
+  icon: <LinkedInIcon fontSize='inherit' />,
+  target: "_blank"
+}
+
+
+export const SocialButtons = [
+  WebsiteButton,
+  FacebookButton,
+  InstagramButton,
+  LinkedInButton
+];

frontend/src/components/NavBar/styles.js

@@ -33,6 +33,33 @@ const styles = theme => ({
   h5: {
     marginBottom: theme.spacing(2),
   },
+  socialContainer: {
+    width: '90%',
+    display: 'flex',
+    flexDirection: 'column-reverse',
+    height: '100%',
+    borderCollapse: 'collapse',
+    paddingLeft: '0',
+  },
+  socialSection: {
+    display: 'flex',
+    justifyContent: 'space-inbetween',
+    alignItems: 'center',
+    margin: '0 0 20px 0',
+    padding: '0'
+  },
+  socialButton: {
+    width: '25%',
+    margin: '0 3px 0 3px',
+    padding: '0',
+    fontSize: '2rem',
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  socialIcon: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
 });
 
 export default styles;

frontend/src/pages/EventsPage/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { compose } from 'recompose';
-
-import { HomepageBanner } from '@SharedComponents/HomepageBanner';
+import { Divider } from '@material-ui/core';
 
 import EventButtons from './eventButtons';
 
@@ -97,13 +96,14 @@ class EventsPage extends React.Component {
     const { classes } = this.props;
     return (
       <div>
-        <HomepageBanner />
         <div style={{ margin: '20px' }}>
           {MemberRenderPermission(EventButtons)({})}
         </div>
 
-        <div>
+        <div className={classes.contentWrapper}>
+          <Divider />
           <h1 style={{ textAlign: 'center' }}>Upcoming Events</h1>
+          <Divider />
         </div>
         <div className={classes.root}>
           <iframe

frontend/src/pages/InducteePointsPage/index.tsx

@@ -9,7 +9,6 @@ import { Table } from '@SharedComponents';
 import { getAllInducteePoints, InducteePoint } from '@Services/PointsService';
 
 const columns = [
-  { title: 'Name', field: 'name' },
   { title: 'Email', field: 'email' },
   { title: 'Total Points', field: 'points' },
   {

frontend/src/services/PointsService.ts

@@ -1,12 +1,10 @@
 import { PointsApi } from './api/apis/PointsApi';
 import ApiConfigStore from './ApiConfigStore';
 import { InducteePointsResponse } from './api';
-import { getUserById } from './UserService';
 
 // nit: bad naming
 export interface InducteePoint {
   user: number;
-  name: string;
   email: string;
   points: number;
   hasProfessionalRequirement: string;
@@ -21,9 +19,7 @@ export async function getAllInducteePoints(): Promise<InducteePoint[]> {
   const pointsApi: PointsApi = new PointsApi(apiConfig);
 
   const points = await pointsApi.pointsControllerGetAllInducteePoints();
-
-  const inducteePointsList = await Promise.all(points.inducteePoints.map(async (point: InducteePointsResponse) => {
-    const userAcc = await getUserById(point.user);
+  return points.inducteePoints.map((point: InducteePointsResponse) => {
     return {
       points: point.points,
       user: point.user,
@@ -40,9 +36,6 @@ export async function getAllInducteePoints(): Promise<InducteePoint[]> {
       hasSocialRequirement: point.hasSocialRequirement
         ? 'Complete'
         : 'Incomplete',
-
-      name: userAcc.firstName + " " + userAcc.lastName,
     } as InducteePoint;
-  }));
-  return inducteePointsList;
+  });
 }

frontend/tsconfig.json

@@ -1,28 +1,28 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "noImplicitAny": false,
-    "jsx": "react",
-    "baseUrl": "."
-  },
-  "include": [
-    "src"
-  ],
-  "extends": "./tsconfig.paths.json"
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noImplicitAny": false,
+    "jsx": "react",
+    "baseUrl": "."
+  },
+  "include": [
+    "src"
+  ],
+  "extends": "./tsconfig.paths.json"
+}