diff --git a/src/features/IndexPage/IndexPage.tsx b/src/features/IndexPage/IndexPage.tsx
index 0fcaa8b..3d5c9b2 100644
--- a/src/features/IndexPage/IndexPage.tsx
+++ b/src/features/IndexPage/IndexPage.tsx
@@ -1,21 +1,58 @@
import { GetStaticProps } from 'next';
-import { createClient } from 'libs/graphql';
+import {
+ createClient,
+ Profession,
+ Qualification,
+ Query,
+ QueryProfessionsArgs,
+} from 'libs/graphql';
+import { QUERY_PROFESSIONS } from './queries';
import Layout from 'common/Layout/Layout';
import Header from './components/Header/Header';
-const IndexPage = () => {
+interface IndexPageProps {
+ professions: Profession[];
+ qualifications: Qualification[];
+}
+
+const IndexPage = ({ qualifications }: IndexPageProps) => {
return (
-
+
);
};
-export const getStaticProps: GetStaticProps = async context => {
- const pageProps = {};
+const getQualificationsFromProfessions = (
+ professions: Profession[]
+): Qualification[] => {
+ const map = new Map();
+ professions.forEach(profession => {
+ profession.qualifications.forEach(qualification => {
+ map.set(qualification.id, qualification);
+ });
+ });
+ return Array.from(map.values());
+};
+
+export const getStaticProps: GetStaticProps = async () => {
+ const pageProps: IndexPageProps = { professions: [], qualifications: [] };
const client = createClient();
+ try {
+ const resp = await client.request<
+ Pick,
+ QueryProfessionsArgs
+ >(QUERY_PROFESSIONS, { sort: ['name ASC'] });
+ if (Array.isArray(resp.professions?.items)) {
+ pageProps.professions = resp.professions.items;
+ pageProps.qualifications = getQualificationsFromProfessions(
+ resp.professions.items
+ );
+ }
+ } catch (e) {}
+
return {
props: pageProps,
revalidate: 60,
diff --git a/src/features/IndexPage/components/Header/Header.tsx b/src/features/IndexPage/components/Header/Header.tsx
index e0c8909..f7e8440 100644
--- a/src/features/IndexPage/components/Header/Header.tsx
+++ b/src/features/IndexPage/components/Header/Header.tsx
@@ -1,3 +1,6 @@
+import { useState } from 'react';
+import { Maybe, Qualification } from 'libs/graphql';
+
import Image from 'next/image';
import { makeStyles } from '@material-ui/core/styles';
import {
@@ -6,10 +9,24 @@ import {
Grid,
Typography,
Divider,
+ TextField,
+ InputAdornment,
} from '@material-ui/core';
+import { Search as SearchIcon } from '@material-ui/icons';
+import { Autocomplete } from '@material-ui/lab';
+import ThemeProvider from 'libs/material-ui/ThemeProvider';
-const Header = () => {
+interface HeaderProps {
+ qualifications: Qualification[];
+}
+
+const Header = ({ qualifications = [] }: HeaderProps) => {
+ const [selectedQualification, setSelectedQualification] = useState<
+ Maybe
+ >(null);
const classes = useStyles();
+
+ console.log(selectedQualification);
return (
@@ -21,12 +38,43 @@ const Header = () => {
Prosta droga do zdania egzaminu zawodowego
-
+
zdamegzaminzawodowy.pl to ogromna baza pytań z
różnych egzaminów zawodowych. Pytania pochodzą z arkuszy z lat
ubiegłych. Wyszukaj poniżej interesującą Cię kwalifikację i
zacznij rozwiązywać testy!
+
+ `${option.name} (${option.code})`}
+ noOptionsText="Nie znaleziono żadnej kwalifikacji"
+ clearText="Wyczyść"
+ onChange={(e, value) => {
+ setSelectedQualification(value);
+ }}
+ renderInput={params => {
+ return (
+
+
+
+ ),
+ }}
+ />
+ );
+ }}
+ options={qualifications}
+ />
+
({
color: theme.palette.common.white,
position: 'relative',
backgroundColor: theme.palette.primary.dark,
- // backgroundImage: `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.dark})`,
overflowX: 'hidden',
},
container: {
diff --git a/src/libs/graphql/types.ts b/src/libs/graphql/types.ts
index 5899d83..664728b 100644
--- a/src/libs/graphql/types.ts
+++ b/src/libs/graphql/types.ts
@@ -16,26 +16,58 @@ export type Scalars = {
-export type QuestionInput = {
- content?: Maybe;
+export type Question = {
+ id: Scalars['ID'];
from?: Maybe;
+ content: Scalars['String'];
explanation?: Maybe;
- correctAnswer?: Maybe;
- qualificationID?: Maybe;
- image?: Maybe;
- deleteImage?: Maybe;
+ correctAnswer: Answer;
+ image?: Maybe;
answerA?: Maybe;
- answerAImage?: Maybe;
- deleteAnswerAImage?: Maybe;
+ answerAImage?: Maybe;
answerB?: Maybe;
- answerBImage?: Maybe;
- deleteAnswerBImage?: Maybe;
+ answerBImage?: Maybe;
answerC?: Maybe;
- answerCImage?: Maybe;
- deleteAnswerCImage?: Maybe;
+ answerCImage?: Maybe;
answerD?: Maybe;
- answerDImage?: Maybe;
- deleteAnswerDImage?: Maybe;
+ answerDImage?: Maybe;
+ qualification?: Maybe;
+ createdAt: Scalars['Time'];
+ updatedAt: Scalars['Time'];
+};
+
+export type UpdateManyUsersInput = {
+ role?: Maybe;
+ activated?: Maybe;
+};
+
+export type ProfessionFilter = {
+ id?: Maybe>;
+ idNEQ?: Maybe>;
+ slug?: Maybe>;
+ slugNEQ?: Maybe>;
+ name?: Maybe>;
+ nameNEQ?: Maybe>;
+ nameIEQ?: Maybe;
+ nameMATCH?: Maybe;
+ descriptionIEQ?: Maybe;
+ descriptionMATCH?: Maybe;
+ qualificationID?: Maybe>;
+ createdAt?: Maybe;
+ createdAtGT?: Maybe;
+ createdAtGTE?: Maybe;
+ createdAtLT?: Maybe;
+ createdAtLTE?: Maybe;
+};
+
+export type Qualification = {
+ id: Scalars['ID'];
+ slug: Scalars['String'];
+ name: Scalars['String'];
+ code: Scalars['String'];
+ formula?: Maybe;
+ description?: Maybe;
+ createdAt: Scalars['Time'];
};
export type QuestionFilter = {
@@ -54,6 +86,165 @@ export type QuestionFilter = {
createdAtLTE?: Maybe;
};
+export enum Role {
+ Admin = 'admin',
+ User = 'user'
+}
+
+export enum Answer {
+ A = 'a',
+ B = 'b',
+ C = 'c',
+ D = 'd'
+}
+
+
+export type UserInput = {
+ displayName?: Maybe;
+ password?: Maybe;
+ email?: Maybe;
+ role?: Maybe;
+ activated?: Maybe;
+};
+
+export type Query = {
+ professions: ProfessionList;
+ profession?: Maybe;
+ qualifications: QualificationList;
+ qualification?: Maybe;
+ questions: QuestionList;
+ generateTest?: Maybe>;
+ users: UserList;
+ user?: Maybe;
+ me?: Maybe;
+};
+
+
+export type QueryProfessionsArgs = {
+ filter?: Maybe;
+ limit?: Maybe;
+ offset?: Maybe;
+ sort?: Maybe>;
+};
+
+
+export type QueryProfessionArgs = {
+ id?: Maybe;
+ slug?: Maybe;
+};
+
+
+export type QueryQualificationsArgs = {
+ filter?: Maybe;
+ limit?: Maybe;
+ offset?: Maybe;
+ sort?: Maybe>;
+};
+
+
+export type QueryQualificationArgs = {
+ id?: Maybe;
+ slug?: Maybe;
+};
+
+
+export type QueryQuestionsArgs = {
+ filter?: Maybe;
+ limit?: Maybe;
+ offset?: Maybe;
+ sort?: Maybe>;
+};
+
+
+export type QueryGenerateTestArgs = {
+ qualificationIDs: Array;
+ limit?: Maybe;
+};
+
+
+export type QueryUsersArgs = {
+ filter?: Maybe;
+ limit?: Maybe;
+ offset?: Maybe;
+ sort?: Maybe>;
+};
+
+
+export type QueryUserArgs = {
+ id: Scalars['Int'];
+};
+
+export type Profession = {
+ id: Scalars['ID'];
+ slug: Scalars['String'];
+ name: Scalars['String'];
+ description?: Maybe;
+ createdAt: Scalars['Time'];
+ qualifications: Array;
+};
+
+export type QualificationFilterOr = {
+ nameMatch?: Maybe;
+ nameIEQ?: Maybe;
+ codeMatch?: Maybe;
+ codeIEQ?: Maybe;
+};
+
+
+export type UserFilter = {
+ id?: Maybe>;
+ idNEQ?: Maybe>;
+ activated?: Maybe;
+ displayName?: Maybe>;
+ displayNameNEQ?: Maybe>;
+ displayNameIEQ?: Maybe;
+ displayNameMATCH?: Maybe;
+ email?: Maybe>;
+ emailNEQ?: Maybe>;
+ emailIEQ?: Maybe;
+ emailMATCH?: Maybe;
+ role?: Maybe>;
+ roleNEQ?: Maybe>;
+ createdAt?: Maybe;
+ createdAtGT?: Maybe;
+ createdAtGTE?: Maybe;
+ createdAtLT?: Maybe;
+ createdAtLTE?: Maybe;
+ or?: Maybe;
+};
+
+export type ProfessionInput = {
+ name?: Maybe;
+ description?: Maybe;
+};
+
+export type QualificationList = {
+ total: Scalars['Int'];
+ items?: Maybe>;
+};
+
+export type User = {
+ id: Scalars['ID'];
+ displayName: Scalars['String'];
+ role: Role;
+ email: Scalars['String'];
+ activated: Scalars['Boolean'];
+ createdAt: Scalars['Time'];
+};
+
+export type QualificationInput = {
+ name?: Maybe;
+ description?: Maybe;
+ code?: Maybe;
+ formula?: Maybe;
+ associateProfession?: Maybe>;
+ dissociateProfession?: Maybe>;
+};
+
+export type QuestionList = {
+ total: Scalars['Int'];
+ items?: Maybe>;
+};
export type Mutation = {
createProfession?: Maybe;
@@ -154,73 +345,6 @@ export type ProfessionList = {
items?: Maybe>;
};
-export type Profession = {
- id: Scalars['ID'];
- slug: Scalars['String'];
- name: Scalars['String'];
- description?: Maybe;
- createdAt: Scalars['Time'];
-};
-
-export enum Answer {
- A = 'a',
- B = 'b',
- C = 'c',
- D = 'd'
-}
-
-export type UserList = {
- total: Scalars['Int'];
- items?: Maybe>;
-};
-
-export type Question = {
- id: Scalars['ID'];
- from?: Maybe;
- content: Scalars['String'];
- explanation?: Maybe;
- correctAnswer: Answer;
- image?: Maybe;
- answerA?: Maybe;
- answerAImage?: Maybe;
- answerB?: Maybe;
- answerBImage?: Maybe;
- answerC?: Maybe;
- answerCImage?: Maybe;
- answerD?: Maybe;
- answerDImage?: Maybe;
- qualification?: Maybe;
- createdAt: Scalars['Time'];
- updatedAt: Scalars['Time'];
-};
-
-export type UpdateManyUsersInput = {
- role?: Maybe;
- activated?: Maybe;
-};
-
-export type UserFilter = {
- id?: Maybe>;
- idNEQ?: Maybe>;
- activated?: Maybe;
- displayName?: Maybe>;
- displayNameNEQ?: Maybe>;
- displayNameIEQ?: Maybe;
- displayNameMATCH?: Maybe;
- email?: Maybe>;
- emailNEQ?: Maybe>;
- emailIEQ?: Maybe;
- emailMATCH?: Maybe;
- role?: Maybe>;
- roleNEQ?: Maybe>;
- createdAt?: Maybe;
- createdAtGT?: Maybe;
- createdAtGTE?: Maybe;
- createdAtLT?: Maybe;
- createdAtLTE?: Maybe;
- or?: Maybe;
-};
-
export type QualificationFilter = {
id?: Maybe>;
idNEQ?: Maybe>;
@@ -247,82 +371,31 @@ export type QualificationFilter = {
or?: Maybe;
};
-export type ProfessionInput = {
- name?: Maybe;
- description?: Maybe;
+export type QuestionInput = {
+ content?: Maybe;
+ from?: Maybe;
+ explanation?: Maybe;
+ correctAnswer?: Maybe;
+ qualificationID?: Maybe;
+ image?: Maybe;
+ deleteImage?: Maybe;
+ answerA?: Maybe;
+ answerAImage?: Maybe;
+ deleteAnswerAImage?: Maybe;
+ answerB?: Maybe;
+ answerBImage?: Maybe;
+ deleteAnswerBImage?: Maybe;
+ answerC?: Maybe;
+ answerCImage?: Maybe;
+ deleteAnswerCImage?: Maybe;
+ answerD?: Maybe;
+ answerDImage?: Maybe;
+ deleteAnswerDImage?: Maybe;
};
-export type ProfessionFilter = {
- id?: Maybe>;
- idNEQ?: Maybe>;
- slug?: Maybe>;
- slugNEQ?: Maybe>;
- name?: Maybe>;
- nameNEQ?: Maybe>;
- nameIEQ?: Maybe;
- nameMATCH?: Maybe;
- descriptionIEQ?: Maybe;
- descriptionMATCH?: Maybe;
- qualificationID?: Maybe>;
- createdAt?: Maybe;
- createdAtGT?: Maybe;
- createdAtGTE?: Maybe;
- createdAtLT?: Maybe;
- createdAtLTE?: Maybe;
-};
-
-export type QuestionList = {
+export type UserList = {
total: Scalars['Int'];
- items?: Maybe>;
-};
-
-export enum Role {
- Admin = 'admin',
- User = 'user'
-}
-
-export type UserWithToken = {
- token: Scalars['String'];
- user: User;
-};
-
-
-export type UserInput = {
- displayName?: Maybe;
- password?: Maybe;
- email?: Maybe;
- role?: Maybe;
- activated?: Maybe;
-};
-
-export type QualificationList = {
- total: Scalars['Int'];
- items?: Maybe>;
-};
-
-export type QualificationInput = {
- name?: Maybe;
- description?: Maybe;
- code?: Maybe;
- formula?: Maybe;
- associateProfession?: Maybe>;
- dissociateProfession?: Maybe>;
-};
-
-export type QualificationFilterOr = {
- nameMatch?: Maybe;
- nameIEQ?: Maybe;
- codeMatch?: Maybe;
- codeIEQ?: Maybe;
-};
-
-export type User = {
- id: Scalars['ID'];
- displayName: Scalars['String'];
- role: Role;
- email: Scalars['String'];
- activated: Scalars['Boolean'];
- createdAt: Scalars['Time'];
+ items?: Maybe>;
};
export type UserFilterOr = {
@@ -332,79 +405,7 @@ export type UserFilterOr = {
emailMATCH?: Maybe;
};
-export type Qualification = {
- id: Scalars['ID'];
- slug: Scalars['String'];
- name: Scalars['String'];
- code: Scalars['String'];
- formula?: Maybe;
- description?: Maybe;
- createdAt: Scalars['Time'];
-};
-
-export type Query = {
- professions: ProfessionList;
- profession?: Maybe;
- qualifications: QualificationList;
- qualification?: Maybe;
- questions: QuestionList;
- generateTest?: Maybe>;
- users: UserList;
- user?: Maybe;
- me?: Maybe;
-};
-
-
-export type QueryProfessionsArgs = {
- filter?: Maybe;
- limit?: Maybe;
- offset?: Maybe;
- sort?: Maybe>;
-};
-
-
-export type QueryProfessionArgs = {
- id?: Maybe;
- slug?: Maybe;
-};
-
-
-export type QueryQualificationsArgs = {
- filter?: Maybe;
- limit?: Maybe;
- offset?: Maybe;
- sort?: Maybe>;
-};
-
-
-export type QueryQualificationArgs = {
- id?: Maybe;
- slug?: Maybe;
-};
-
-
-export type QueryQuestionsArgs = {
- filter?: Maybe;
- limit?: Maybe;
- offset?: Maybe;
- sort?: Maybe>;
-};
-
-
-export type QueryGenerateTestArgs = {
- qualificationIDs: Array;
- limit?: Maybe;
-};
-
-
-export type QueryUsersArgs = {
- filter?: Maybe;
- limit?: Maybe;
- offset?: Maybe;
- sort?: Maybe>;
-};
-
-
-export type QueryUserArgs = {
- id: Scalars['Int'];
+export type UserWithToken = {
+ token: Scalars['String'];
+ user: User;
};
diff --git a/src/libs/material-ui/ThemeProvider.tsx b/src/libs/material-ui/ThemeProvider.tsx
index 2698249..eb09637 100644
--- a/src/libs/material-ui/ThemeProvider.tsx
+++ b/src/libs/material-ui/ThemeProvider.tsx
@@ -1,16 +1,32 @@
+import { useMemo } from 'react';
+import createTheme from './createTheme';
+
import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/core';
-import createTheme from './createTheme';
+import { PaletteOptions } from '@material-ui/core/styles/createPalette';
interface ThemeProviderProps {
children?: React.ReactNode;
+ paletteType?: PaletteOptions['type'];
+ cssBaseline?: boolean;
}
-function ThemeProvider({ children }: ThemeProviderProps) {
+function ThemeProvider({
+ children,
+ paletteType,
+ cssBaseline = true,
+}: ThemeProviderProps) {
+ const theme = useMemo(() => createTheme(paletteType), [paletteType]);
return (
-
- {children}
-
+
+ {cssBaseline ? (
+ <>
+ {children}
+
+
+ ) : (
+ children
+ )}
);
}
diff --git a/src/libs/material-ui/createTheme.ts b/src/libs/material-ui/createTheme.ts
index 8b992c3..d2d6499 100644
--- a/src/libs/material-ui/createTheme.ts
+++ b/src/libs/material-ui/createTheme.ts
@@ -3,9 +3,10 @@ import {
responsiveFontSizes,
Theme,
} from '@material-ui/core/styles';
+import { PaletteOptions } from '@material-ui/core/styles/createPalette';
import { blue, pink } from '@material-ui/core/colors';
-const createTheme = (): Theme => {
+const createTheme = (paletteType?: PaletteOptions['type']): Theme => {
return responsiveFontSizes(
createMuiTheme({
typography: {
@@ -14,6 +15,7 @@ const createTheme = (): Theme => {
},
},
palette: {
+ type: paletteType,
primary: {
main: blue['A200'],
},