diff --git a/.prettierrc b/.prettierrc index e009d3b..2ad809d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,20 +1,7 @@ { - "arrowParens": "always", - "bracketSpacing": true, - "endOfLine": "lf", - "htmlWhitespaceSensitivity": "css", - "insertPragma": false, - "jsxBracketSameLine": false, - "jsxSingleQuote": false, - "printWidth": 80, - "proseWrap": "preserve", - "quoteProps": "as-needed", - "requirePragma": false, "semi": true, - "singleQuote": false, - "tabWidth": 4, - "trailingComma": "es5", - "useTabs": false, - "vueIndentScriptAndStyle": false, - "parser": "babel" + "trailingComma": "none", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 4 } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 254510f..4792591 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,11 @@ -import React from "react"; +import React, { useState } from "react"; import { Switch, Route, useLocation } from "react-router-dom"; import "./App.css"; import Home from "./Home"; import Navbar from "./Navbar"; import SubjectList from "./SubjectList"; +import {ILoadingState} from './types' const genName = (path: string, search?: string): string => { if (path === "/list" && search) { @@ -42,6 +43,8 @@ const genName = (path: string, search?: string): string => { function App() { const location = useLocation(); + const [loading, setLoading] = useState({ fetching: true, error: "" }); + return (
@@ -50,10 +53,10 @@ function App() { - + - +

404

diff --git a/src/Home/fakeData.json b/src/Home/fakeData.json new file mode 100644 index 0000000..b48abf8 --- /dev/null +++ b/src/Home/fakeData.json @@ -0,0 +1,111 @@ +[{ + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "1", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 3 + }, + { + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "1", + "post_date": "2020-09-15", + "predmet_type": "Физика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 3 + }, + { + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "1", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 1 + }, + { + "title": "Very long text, too long to show it full", + "type_num": "Семинары", + "class_num": "2", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 2 + }, + { + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "2", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 3 + }, + { + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "3", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 1 + }, + { + "title": "Very long text, too long to show it full", + "type_num": "Семинары", + "class_num": "3", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 2 + }, + { + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "11", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 3 + }, + { + "title": "Семинар 10", + "type_num": "Семинары", + "class_num": "10", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 1 + }, + { + "title": "Very long text, too long to show it full", + "type_num": "Семинары", + "class_num": "11", + "post_date": "2020-09-15", + "predmet_type": "Математика", + "teacher": "Ню В.В", + "image": "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + "slug": "card-3-11-2020-09-15", + "card_id": 2 + } +] \ No newline at end of file diff --git a/src/Home/index.jsx b/src/Home/index.jsx deleted file mode 100644 index 68b96dd..0000000 --- a/src/Home/index.jsx +++ /dev/null @@ -1,187 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import Card from "../Card"; -import "./main.css"; - -const data = [ - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "1", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 3, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "1", - post_date: "2020-09-15", - predmet_type: "Физика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 3, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "1", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 1, - }, - { - title: "Very long text, too long to show it full", - type_num: "Семинары", - class_num: "2", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 2, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "2", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 3, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "3", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 1, - }, - { - title: "Very long text, too long to show it full", - type_num: "Семинары", - class_num: "3", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 2, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "11", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 3, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "10", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 1, - }, - { - title: "Very long text, too long to show it full", - type_num: "Семинары", - class_num: "11", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 2, - }, -]; - -const Home = () => { - const classes = [ - ...new Set(data.map((el) => parseInt(el.class_num)).sort()), - ]; - const subjects = [...new Set(data.map((el) => el.predmet_type).sort())]; - - return ( -
- {classes.map((class_num, index) => ( -
-

{class_num} класс

- {subjects.map((subject, jndex) => - data.filter( - (el) => - parseInt(el.class_num) === class_num && - el.predmet_type === subject - ).length ? ( -
-

{subject}

-
-
- {data - .filter( - (el) => - parseInt(el.class_num) === - class_num && - el.predmet_type === subject - ) - .map((el, kndex) => ( - - ))} -
-
-
-
- ))} -
- ); -}; - -export default Home; diff --git a/src/Home/index.tsx b/src/Home/index.tsx new file mode 100644 index 0000000..f96c2e2 --- /dev/null +++ b/src/Home/index.tsx @@ -0,0 +1,89 @@ +import React, { Dispatch, useEffect, useState } from "react"; +import { Link } from "react-router-dom"; + +import Card from "../Card"; +import { IData, ILoadingState } from "../types"; +import "./main.css"; + +const Home = ({ setLoading }: {setLoading: Dispatch}) => { + const [data, setData] = useState([]); + + useEffect(() => { + setLoading({ fetching: true, error: "" }); + console.log("Loading data"); + + const requestURL = + "https://cors-anywhere.herokuapp.com/upml-bank.dmitriy.icu/api/cards"; + fetch(requestURL) + .then((res) => res.json()) + .then((data) => { + console.log("Fetched data"); + console.log(data); + + setData(data); + setLoading({ fetching: false, error: "" }); + }) + .catch((err) => { + setLoading({ fetching: false, error: err }); + console.error(err); + }); + }, [setLoading]); + + const classes: number[] = [ + ...Array.from(new Set(data.map((el) => parseInt(el.class_num)).sort())), + ]; + const subjects: string[] = [...Array.from(new Set(data.map((el) => el.predmet_type).sort()))]; + + return ( +
+ {classes.map((class_num, index) => ( +
+

{class_num} класс

+ {subjects.map((subject, jndex) => + data.filter( + (el) => + parseInt(el.class_num) === class_num && + el.predmet_type === subject + ).length ? ( +
+

{subject}

+
+
+ {data + .filter( + (el) => + parseInt(el.class_num) === + class_num && + el.predmet_type === subject + ) + .map((el, kndex) => ( + + ))} +
+
+
+
+ ))} +
+ ); +}; + +export default Home; diff --git a/src/Home/main.css b/src/Home/main.css index a17689e..c1b779d 100644 --- a/src/Home/main.css +++ b/src/Home/main.css @@ -1,3 +1,7 @@ +.homeContainer { + min-height: calc(79.5vh + 20px); +} + .classContainer { padding: 2vh; padding-top: calc(20px + 2vh); diff --git a/src/Navbar/index.jsx b/src/Navbar/index.tsx similarity index 96% rename from src/Navbar/index.jsx rename to src/Navbar/index.tsx index f0deb40..d8c238f 100644 --- a/src/Navbar/index.jsx +++ b/src/Navbar/index.tsx @@ -8,7 +8,7 @@ import LogoImage from "./logo.png"; import FilterIcon from "./filter.svg"; import SearchIcon from "./search.svg"; -const Navbar = (props) => { +const Navbar = () => { const [searchCollapsed, setSearchCollapsed] = useState(true); const [filtersCollapsed, setFiltersCollapsed] = useState(true); @@ -105,7 +105,7 @@ const Navbar = (props) => {

Преподаватель

- @@ -141,7 +141,7 @@ const Navbar = (props) => {

Предмет

- diff --git a/src/Navbar/main.css b/src/Navbar/main.css index 45fd183..953450d 100644 --- a/src/Navbar/main.css +++ b/src/Navbar/main.css @@ -96,6 +96,7 @@ height: 6vh; border-radius: 20px; width: 75vw; + font-size: 2.5vh; } body { diff --git a/src/SubjectList/index.tsx b/src/SubjectList/index.tsx index edc8fa2..6098ec5 100644 --- a/src/SubjectList/index.tsx +++ b/src/SubjectList/index.tsx @@ -1,61 +1,31 @@ -import React from "react"; -import { useLocation } from "react-router-dom"; -import Card from "../Card"; -import "./main.css"; +import React, { useEffect, useState, Dispatch } from 'react'; +import { useLocation } from 'react-router-dom'; -const data = [ - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "1", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 3, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "1", - post_date: "2020-09-15", - predmet_type: "Физика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 3, - }, - { - title: "Семинар 10", - type_num: "Семинары", - class_num: "1", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 1, - }, - { - title: "Very long text, too long to show it full", - type_num: "Семинары", - class_num: "2", - post_date: "2020-09-15", - predmet_type: "Математика", - teacher: "Ню В.В", - image: - "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", - slug: "card-3-11-2020-09-15", - card_id: 2, - }, -]; +import { IData, ILoadingState } from '../types'; +import Card from '../Card'; +import './main.css'; -const SubjectList = () => { - const location = useLocation(); +const SubjectList = ({ + setLoading +}: { + setLoading: Dispatch; +}) => { + const [data, setData] = useState([]); + + useEffect(() => { + setLoading({ fetching: true, error: '' }); + const fetchURL = 'https://upml-bank.dmitriy.icu/api/cards?' + new URLSearchParams({class_num: '11'}).toString() + fetch(fetchURL) + .then((res) => res.json()) + .then((data) => { + setData(data); + setLoading({ fetching: false, error: '' }); + }) + .catch((err) => { + console.error(err); + setLoading({ fetching: false, error: err }); + }); + }, [setLoading]); return (
diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..5bdf62e --- /dev/null +++ b/src/types.ts @@ -0,0 +1,18 @@ +interface ILoadingState { + fetching: boolean; + error: string; +} + +interface IData { + title: string; + type_num: string; + class_num: string; + post_date: string; + predmet_type: string; + teacher: string; + image: string; + slug: string; + card_id: number; +} + +export type { ILoadingState, IData };