Add team page (#23)

README.md

@@ -4,7 +4,7 @@
 
 # Opal
 
-[![Build Status](https://travis-ci.org/cesium/opal-node.svg?branch=master)](https://travis-ci.org/cesium/opal-node)
+[![Build Status](https://travis-ci.org/cesium/opal.svg?branch=master)](https://travis-ci.org/cesium/opal)
 
 NextJS Web App for the Badge Platform for CeSIUM's Computer Engineering Week
 event.

components/Footer.js

@@ -35,7 +35,7 @@ const Copyright = () => (
     <ColoredTypography variant="body2" color={theme.palette.text.title}>
       {' by '}
       <Link color={theme.palette.text.title} href="https://cesium.di.uminho.pt">
-        CeSIUM
+        <>CeSIUM</>
       </Link>
       .
     </ColoredTypography>
@@ -75,13 +75,13 @@ const Footer = ({
               color={theme.palette.text.title}
               href="/docs/survival-guide.pdf"
             >
-              Survival Guide
+              <>Survival Guide</>
             </Link>
           </Typography>
           <span>&#160;&#160;&#160;&#160;</span>
           <Typography variant="body2">
             <Link color={theme.palette.text.title} href="/codeofconduct">
-              Code of Conduct
+              <>Code of Conduct</>
             </Link>
           </Typography>
         </Wrapper>

components/SEO.js

@@ -24,7 +24,7 @@ const SEO = ({ event, social }) => (
     <meta name="twitter:title" content={`${event.name} ${event.year}`} />
     <meta name="twitter:description" content={event.description} />
     <meta property="twitter:url" content={event.url} />
-    <meta name="twitter:creator" content={`@{social.twitter}`} />
+    <meta name="twitter:creator" content={`@${social.twitter}`} />
     <meta name="twitter:site" content={`@${social.twitter}`} />
     <meta property="twitter:image" content={event.cover} />
   </>

components/Speaker.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from '@material-ui/core/styles';
 import {
   Card,
@@ -76,7 +76,7 @@ function Speaker({
   title,
   shortbio,
 }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
 
   const handleExpandClick = () => {
     setExpanded(!expanded);

components/homepage/About.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import VolumeOffRoundedIcon from '@material-ui/icons/VolumeOffRounded';
@@ -29,7 +29,7 @@ const StyledIconButton = styled(IconButton)(({ hover }) => ({
 }));
 
 function About({ url, thumbnail }) {
-  const [muted, setMuted] = React.useState(true);
+  const [muted, setMuted] = useState(true);
   const handleButton = () => {
     if (muted) setMuted(false);
     else setMuted(true);

components/homepage/HowToGetHere.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from '@material-ui/core/styles';
 import {
   Grid,
@@ -61,7 +61,7 @@ const MeanHeader = styled(Grid)({
 });
 
 function Mean({ title, desc }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
 
   const handleExpandClick = () => {
     setExpanded(!expanded);

components/homepage/TextAbout.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { styled } from '@material-ui/core/styles';
 import { Typography, Paper } from '@material-ui/core';
 import PropTypes from 'prop-types';
@@ -24,18 +24,18 @@ const MessageTypography = styled(Typography)(({ color }) => ({
 }));
 
 function TextAbout({ messages, messageColor, backgroundColor, paperColor }) {
-  const [ticks, setTicks] = React.useState(0);
+  const [ticks, setTicks] = useState(0);
   const message = messages[ticks];
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => {
       setTicks((t) => (t + 1) % messages.length);
     }, 2000);
 
     return () => {
       clearInterval(interval);
     };
-  }, []);
+  }, [messages.length]);
 
   return (
     <TopSection

components/moonstone/AttendeeProfile.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
 import fetch from 'isomorphic-unfetch';
@@ -7,7 +7,7 @@ import AttendeeInfo from './profile/AttendeeInfo';
 import Badges from './profile/Badges';
 import CenteredCircularProgress from '../CenteredCircularProgress';
 
-class AttendeeProfile extends React.Component {
+class AttendeeProfile extends Component {
   constructor(props) {
     super(props);
     this.updateState = this.updateState.bind(this);

components/moonstone/CompanyProfile.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
 import fetch from 'isomorphic-unfetch';
 import MoonstoneLayout from './MoonstoneLayout';
 import CompanyInfo from './profile/CompanyInfo';
 import CenteredCircularProgress from '../CenteredCircularProgress';
 
-class CompanyProfile extends React.Component {
+class CompanyProfile extends Component {
   constructor(props) {
     super(props);
     this.state = {

components/moonstone/Form.js

@@ -93,7 +93,7 @@ FormGrid.propTypes = {
   children: PropTypes.node.isRequired,
   isLoading: PropTypes.bool.isRequired,
   errorMessage: PropTypes.string.isRequired,
-  successMessage: PropTypes.string.isRequired,
+  successMessage: PropTypes.string,
   handleSubmit: PropTypes.func.isRequired,
   noPadding: PropTypes.bool,
   signup: PropTypes.bool,

components/moonstone/profile/AttendeeInfo.js

@@ -78,7 +78,7 @@ export default function AttendeeInfo({ data, allowEdits, handleUpdateData }) {
 
   const handleNicknameClose = useCallback(() => {
     setModalNickname(false);
-  });
+  }, []);
 
   return (
     <>

components/navbar/BurgerButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Drawer,
@@ -60,7 +60,7 @@ const MoonstoneOptions = () => {
 
 function BurgerButton() {
   const classes = useStyles();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   const handleClick = () => {
     if (open) {
@@ -80,7 +80,7 @@ function BurgerButton() {
           <Spacer />
           <List>
             {global.navbar.pages.map((page) => (
-              <Link href={page.link}>
+              <Link href={page.link} key={page.name}>
                 <ListItem button key={page.name}>
                   <Item primary={page.name} />
                 </ListItem>

components/navbar/NavBar.js

@@ -95,7 +95,7 @@ export default function ButtonAppBar() {
               <MoonstoneOptions />
               {global.navbar.pages
                 .map((page) => (
-                  <Grid item>
+                  <Grid item key={page.name}>
                     <Link href={page.link}>
                       <Entry color="inherit">{page.name}</Entry>
                     </Link>

data/global.json

@@ -24,6 +24,7 @@
       { "name": "Agenda", "link": "/agenda" },
       { "name": "Oradores", "link": "/speakers" },
       { "name": "Desafios e Prémios", "link": "/challenges" },
+      { "name": "Equipa", "link": "/team" },
       { "name": "Embaixadores", "link": "/ambassadors" },
       { "name": "Candidaturas", "link": "/applications" },
       { "name": "FAQs", "link": "/faqs" },