Merge pull request #846 from itdagene-ntnu/update-next

Update next
itdagene-ntnu · Jan 18, 2023 · 7367734 · 7367734
2 parents b6f9fd1 + d7d5416
commit 7367734
Show file tree

Hide file tree

Showing 40 changed files with 2,310 additions and 3,356 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -26,6 +26,7 @@
   "rules": {
     "react/prop-types": 0,
     "react/display-name": 2,
+    "react/react-in-jsx-scope": "off",
     "relay/graphql-syntax": 2,
     "relay/compat-uses-vars": 1,
     "relay/graphql-naming": 2,

diff --git a/components/BoardMember.tsx b/components/BoardMember.tsx
@@ -1,18 +1,33 @@
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 import { BoardMember_user } from '../__generated__/BoardMember_user.graphql';
-import Flex, { FlexItem } from 'styled-flex-component';
-
 import { Image, CenterIt } from './Styled';
 import styled from 'styled-components';
 
+const Div = styled('div')`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  flex-direction: column;
+`;
+
+const DivItem = styled('div')`
+  order: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: block;
+`;
+
 const RoundHead = styled(Image)`
   border-radius: 2000px;
   width: 195px;
   height: 195px;
 `;
 
-const Card = styled(FlexItem)`
+const Card = styled(DivItem)`
   margin: 15px;
 `;
 
@@ -26,13 +41,13 @@ const BoardMember = ({
   <Card>
     <CenterIt text>
       <RoundHead src={photo || ''} />
-      <Flex column>
+      <Div>
         <h4 style={{ fontSize: 15, marginBottom: 0 }}>{fullName}</h4>
         <i>{role}</i>
         <a style={{ fontSize: '12px' }} href={`mailto:${email}`}>
           {email}
         </a>
-      </Flex>
+      </Div>
     </CenterIt>
   </Card>
 );

diff --git a/components/Collaborators/CollaboratorStyle.ts b/components/Collaborators/CollaboratorStyle.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Div = styled('div')`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-strt;
+  align-content: stretch;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
diff --git a/components/Collaborators/Collaborators.tsx b/components/Collaborators/Collaborators.tsx
@@ -1,10 +1,9 @@
 import { createFragmentContainer, graphql } from 'react-relay';
-import React from 'react';
 
 import { Collaborators_query } from '../../__generated__/Collaborators_query.graphql';
 import CollaboratorView from './Collaborator';
-import Flex from 'styled-flex-component';
 import styled from 'styled-components';
+import { Div } from './CollaboratorStyle';
 
 type Props = {
   query: Collaborators_query;
@@ -24,7 +23,7 @@ const Collaborators = ({
   query.collaborators ? (
     <>
       <Title>Våre samarbeidspartnere</Title>
-      <Flex wrap justifyCenter>
+      <Div>
         {query.collaborators.map((company) => (
           <CollaboratorView
             showJoblistings={showJoblistings}
@@ -33,7 +32,7 @@ const Collaborators = ({
             company={company}
           />
         ))}
-      </Flex>
+      </Div>
     </>
   ) : null;
 

diff --git a/components/Collaborators/MainCollaborator.tsx b/components/Collaborators/MainCollaborator.tsx
@@ -1,17 +1,30 @@
 import { useFragment, graphql } from 'relay-hooks';
 import { ZoomImage, CenterIt } from '../Styled';
-import Flex, { FlexItem } from 'styled-flex-component';
 import styled from 'styled-components';
 import { Player } from 'video-react';
-
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-
 import {
   MainCollaborator_company,
   MainCollaborator_company$key,
 } from '../../__generated__/MainCollaborator_company.graphql';
 
+const Div = styled('div')`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-content: stretch;
+`;
+
+const DivItem = styled('div')`
+  order: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: block;
+`;
+
 type Props = {
   company: MainCollaborator_company$key;
   showDescription?: boolean;
@@ -61,18 +74,18 @@ const MainCollaborator = ({
   );
 
   return (
-    <Flex justifyAround column>
-      <FlexItem>
+    <Div>
+      <DivItem>
         <CenterIt text>
           <Title>Hovedsamarbeidspartner</Title>
         </CenterIt>
-      </FlexItem>
-      <FlexItem>
-        <FlexItem>
+      </DivItem>
+      <DivItem>
+        <DivItem>
           <a href={company.url || ''}>
             <HSPLogo src={company.logo || ''} alt="Logo" />
           </a>
-        </FlexItem>
+        </DivItem>
         <CenterIt text>
           <p>
             <b>
@@ -97,8 +110,8 @@ const MainCollaborator = ({
             'Missing main collaborator video!'
           )}
         </CenterIt>
-      </FlexItem>
-    </Flex>
+      </DivItem>
+    </Div>
   );
 };
 

diff --git a/components/CompactProgram/index.tsx b/components/CompactProgram/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Flex, { FlexItem } from 'styled-flex-component';
 import { CenterIt } from '../Styled';
 import styled from 'styled-components';
 import Link from 'next/link';
@@ -10,6 +9,30 @@ import {
   indigoDye,
 } from '../../utils/colors';
 
+const DivWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-content: stretch;
+`;
+
+const Div = styled('div')`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: stretch;
+`;
+
+const DivItem = styled('div')`
+  order: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: block;
+`;
+
 const Title = styled('h1')`
   @media only screen and (max-width: 767px) {
     font-size: 1.5em;
@@ -50,49 +73,47 @@ const ReadMore = styled('h4')`
 `;
 
 const CompactProgram = (): JSX.Element => (
-  <Flex justifyAround column>
-    <FlexItem>
+  <DivWrapper>
+    <DivItem>
       <Title>Hva skjer under itDAGENE?</Title>
-    </FlexItem>
-    <Flex row wrap>
+    </DivItem>
+    <Div>
       <Tile color={blueNCS}>
-        <Link href="/jobb">
+        <Link href="/jobb" legacyBehavior>
           <CenterIt text>
             <StyledLink>Jobb</StyledLink>
           </CenterIt>
         </Link>
       </Tile>
       <Tile color={princetonOrange}>
-        <Link href="/program">
+        <Link href="/program" legacyBehavior>
           <CenterIt text>
             <StyledLink>Program</StyledLink>
           </CenterIt>
         </Link>
       </Tile>
       <Tile color={skyBlue}>
-        <Link href="/info/stands">
+        <Link href="/info/stands" legacyBehavior>
           <CenterIt text>
             <StyledLink>Stands</StyledLink>
           </CenterIt>
         </Link>
       </Tile>
       <Tile color={indigoDye}>
-        <Link href="/info/bankett">
+        <Link href="/info/bankett" legacyBehavior>
           <CenterIt text>
             <StyledLink>Bankett</StyledLink>
           </CenterIt>
         </Link>
       </Tile>
-    </Flex>
+    </Div>
 
     <CenterIt text>
       <Link href="/program">
-        <a>
-          <ReadMore>Les mer</ReadMore>
-        </a>
+        <ReadMore>Les mer</ReadMore>
       </Link>
     </CenterIt>
-  </Flex>
+  </DivWrapper>
 );
 
 export default CompactProgram;
diff --git a/components/Companies/Companies.tsx b/components/Companies/Companies.tsx
@@ -2,9 +2,9 @@ import { createFragmentContainer, graphql } from 'react-relay';
 import React, { Fragment } from 'react';
 import sortBy from 'lodash/sortBy';
 import styled from 'styled-components';
+import { Div } from './CompaniesStyle';
 
 //import Link from 'next/link';
-import Flex from 'styled-flex-component';
 import { Companies_query } from '../../__generated__/Companies_query.graphql';
 import CompanyView from './CompanyView';
 
@@ -32,11 +32,11 @@ const Companies = ({ query }: Props): JSX.Element => {
       {sections.map(({ title, data }) => (
         <Fragment key={title}>
           <Title>{title}</Title>
-          <Flex wrap justifyAround>
+          <Div>
             {data.map((company) => (
               <CompanyView key={company.id} company={company} />
             ))}
-          </Flex>
+          </Div>
           <div style={{ height: '100px' }} />
           {/*
           <h4 style={{ textAlign: 'center' }}>

diff --git a/components/Companies/CompaniesStyle.ts b/components/Companies/CompaniesStyle.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Div = styled('div')`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-strt;
+  align-content: stretch;
+  flex-wrap: wrap;
+  justify-content: space-around;
+`;
diff --git a/components/Countdown/index.tsx b/components/Countdown/index.tsx
@@ -1,17 +1,25 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import Countdown from 'react-countdown-now';
 import { createFragmentContainer, graphql } from 'react-relay';
 import { Countdown_currentMetaData } from '../../__generated__/Countdown_currentMetaData.graphql';
 import dayjs from 'dayjs';
 import styled from 'styled-components';
-import Flex from 'styled-flex-component';
 import {
   blueNCS,
   princetonOrange,
   skyBlue,
   indigoDye,
 } from '../../utils/colors';
 
+const Div = styled('div')`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+`;
+
 const NumberBox = styled('div')`
   display: flex;
   flex-direction: column;
@@ -49,15 +57,19 @@ type RendererProps = {
   completed: boolean;
 };
 
-const renderer = ({
+const CountDownComponent = ({
   days,
   hours,
   minutes,
   seconds,
   completed,
-}: RendererProps): JSX.Element | boolean =>
-  !completed && (
-    <Flex center wrap>
+}: RendererProps) => {
+  const [staticDate, setStaticDate] = useState(true);
+  useEffect(() => {
+    setStaticDate(false);
+  }, []);
+  return (
+    <Div>
       <NumberBox color={blueNCS}>
         <Number>{days}</Number> <Text> dager </Text>
       </NumberBox>
@@ -68,9 +80,27 @@ const renderer = ({
         <Number>{minutes}</Number> <Text> minutter </Text>
       </NumberBox>
       <NumberBox color={indigoDye}>
-        <Number>{seconds}</Number> <Text> sekunder </Text>
+        <Number>{staticDate ? 0 : seconds}</Number> <Text> sekunder </Text>
       </NumberBox>
-    </Flex>
+    </Div>
+  );
+};
+
+const renderer = ({
+  days,
+  hours,
+  minutes,
+  seconds,
+  completed,
+}: RendererProps): JSX.Element | boolean =>
+  !completed && (
+    <CountDownComponent
+      days={days}
+      hours={hours}
+      minutes={minutes}
+      seconds={seconds}
+      completed={completed}
+    />
   );
 
 const CountdownComponent = (props: {