From 11df56b5e253268102d30542c3e48ee3ba8e22c7 Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Sat, 27 Mar 2021 10:19:31 +0100 Subject: [PATCH] add CheckMobileApp/Professions sections --- src/features/IndexPage/IndexPage.tsx | 10 +- .../components/AboutExam/AboutExam.tsx | 4 +- .../CheckMobileApp/CheckMobileApp.tsx | 29 ++++++ .../components/ExamParts/ExamParts.tsx | 10 +- .../IndexPage/components/Header/Header.tsx | 4 +- .../components/Professions/Profession.tsx | 96 +++++++++++++++++++ .../components/Professions/Professions.tsx | 26 +++++ src/features/IndexPage/queries.ts | 1 + src/libs/graphql/types.ts | 41 ++------ 9 files changed, 179 insertions(+), 42 deletions(-) create mode 100644 src/features/IndexPage/components/CheckMobileApp/CheckMobileApp.tsx create mode 100644 src/features/IndexPage/components/Professions/Profession.tsx create mode 100644 src/features/IndexPage/components/Professions/Professions.tsx diff --git a/src/features/IndexPage/IndexPage.tsx b/src/features/IndexPage/IndexPage.tsx index 56b3d2b..d80b90e 100644 --- a/src/features/IndexPage/IndexPage.tsx +++ b/src/features/IndexPage/IndexPage.tsx @@ -14,6 +14,8 @@ import Header from './components/Header/Header'; import Timer from './components/Timer/Timer'; import AboutExam from './components/AboutExam/AboutExam'; import ExamParts from './components/ExamParts/ExamParts'; +import CheckMobileApp from './components/CheckMobileApp/CheckMobileApp'; +import Professions from './components/Professions/Professions'; interface IndexPageProps { professions: Profession[]; @@ -21,7 +23,11 @@ interface IndexPageProps { dateOfTheExam: string; } -const IndexPage = ({ qualifications, dateOfTheExam }: IndexPageProps) => { +const IndexPage = ({ + qualifications, + dateOfTheExam, + professions, +}: IndexPageProps) => { return (
@@ -29,6 +35,8 @@ const IndexPage = ({ qualifications, dateOfTheExam }: IndexPageProps) => { + + ); }; diff --git a/src/features/IndexPage/components/AboutExam/AboutExam.tsx b/src/features/IndexPage/components/AboutExam/AboutExam.tsx index 3677f8f..090a9c4 100644 --- a/src/features/IndexPage/components/AboutExam/AboutExam.tsx +++ b/src/features/IndexPage/components/AboutExam/AboutExam.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Container, Typography } from '@material-ui/core'; import Section, { Size } from '../Section/Section'; -function AboutExam() { +const AboutExam = () => { return (
@@ -19,6 +19,6 @@ function AboutExam() {
); -} +}; export default AboutExam; diff --git a/src/features/IndexPage/components/CheckMobileApp/CheckMobileApp.tsx b/src/features/IndexPage/components/CheckMobileApp/CheckMobileApp.tsx new file mode 100644 index 0000000..c6a0a92 --- /dev/null +++ b/src/features/IndexPage/components/CheckMobileApp/CheckMobileApp.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { GOOGLE_PLAY_URL } from 'config/app'; + +import { Container, Typography } from '@material-ui/core'; +import Link from 'common/Link/Link'; +import Section, { BgColor } from '../Section/Section'; + +const CheckMobileApp = () => { + return ( +
+ + + Nie zapomnij sprawdzić naszej aplikacji mobilnej! + + + + Pobierz z Google Play + + + +
+ ); +}; + +export default CheckMobileApp; diff --git a/src/features/IndexPage/components/ExamParts/ExamParts.tsx b/src/features/IndexPage/components/ExamParts/ExamParts.tsx index 075686e..65d52d7 100644 --- a/src/features/IndexPage/components/ExamParts/ExamParts.tsx +++ b/src/features/IndexPage/components/ExamParts/ExamParts.tsx @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import { Typography, Container, Grid } from '@material-ui/core'; import Section, { Size } from '../Section/Section'; -function AboutSection() { +const ExamParts = () => { const classes = useStyles(); return (
@@ -16,7 +16,7 @@ function AboutSection() {
Część pisemna @@ -33,7 +33,7 @@ function AboutSection() {
Część praktyczna @@ -50,7 +50,7 @@ function AboutSection() {
); -} +}; const useStyles = makeStyles(theme => ({ examPart: { @@ -64,4 +64,4 @@ const useStyles = makeStyles(theme => ({ }, })); -export default AboutSection; +export default ExamParts; diff --git a/src/features/IndexPage/components/Header/Header.tsx b/src/features/IndexPage/components/Header/Header.tsx index 6e37311..7faa512 100644 --- a/src/features/IndexPage/components/Header/Header.tsx +++ b/src/features/IndexPage/components/Header/Header.tsx @@ -70,8 +70,8 @@ const useStyles = makeStyles(theme => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(3), + paddingTop: theme.spacing(5), + paddingBottom: theme.spacing(5), }, imageWrapper: { textAlign: 'center', diff --git a/src/features/IndexPage/components/Professions/Profession.tsx b/src/features/IndexPage/components/Professions/Profession.tsx new file mode 100644 index 0000000..75b1502 --- /dev/null +++ b/src/features/IndexPage/components/Professions/Profession.tsx @@ -0,0 +1,96 @@ +import { useMemo } from 'react'; +import { groupBy } from 'lodash'; +import { polishPlurals } from 'polish-plurals'; +import { Profession as ProfessionT } from 'libs/graphql'; +import { QUESTIONS } from 'config/app'; +import { Route } from 'config/routing'; + +import { makeStyles } from '@material-ui/core/styles'; +import { + Accordion, + AccordionSummary, + Typography, + AccordionDetails, +} from '@material-ui/core'; +import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons'; +import Link from 'common/Link/Link'; + +export interface ProfessionProps { + profession: ProfessionT; +} + +const Profession = ({ profession }: ProfessionProps) => { + const classes = useStyles(); + const qualificationsByFormula = useMemo(() => { + return groupBy(profession.qualifications, 'formula'); + }, [profession]); + + return ( + + }> + {profession.name} + + + {profession.qualifications.length > 0 ? ( + Object.keys(qualificationsByFormula).map(formula => { + const qualifications = qualificationsByFormula[formula]; + return ( +
+ {formula} + {qualifications.map(qualification => { + return ( + + + {qualification.name} ({qualification.code}) + {' '} + ->{' '} + {QUESTIONS.map(howManyQuestions => { + return ( + + Test {howManyQuestions}{' '} + {polishPlurals( + 'pytanie', + 'pytania', + 'pytań', + howManyQuestions + )}{' '} + + ); + })} + + ); + })} +
+ ); + }) + ) : ( + + Żadna kwalifikacja nie została przypisana do zawodu{' '} + {profession.name} + + )} + + + ); +}; + +const useStyles = makeStyles(theme => { + return { + accordionDetails: { + '& > *:not(:last-child)': { + marginBottom: theme.spacing(1), + }, + }, + }; +}); + +export default Profession; diff --git a/src/features/IndexPage/components/Professions/Professions.tsx b/src/features/IndexPage/components/Professions/Professions.tsx new file mode 100644 index 0000000..12fbbc8 --- /dev/null +++ b/src/features/IndexPage/components/Professions/Professions.tsx @@ -0,0 +1,26 @@ +import { Profession as ProfessionT } from 'libs/graphql'; + +import { Container, Typography } from '@material-ui/core'; +import Section, { Size } from '../Section/Section'; +import Profession from './Profession'; + +export interface ProfessionsProps { + professions: ProfessionT[]; +} + +const Professions = ({ professions }: ProfessionsProps) => { + return ( +
+ + + Lista dostępnych zawodów i kwalifikacji + + {professions.map(profession => { + return ; + })} + +
+ ); +}; + +export default Professions; diff --git a/src/features/IndexPage/queries.ts b/src/features/IndexPage/queries.ts index 25b2961..f537896 100644 --- a/src/features/IndexPage/queries.ts +++ b/src/features/IndexPage/queries.ts @@ -12,6 +12,7 @@ export const QUERY_PROFESSIONS = gql` slug code name + formula } } } diff --git a/src/libs/graphql/types.ts b/src/libs/graphql/types.ts index 664728b..e6702f5 100644 --- a/src/libs/graphql/types.ts +++ b/src/libs/graphql/types.ts @@ -1,7 +1,11 @@ export type Maybe = T | null; -export type Exact = { [K in keyof T]: T[K] }; -export type MakeOptional = Omit & { [SubKey in K]?: Maybe }; -export type MakeMaybe = Omit & { [SubKey in K]: Maybe }; +export type Exact = { + [K in keyof T]: T[K]; +}; +export type MakeOptional = Omit & + { [SubKey in K]?: Maybe }; +export type MakeMaybe = Omit & + { [SubKey in K]: Maybe }; /** All built-in and custom scalars, mapped to their actual values */ export type Scalars = { ID: number; @@ -13,9 +17,6 @@ export type Scalars = { Upload: any; }; - - - export type Question = { id: Scalars['ID']; from?: Maybe; @@ -88,17 +89,16 @@ export type QuestionFilter = { export enum Role { Admin = 'admin', - User = 'user' + User = 'user', } export enum Answer { A = 'a', B = 'b', C = 'c', - D = 'd' + D = 'd', } - export type UserInput = { displayName?: Maybe; password?: Maybe; @@ -119,7 +119,6 @@ export type Query = { me?: Maybe; }; - export type QueryProfessionsArgs = { filter?: Maybe; limit?: Maybe; @@ -127,13 +126,11 @@ export type QueryProfessionsArgs = { sort?: Maybe>; }; - export type QueryProfessionArgs = { id?: Maybe; slug?: Maybe; }; - export type QueryQualificationsArgs = { filter?: Maybe; limit?: Maybe; @@ -141,13 +138,11 @@ export type QueryQualificationsArgs = { sort?: Maybe>; }; - export type QueryQualificationArgs = { id?: Maybe; slug?: Maybe; }; - export type QueryQuestionsArgs = { filter?: Maybe; limit?: Maybe; @@ -155,13 +150,11 @@ export type QueryQuestionsArgs = { sort?: Maybe>; }; - export type QueryGenerateTestArgs = { qualificationIDs: Array; limit?: Maybe; }; - export type QueryUsersArgs = { filter?: Maybe; limit?: Maybe; @@ -169,7 +162,6 @@ export type QueryUsersArgs = { sort?: Maybe>; }; - export type QueryUserArgs = { id: Scalars['Int']; }; @@ -190,7 +182,6 @@ export type QualificationFilterOr = { codeIEQ?: Maybe; }; - export type UserFilter = { id?: Maybe>; idNEQ?: Maybe>; @@ -263,77 +254,63 @@ export type Mutation = { signIn?: Maybe; }; - export type MutationCreateProfessionArgs = { input: ProfessionInput; }; - export type MutationUpdateProfessionArgs = { id: Scalars['ID']; input: ProfessionInput; }; - export type MutationDeleteProfessionsArgs = { ids: Array; }; - export type MutationCreateQualificationArgs = { input: QualificationInput; }; - export type MutationUpdateQualificationArgs = { id: Scalars['ID']; input: QualificationInput; }; - export type MutationDeleteQualificationsArgs = { ids: Array; }; - export type MutationCreateQuestionArgs = { input: QuestionInput; }; - export type MutationUpdateQuestionArgs = { id: Scalars['ID']; input: QuestionInput; }; - export type MutationDeleteQuestionsArgs = { ids: Array; }; - export type MutationCreateUserArgs = { input: UserInput; }; - export type MutationUpdateUserArgs = { id: Scalars['ID']; input: UserInput; }; - export type MutationUpdateManyUsersArgs = { ids: Array; input: UpdateManyUsersInput; }; - export type MutationDeleteUsersArgs = { ids: Array; }; - export type MutationSignInArgs = { email: Scalars['String']; password: Scalars['String'];