Merge branch 'master' into 'production'

master to production merge

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!31

.eslintrc.json

@@ -5,10 +5,15 @@
         "node": true
     },
     "extends": [
-        "airbnb",
-        "airbnb/hooks",
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:jsx-a11y/recommended",
+        "plugin:react-hooks/recommended",
         "plugin:@typescript-eslint/recommended",
-        "plugin:react/recommended"
+        "airbnb-typescript",
+        "airbnb/hooks"
     ],
     "globals": {
         "Atomics": "readonly",
@@ -33,32 +38,23 @@
         }
     },
     "rules": {
-        "camelcase": "off",
+        "@typescript-eslint/naming-convention": "off",
         "max-len": [
             "warn",
             160
         ],
-          "no-mixed-operators": "off",
-          "no-shadow": "off",
-          "no-use-before-define": "off",
-          "quotes": [
+        "@typescript-eslint/quotes": [
         "error",
         "double"
         ],
-          "import/extensions": "off",
-          "import/no-unresolved": "off",
-          "import/order": "off",
         "import/prefer-default-export": "warn",
-          "operator-linebreak": "off",
-          "no-unused-vars": "off",
-          "react/jsx-filename-extension": "off",
-          "react/jsx-one-expression-per-line": "off",
         "react/jsx-props-no-spreading": "off",
         "react/prop-types": "off",
-          "@typescript-eslint/no-shadow": "error",
         // Temp
+        "react/jsx-one-expression-per-line": "off",
         "react/no-array-index-key": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
         "jsx-a11y/alt-text": "off",
         "jsx-a11y/iframe-has-title": "off",
         "jsx-a11y/label-has-associated-control": "off",

package.json

@@ -49,14 +49,14 @@
     "@types/react-jsonschema-form": "1.7.3",
     "@types/shortid": "0.0.29",
     "@types/styled-components": "5.1.1",
-    "@typescript-eslint/eslint-plugin": "4.8.2",
-    "@typescript-eslint/parser": "4.8.2",
+    "@typescript-eslint/eslint-plugin": "4.15.0",
+    "@typescript-eslint/parser": "4.15.0",
     "babel-plugin-styled-components": "1.10.7",
-    "eslint": "7.14.0",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint": "7.19.0",
+    "eslint-config-airbnb-typescript": "12.3.1",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "husky": "1.3.1",
     "npm-run-all": "4.1.5",

src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import AccordionIcon from "./AccordionIcon";
 import { colors } from "@theme/colors";
+import AccordionIcon from "./AccordionIcon";
 
 const Container = styled.div`
   margin: 0.2em;

src/components/AddLink.tsx

@@ -22,7 +22,7 @@ const StyledLink = styled(Link)`
 
 type AddLinkProps = ComponentProps<typeof Link> & {
   text: string;
-}
+};
 
 const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
   <StyledLink passHref {...props}>

src/components/AdminHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import HeaderLogo from "./HeaderLogo";
 import { colors } from "@theme/colors";
+import HeaderLogo from "./HeaderLogo";
 
 const Header = styled.header`
   background-color: ${colors.darkBlue};

src/components/CommitteeContainer.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import ContactCard from "./ContactCard";
 import { Committee } from "@views/ContactsPage/ContactsPageView";
 import { colors } from "@theme/colors";
+import ContactCard from "./ContactCard";
 
 const blank_profile = "/img/blank_profile.png";
 

src/components/Header.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
-import Navigation from "./Navigation";
 import throttle from "lodash/throttle";
 import styled from "styled-components";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
+import Navigation from "./Navigation";
 import NavigationMobile from "./NavigationMobile";
 import HeaderLogo from "./HeaderLogo";
 

src/components/NavbarDropdownLink.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import DropDownBox from "./DropDownBox";
 import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
+import DropDownBox from "./DropDownBox";
 
 const Container = styled.div`
   position: relative;

src/components/Widgets/Checkbox/Checkboxes.tsx

@@ -33,10 +33,8 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
     <div className="checkboxes" id={id}>
       {enumOptions.map((option, index) => {
         const checked = value.indexOf(option.value) !== -1;
-        const itemDisabled =
-      enumDisabled && enumDisabled.indexOf(option.value) !== -1;
-        const disabledCls =
-      disabled || itemDisabled || readonly ? "disabled" : "";
+        const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+        const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
         const checkbox = (
           <Checkbox
             id={`${id}_${index}`}

src/components/Widgets/RadioButton/RadioButtonWidget.tsx

@@ -33,10 +33,8 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
     <div className="field-radio-group" id={id}>
       {enumOptions.map((option, i) => {
         const checked = option.value === value;
-        const itemDisabled =
-          enumDisabled && enumDisabled.indexOf(option.value) !== -1;
-        const disabledCls =
-          disabled || itemDisabled || readonly ? "disabled" : "";
+        const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+        const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
         const radio = (
           <RadioButton
             checked={checked}

src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import Checkbox from "@components/Widgets/Checkbox/Checkbox";
 import {
   Question, InputProps, optionTypes, SignupQuestionError,
-} from "./index";
-import Checkbox from "@components/Widgets/Checkbox/Checkbox";
+} from "./common";
 
 interface OptionsWidgetProps {
   inputProps: InputProps;
@@ -17,7 +17,7 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     // eslint-disable-next-line no-param-reassign
     questions[index].options = lst;
     onChange(questions);
-  }
+  };
 
   handleTextOptionsChange = (questions: Question[], index: number) => (event) => {
     const { onChange } = this.props;
@@ -25,7 +25,7 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     // eslint-disable-next-line no-param-reassign
     questions[index].options = val;
     onChange(questions);
-  }
+  };
 
   handleIntegerOptionsChange = (questions: Question[], index: number) => (event) => {
     const { onChange } = this.props;
@@ -41,7 +41,7 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     }
 
     onChange(questions);
-  }
+  };
 
   handleRequiredChange = (questions: Question[], index: number) => (event) => {
     const { onChange } = this.props;
@@ -50,7 +50,7 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     // eslint-disable-next-line no-param-reassign
     questions[index].required = val;
     onChange(questions);
-  }
+  };
 
   requiredField() {
     const { inputProps } = this.props;

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 import { Draggable } from "react-beautiful-dnd";
-import { Question, InputProps } from "./index";
+import { colors } from "@theme/colors";
+import { Question, InputProps } from "./common";
 import OptionsWidget from "./OptionsWidget";
 import TypeWidget from "./TypeWidget";
 import QuestionElement from "./Question";
-import { colors } from "@theme/colors";
 
 const WidgetRow = styled.div`
   margin-bottom: 1rem;
@@ -25,7 +25,7 @@ interface QuestionListProps {
 class QuestionList extends React.Component<QuestionListProps> {
   renderTextWidget = ({ questions, value, index }: InputProps) => (
     <input type="text" value={value} onChange={this.handleNameInputChange(questions, index)} />
-  )
+  );
 
   handleNameInputChange = (questions: Question[], index: number) => (event) => {
     const { onChange } = this.props;
@@ -33,17 +33,17 @@ class QuestionList extends React.Component<QuestionListProps> {
     // eslint-disable-next-line no-param-reassign
     questions[index].name = val;
     onChange(questions);
-  }
+  };
 
   handleElementRemove = (questions: Question[], index: number) => () => {
     const { onChange } = this.props;
     const newQuestions = [...questions];
     newQuestions.splice(index, 1);
     onChange(newQuestions);
-  }
+  };
 
   renderQuestions() {
-    const { questions, onChange, placeholder } = this.props;
+    const { questions, onChange } = this.props;
     return questions.map((q, index) => {
       const nameWidgetProps = {
         value: q.name, type: "text", questions, index,

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import styled from "styled-components";
 import shortid from "shortid";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
-import { Question } from ".";
 import colors from "@theme/colors";
-import QuestionList from "./QuestionList";
 import AddIcon from "@components/AddIcon";
+import QuestionList from "./QuestionList";
+import { Question } from "./common";
 
 const Widget = styled.div`
   & > button {
@@ -21,6 +21,7 @@ const Widget = styled.div`
       margin-right: 8px !important;
       margin-top: -2px !important;
     }
+
   }
 `;
 

src/components/Widgets/SignupQuestionsWidget/TypeWidget.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Question, InputProps, optionTypes } from "./index";
+import { Question, InputProps, optionTypes } from "./common";
 
 interface TypeWidgetProps {
   inputProps: InputProps;
@@ -13,7 +13,7 @@ class TypeWidget extends React.Component<TypeWidgetProps> {
     // eslint-disable-next-line no-param-reassign
     questions[index].type = val;
     onChange(questions);
-  }
+  };
 
   render() {
     const { inputProps } = this.props;

src/components/Widgets/SignupQuestionsWidget/common.ts

@@ -1,5 +1,3 @@
-import SignupQuestionsWidget from "./SignupQuestionsWidget";
-
 export interface Question {
   id: string;
   name: string;
@@ -35,5 +33,3 @@ export const optionTypes = [
 ];
 
 export class SignupQuestionError extends Error { }
-
-export default SignupQuestionsWidget;

src/models/SignupForm.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { getAuthHeader } from "@utils/auth";
-import { Question } from "@components/Widgets/SignupQuestionsWidget";
+import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
 import { Signup } from "./Signup";
 
 const URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;

src/pages/_app.tsx

@@ -33,8 +33,8 @@ html {
   }
 
   @media screen and (min-width: 2560px) {
-    /* 32px */
-    font-size: ${fontSize * 2}pt;
+    /* 24px */
+    font-size: ${fontSize * 1.5}pt;
   }
 }
 
@@ -128,12 +128,12 @@ const Web20App = ({ Component, pageProps }: AppProps) => (
     <Head>
       <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900&display=swap" rel="stylesheet" />
-      {/* <link rel="icon" href="/favicon.ico" /> */}
-      {/* <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> */}
+      <link rel="icon" href="/favicon.png" />
+      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      {/* <meta name="description" content="SIK turns 100 years old!" /> */}
-      {/* <meta name="keywords" content="SIK100" /> */}
-      {/* <title>SIK100</title> */}
+      <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
+      <meta name="description" content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon." />
+      <meta name="keywords" content="SIK AYY" />
       {/* <link rel="manifest" href="/manifest.json" /> */}
       {/* <link rel="apple-touch-icon" href="/logo192.png" /> */}
       {/* <meta name="theme-color" content={theme.colors.darkBlue2} /> */}

src/pages/admin/jobads/index.tsx

@@ -29,8 +29,8 @@ const renderData = (jobAds: JobAd[]) => {
             <td><Link to={`${URL}/${ad.id}`}>{ad.title_fi}</Link></td>
             <td>{ad.description_fi}</td>
             <td>
-              {ad.autohide_enabled ?
-                formatRelative(new Date(ad.autohide_at), new Date())
+              {ad.autohide_enabled
+                ? formatRelative(new Date(ad.autohide_at), new Date())
                 : "Disabled"}
             </td>
           </tr>

src/pages/admin/signups/[id].tsx

@@ -7,14 +7,14 @@ import {
   SignupForm, createForm, getForm, updateForm,
 } from "@models/SignupForm";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
-import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget";
+import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
 import { buildValidationSchema } from "@views/SignUpPage/FormUtils";
 
-const DEFAULT_EMAIL =
-`Moikka,
+const DEFAULT_EMAIL = `Moikka,
 
 Ilmottautuminen saapui perille.`;
+
 const widgets = {
   datetime: DatetimeWidget,
   signup: SignupQuestionsWidget,

src/pages/events/[id].tsx

@@ -16,6 +16,7 @@ interface InitialProps {
 const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
   const router = useRouter();
   const { id } = router.query;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { data, error } = useFetchEvents({ initialData: initialEvent, id: id as string });
   if (!data) return <LoadingView />;
 

src/pages/signup/[...params].tsx

@@ -67,11 +67,11 @@ const SignUpPage: NextPage = () => {
 
     try {
       if (uuid) {
-        const resp = await updateSignup(payload, uuid);
+        await updateSignup(payload, uuid);
         // TODO: Update signup list, so user sees possible changes in the list
         setStatus("Sign-up submission updated successfully");
       } else {
-        const resp = await createSignup(payload);
+        await createSignup(payload);
         // TODO: Fetch/update signup list, so user sees the signup in the list
         setStatus("Sign-up submitted successfully");
       }

src/pages/yritysyhteistyo.tsx

@@ -12,6 +12,7 @@ interface InitialProps {
 }
 
 const CorporatePage: NextPage<InitialProps> = ({ initialJobAds }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { data, error } = useFetchJobAds({ initialData: initialJobAds });
   return (
     <>

src/views/ActualPage/EventCalendar.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import { Event } from "@models/Event";
 import Button from "@components/Button";
 
-import FilterContainer from "./FilterContainer";
 import { CardSection, Card, FullWidthSection } from "@components/index";
 import noop from "@utils/noop";
+import FilterContainer from "./FilterContainer";
 
 interface EventCalendarProps {
   events: Event[];

src/views/ActualPage/News.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import { Post } from "@models/Feed";
 import Button from "@components/Button";
 
-import FilterContainer from "./FilterContainer";
 import { CardSection, Card, FullWidthSection } from "@components/index";
 import noop from "@utils/noop";
+import FilterContainer from "./FilterContainer";
 
 interface NewsProps {
   feed: Post[];

src/views/CorporatePage/CorporatePageView.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import CorporatePageHero from "./CorporatePageHero";
 import {
   CTASection, TextSection, PageLink, Link,
 } from "@components/index";
 import { JobAd } from "@models/JobAd";
+import CorporatePageHero from "./CorporatePageHero";
 import JobAdList from "./JobAdList";
 
 const EXCURSION_RULES = "https://static.sahkoinsinoorikilta.fi/saannot/excursiosaannot.pdf";

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
-import FreshmenPageHero from "./FreshmenPageHero";
 import {
   CTASection, TextSection, InfoBox, PageLink, Link,
 } from "@components/index";
+import FreshmenPageHero from "./FreshmenPageHero";
 
 const FOPAS_LINK = "";
 const FUKSI_POINTS_LINK = "";

src/views/FrontPage/FrontPageView.tsx

@@ -9,13 +9,13 @@ import {
   CTASection,
   Link,
 } from "@components/index";
-import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
 import { colors } from "@theme/colors";
 
 import FullWidthSection from "@components/Sections/FullWidthSection";
 import noop from "@utils/noop";
+import FrontPageHero from "./FrontPageHero";
 
 // Corporate logos import
 const ABB = "/img/corporate_logos/abb.png";

src/views/GuildPage/GuildPageView.tsx

@@ -3,10 +3,10 @@ import styled from "styled-components";
 import {
   CTASection, TextSection, PageLink, Link,
 } from "@components/index";
-import GuildPageHero from "./GuildPageHero";
 import FullWidthSection from "@components/Sections/FullWidthSection";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
+import GuildPageHero from "./GuildPageHero";
 
 const Column = styled.div`
   display: flex;
@@ -60,7 +60,7 @@ const GuildPageView: React.FC = () => (
 
       <aside>
         <div>
-          <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
+          <PageLink to="https://api.sahkoinsinoorikilta.fi/members/application/" desc="ja tule mukaan toimintaamme&nbsp;›">
             Liity jäseneksi
           </PageLink>
         </div>

src/views/SignUpPage/FormUtils.tsx

@@ -1,4 +1,4 @@
-import { Question } from "@components/Widgets/SignupQuestionsWidget";
+import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
 import { SignupForm } from "@models/SignupForm";
 import { EMAIL_REGEX } from "@utils/regexes";
 import escapeRegExp from "lodash/escapeRegExp";

src/views/SignUpPage/SignUpPageView.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import styled from "styled-components";
 import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
 import { SignupForm } from "@models/SignupForm";
-import { buildFormSchema, buildUISchema } from "./FormUtils";
 import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
 import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
 import { TextSection } from "@components/index";
 import { colors } from "@theme/colors";
 import FormWrapper from "@views/common/FormWrapper";
 import Loader from "@components/Loader";
+import { buildFormSchema, buildUISchema } from "./FormUtils";
 
 const customWidgets = {
   radio: RadioButtonWidget,

src/views/admin/AdminCreateCommon.tsx

@@ -51,7 +51,7 @@ type AdminCreateCommonProps = {
   widgets: {
     [name: string]: any;
   };
-}
+};
 
 const AdminCreateCommon: React.FC<AdminCreateCommonProps> = ({
   title,

src/views/common/AdminPageWrapper.tsx

@@ -58,7 +58,7 @@ const useShouldRedirect = (enabled = true) => {
 
 type PageProps = {
   requiresAuthentication: boolean;
-}
+};
 
 const AdminPageWrapper: React.FC<PageProps> = ({ requiresAuthentication, children }) => {
   const router = useRouter();