Merge pull request #1 from DmytroFrame/redesign

Redesign

package.json

@@ -9,8 +9,12 @@
  "preview": "vite preview"
  },
  "dependencies": {
+ "antd": "^5.2.3",
+ "axios": "^1.3.4",
+ "moment": "^2.29.4",
  "react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-query": "^3.39.3"
  },
  "devDependencies": {
  "@types/react": "^18.0.27",

src/App.jsx

@@ -1,29 +1,34 @@
-import { useState, useEffect } from "react";
+import React from "react";
 import "./App.css";
-import { getSchedules } from "./api/getSchedules";
-
-import Schedule from "./components/Schedule/Schedule";
-import WeekBar from "./components/WeekBar/WeekBar";
+import {useQuery} from "react-query";
+import {Alert, Divider, Space, Spin, Tabs, Timeline, Typography} from 'antd';
+import axios from "axios";
+import ErrorAlert from "./components/Ui/ErrorAlert.jsx";
+import LoadingSpinner from "./components/Ui/LoadingSpinner.jsx";
+import LessonsTab from "./components/LessonsTabs.jsx";
+const { Title, Paragraph } = Typography;
 
 function App() {
- const [schedules, setSchedules] = useState([]);
- const [currentSchedule, setCurrentSchedule] = useState({});
-
- useEffect(() => {
- getSchedules().then((res) => {
- setSchedules(res);
- setCurrentSchedule(res[0]);
- });
- }, []);
+ const { isLoading, error, data } = useQuery("schedules", () =>
+ axios
+ .get("https://api.dmytroframe.site/ukd/schedules?group=ІПЗс-19")
+ .then((response) => response.data)
+ );
 
- return (
+  return (
  <div className="App">
- <WeekBar
- schedules={schedules}
- currentSchedule={currentSchedule}
- setCurrentSchedule={setCurrentSchedule}
- />
- <Schedule currentSchedule={currentSchedule} />
+ <Typography>
+ <Title>Pidval project presents:</Title>
+ <Paragraph>
+ The most useless scheduler in your life.
+ Better go to stroika
+ </Paragraph>
+ </Typography>
+ <Divider />
+
+ { error && <ErrorAlert /> }
+ { isLoading && <LoadingSpinner /> }
+ { data && <LessonsTab lessonsData={data} />}
  </div>
  );
 }

src/components/LessonsTabs.jsx

@@ -0,0 +1,17 @@
+import {Tabs, Timeline} from "antd";
+import React from "react";
+
+export default function LessonsTab({ lessonsData }) {
+ return (
+ <Tabs
+ tabPosition={'left'}
+ items={lessonsData?.map(_data => ({
+ label: _data.weekName,
+ key: Math.random(),
+ children: <Timeline style={{textAlign: 'left'}}
+ items={_data.lessons.map(lesson => ({children: `${lesson.date} - ${lesson.title}`}))}
+ />,
+ }))}
+ />
+ );
+}

src/components/Ui/ErrorAlert.jsx

@@ -0,0 +1,14 @@
+import {Alert, Space} from "antd";
+
+export default function ErrorAlert() {
+ return (
+ <Space direction="vertical" style={{ width: '100%'}}>
+ <Alert
+ message="Error"
+ description="Не вдається получити дані з серверу"
+ type="error"
+ showIcon
+ />
+ </Space>
+ );
+}

src/components/Ui/LoadingSpinner.jsx

@@ -0,0 +1,10 @@
+import {Space, Spin} from "antd";
+import React from "react";
+
+export default function LoadingSpinner() {
+ return (
+ <Space size="middle" style={{ marginTop: '50px'}}>
+ <Spin size="large" />
+ </Space>
+ )
+}

src/main.jsx

@@ -2,9 +2,14 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
+import {QueryClient, QueryClientProvider} from "react-query";
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
- <App />
+ <QueryClientProvider client={queryClient}>
+ <App />
+ </QueryClientProvider>
  </React.StrictMode>,
 )