Merge pull request #2 from zdam-egzamin-zawodowy/develop

merge develop into master

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  extends: ['react-app'],
+  rules: {
+    'react/react-in-jsx-scope': 0,
+    'react/jsx-pascal-case': [
+      'warn',
+      {
+        ignore: [],
+      },
+    ],
+  },
+};

eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "react-app"
-}

package.json

@@ -8,7 +8,8 @@
     "postbuild": "next-sitemap",
     "start": "next start",
     "start:production": "NODE_ENV=production yarn run start",
-    "codegen": "graphql-codegen"
+    "codegen": "graphql-codegen",
+    "lint": "eslint . --ext ts --ext tsx --ext js"
   },
   "dependencies": {
     "@kichiyaki/roboto": "^1.0.0",

src/common/Section/Section.tsx

@@ -32,12 +32,12 @@ const Section = ({
   return (
     <section
       className={clsx(className, classes.section, {
-        ['is-medium']: size === Size.Medium,
-        ['is-large']: size === Size.Large,
-        ['is-primary']: bgColor === BgColor.Primary,
-        ['is-primary-dark']: bgColor === BgColor.PrimaryDark,
-        ['is-secondary']: bgColor === BgColor.Secondary,
-        ['is-secondary-dark']: bgColor === BgColor.SecondaryDark,
+        'is-medium': size === Size.Medium,
+        'is-large': size === Size.Large,
+        'is-primary': bgColor === BgColor.Primary,
+        'is-primary-dark': bgColor === BgColor.PrimaryDark,
+        'is-secondary': bgColor === BgColor.Secondary,
+        'is-secondary-dark': bgColor === BgColor.SecondaryDark,
       })}
       {...rest}
     >

src/common/Seo/Seo.tsx

@@ -13,7 +13,7 @@ export interface SEOProps {
   description?: string;
 }
 
-const SEO = ({ title, description = DEFAULT_DESCRIPTION }: SEOProps) => {
+const Seo = ({ title, description = DEFAULT_DESCRIPTION }: SEOProps) => {
   const { asPath } = useRouter();
   const formattedTitle = title ? `${title} | ${NAME}` : NAME;
   return (
@@ -51,4 +51,4 @@ const SEO = ({ title, description = DEFAULT_DESCRIPTION }: SEOProps) => {
   );
 };
 
-export default SEO;
+export default Seo;

src/features/ErrorPage/ErrorPage.tsx

@@ -4,7 +4,7 @@ import { ErrorProps } from 'next/error';
 import { Box, Typography } from '@material-ui/core';
 import Layout from 'common/Layout/Layout';
 import Section from 'common/Section/Section';
-import SEO from 'common/SEO/SEO';
+import Seo from 'common/Seo/Seo';
 
 const getTitleForStatusCode = (statusCode: number): string => {
   switch (statusCode) {
@@ -19,7 +19,7 @@ const ErrorPage: NextPage<ErrorProps> = ({ statusCode, title }: ErrorProps) => {
   const _title = title ?? getTitleForStatusCode(statusCode);
   return (
     <Layout>
-      <SEO title={_title} />
+      <Seo title={_title} />
       <Box
         minHeight="80vh"
         display="flex"

src/features/IndexPage/IndexPage.tsx

@@ -9,7 +9,7 @@ import {
 import { QUERY_PROFESSIONS } from './queries';
 
 import { Divider } from '@material-ui/core';
-import SEO from 'common/SEO/SEO';
+import Seo from 'common/Seo/Seo';
 import Layout from 'common/Layout/Layout';
 import Header from './components/Header/Header';
 import Timer from './components/Timer/Timer';
@@ -31,7 +31,7 @@ const IndexPage = ({
 }: IndexPageProps) => {
   return (
     <Layout padding={false}>
-      <SEO title="Strona główna" />
+      <Seo title="Strona główna" />
       <Header qualifications={qualifications} />
       <Timer dateOfTheExam={dateOfTheExam} />
       <AboutExam />

src/features/IndexPage/components/Header/QualificationSelector.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 import { Maybe, Qualification } from 'libs/graphql';
 import { SECTION_ID as PROFESSIONS_SECTION_ID } from '../Professions/Professions';
 

src/features/IndexPage/components/Timer/Timer.tsx

@@ -3,7 +3,7 @@ import { useCountdown } from 'libs/hooks';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Container, Grid, Typography } from '@material-ui/core';
-import Section, { BgColor, Size } from 'common/Section/Section';
+import Section, { BgColor } from 'common/Section/Section';
 
 export interface TimerProps {
   dateOfTheExam: Date | string;

src/features/PrivacyPolicyPage/PrivacyPolicyPage.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Container, Typography, Divider, Link } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import Layout from 'common/Layout/Layout';
-import SEO from 'common/SEO/SEO';
+import Seo from 'common/Seo/Seo';
 
 const DESCRIPTION =
   'Polityka prywatności opisuje zasady przetwarzania przez zdamegzaminzawodowy.pl informacji na Twój temat, w tym danych osobowych oraz ciasteczek, czyli tzw. cookies.';
@@ -13,7 +13,7 @@ function PrivacyPolicyPage() {
   const classes = useStyles();
   return (
     <Layout>
-      <SEO title="Polityka prywatności" description={DESCRIPTION} />
+      <Seo title="Polityka prywatności" description={DESCRIPTION} />
       <Container component="article">
         <Typography
           className={classes.paddingVertical}

src/features/QualificationPage/features/TestPage/TestPage.tsx

@@ -17,7 +17,7 @@ import {
 import { QueryGenerateTestSimilarQualificationsArgs } from './types';
 
 import Layout from 'common/Layout/Layout';
-import SEO from 'common/SEO/SEO';
+import Seo from 'common/Seo/Seo';
 import Suggestions from './components/Suggestions/Suggestions';
 import Test from './components/Test/Test';
 
@@ -35,7 +35,7 @@ export interface TestPageProps {
 const TestPage = ({ questions, suggestions, qualification }: TestPageProps) => {
   return (
     <Layout>
-      <SEO
+      <Seo
         title={`${qualification.code} - Test ${
           questions.length
         } ${polishPlurals('pytanie', 'pytania', 'pytań', questions.length)}`}

src/libs/hooks/usePrompt.ts

@@ -3,6 +3,13 @@ import { useEffect, useRef, useCallback } from 'react';
 export const usePrompt = (when: boolean) => {
   const whenRef = useRef(when);
 
+  const handleUnload = useCallback((event: BeforeUnloadEvent) => {
+    if (whenRef.current) {
+      event.preventDefault();
+      event.returnValue = '';
+    }
+  }, []);
+
   useEffect(() => {
     whenRef.current = when;
   }, [when]);
@@ -12,12 +19,5 @@ export const usePrompt = (when: boolean) => {
     return () => {
       window.removeEventListener('beforeunload', handleUnload);
     };
-  }, []);
-
-  const handleUnload = useCallback((event: BeforeUnloadEvent) => {
-    if (whenRef.current) {
-      event.preventDefault();
-      event.returnValue = '';
-    }
-  }, []);
+  }, [handleUnload]);
 };