Refactor

src/App.tsx

@@ -4,7 +4,7 @@ import Transfer from "./components/Transfer/";
 import "./App.scss";
 import {Scheduler} from "./components/Scheduler";
 import RightBar from "./components/RightBar";
-import { lectures } from "./lectures";
+import { lectures } from "./businesslogic/mockData/lectures";
 
 import BusinessLogicContext from "./businesslogic/BusinessLogicContext";
 import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";

src/businesslogic/BusinessLogicProvider.tsx

@@ -1,6 +1,6 @@
 import BusinessLogicContext from "./BusinessLogicContext";
 import React, { Component } from "react";
-import { User } from "./models/user";
+import { User } from "./types/user";
 
 export interface BuisnessProvided {
 	states: BusinessState;

src/businesslogic/LecturesProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Lecture } from "../lectures";
+import { Lecture } from "./mockData/lectures";
 
 interface ILectureContext {
     lectures: Array<Lecture> 

src/businesslogic/mockData/lectures.ts

@@ -0,0 +1,42 @@
+import { Lecture } from "../types/lecture";
+
+export const lectures: Array<Lecture> = [
+  {
+    name: "E-gospodarka - narzędzia i bezpieczeństwo",
+    groups: [
+      {
+        id: "1CB",
+        day: "Pn",
+        time: "10:00",
+        lecturer: "dr inż. Michał Ren",
+        room: "A2-01",
+      },
+      {
+        id: "1XD",
+        day: "Wt",
+        time: "12:00",
+        lecturer: "dr inż. Michał Ren",
+        room: "A3-01",
+      },
+    ],
+  },
+  {
+    name: "Statystyka",
+    groups: [
+      {
+        id: "2CB",
+        day: "Pn",
+        time: "10:00",
+        lecturer: "dr inż. Michał Ren",
+        room: "A2-01",
+      },
+      {
+        id: "2XD",
+        day: "Wt",
+        time: "12:00",
+        lecturer: "dr inż. Michał Ren",
+        room: "A3-01",
+      },
+    ],
+  },
+];

src/businesslogic/types/group.ts

@@ -0,0 +1,7 @@
+export interface Group {
+	id: string;
+	day: string;
+	time: string;
+	lecturer: string;
+	room: string;
+}

src/businesslogic/types/lecture.ts

@@ -0,0 +1,6 @@
+import { Group } from "./group";
+
+export interface Lecture {
+  name: string;
+  groups: Array<Group>;
+}

src/businesslogic/types/lectureInit.ts

@@ -0,0 +1,4 @@
+export interface LectureInit {
+  name: string;
+  id: number;
+}

src/businesslogic/types/user.ts

@@ -1,4 +1,4 @@
-export type User = {
+export interface User {
 	name?: string;
 	surname?: string;
 	ticket: string | null;

src/components/RightBar/LectureCard/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import "./index.scss";
 import Collapse from "@material-ui/core/Collapse";
 import ExpandIcon from "./expand.png";
-import { Lecture } from "../../../lectures";
+import { Lecture } from "../../../businesslogic/mockData/lectures";
 
 interface LectureCardProps {
   onGroupMouseOver: (id: string, name: string) => void;

src/components/RightBar/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from "react";
 import "./index.scss";
-import { Lecture } from "../../lectures";
+import { Lecture } from "../../businesslogic/mockData/lectures";
 import LectureCard from "./LectureCard";
 import { LecturesContext } from "../../businesslogic/LecturesProvider";
 

src/components/TopBar/Results/index.tsx

@@ -1,86 +1,75 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import axios from "axios";
 import { Input } from "@material-ui/core";
 import "./index.scss";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import { LecturesContext } from "../../../businesslogic/LecturesProvider";
-import { Lecture, Group } from "../../../lectures";
-import { EDEADLK } from "constants";
-
-interface data {
-  id: number;
-  name: string;
-  sym: string;
-}
-
-
-
+import {LectureInit} from "../../../businesslogic/types/lectureInit";
 
 
 export const Results: React.FC = () => {
   const [input, setInput] = useState<string>("");
-  const [data, setData] = useState<Array<data>>([]);
+  const [lecturesData, setLecturesData] = useState<Array<LectureInit>>([]);
   const [open, setOpen] = React.useState(false);
 
   const lecturesContext = useContext(LecturesContext);
 
+  //fetch lectures ids and lectures names
+  // useEffect(() => {
+  //   const fetchData = async () => {
+  //     const {lecturesData } = await axios.get(
+  //       `http://localhost:1287/getCourses?name=""`
+  //     );
+  //     setLecturesData(lecturesData);
+  //   };
+  //   fetchData();
+  // }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const { data } = await axios.get(
+        `http://localhost:1287/getCourses?name=""`
+      );
+      const lecturesData = data.map((data: { name: any; id: any; })=> {name: data.name, id: data.id})
+       
+      setLecturesData(lecturesData);
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    const filterLectures = (value: string) => {
+      return lecturesData.filter((lecture) => lecture.name.includes(value));
+    };
+    filterLectures(input);
+  }, [input]);
+
+  const getLecturesById = async (id: string): Promise<Lecture> => {
+    const { data } = await axios.get(
+      `http://localhost:1287/getClassesByCourseId?id=${id}`
+    );
+    return data;
+  };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInput(event.target.value);
-    //query should be updated on backend to not accept empty string
-    if (event.target.value !== "") {
-      console.log("Jeste w okej")
-      search(event.target.value);
-    } else {
-      console.log("Jeste w dupuie")
-      search("xxxxxxxxxxxxxxx");
-
-    }
-  };
-  const search = (text: string) => {
-    axios
-      .get(`http://localhost:1287/getCourses?name=${text}`)
-      .then((response) => {
-        const names = lecturesContext.lectures.map(lecture => lecture.name);
-        console.log(`Names: ${names}`)
-        const filteredData = response.data.filter((el : any) => !names.includes(el.name));
-        console.log("D")
-        setData(filteredData)
-      });
   };  
 
   const handleClick = () => {
     setOpen(true);
-    console.log("OPWENEE")
   };
 
   const handleClickAway = () => {
     setOpen(false);
   };
 
-	const onLectureClick = (e: React.MouseEvent) => {
+  const onLectureClick = async (e: React.MouseEvent) => {
     const target = e.currentTarget as HTMLElement;
     const id = target.id;
-
-    const lecture = {name: "", groups: []} as Lecture;
-
-    axios
-    .get(`http://localhost:1287/getClassesByCourseId?id=${id}`)
-    .then((response) => {
-      for(let data of response.data){
-        let group = {} as Group;
-        lecture.name = data.course.name;
-        group.id = data.id;
-        group.day = data.day;
-        group.time = data.time;
-        group.lecturer =  `${data.lecturer.title} ${data.lecturer.name} ${data.lecturer.surname}`;
-        group.room = data.room.trim();
-        lecture.groups.push(group);
-       lecturesContext.updateLectures(lecture);
-      }
+    const result = await getLecturesById(id);
+    lecturesContext.updateLectures(result);
     setOpen(false);
-    }).then(()=>{search(input)});
-  }
+  };
 
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
@@ -95,8 +84,13 @@ export const Results: React.FC = () => {
         />
         {open ? (
           <div className="dropdown">
-            {data.map((lecture, index) => (
-            <div className="lecture" key={index} id={String(lecture.id)} onClick={onLectureClick}>
+            {lecturesData.map((lecture, index) => (
+              <div
+                className="lecture"
+                key={index}
+                id={String(lecture.id)}
+                onClick={onLectureClick}
+              >
                 <p>{lecture.name} </p>
               </div>
             ))}
@@ -106,4 +100,3 @@ export const Results: React.FC = () => {
     </ClickAwayListener>
   );
 };
-            

src/lectures.ts

@@ -1,53 +0,0 @@
-export interface Lecture {
-	name: string;
-	groups: Array<Group>;
-}
-
-export interface Group {
-	id: string;
-	day: string;
-	time: string;
-	lecturer: string;
-	room: string;
-}
-
-export const lectures: Array<Lecture> = [
-	{
-		name: "E-gospodarka - narzędzia i bezpieczeństwo",
-		groups: [
-			{
-				id: "1CB",
-				day: "Pn",
-				time: "10:00",
-				lecturer: "dr inż. Michał Ren",
-				room: "A2-01",
-			},
-			{
-				id: "1XD",
-				day: "Wt",
-				time: "12:00",
-				lecturer: "dr inż. Michał Ren",
-				room: "A3-01",
-			},
-		],
-	},
-	{
-		name: "Statystyka",
-		groups: [
-			{
-				id: "2CB",
-				day: "Pn",
-				time: "10:00",
-				lecturer: "dr inż. Michał Ren",
-				room: "A2-01",
-			},
-			{
-				id: "2XD",
-				day: "Wt",
-				time: "12:00",
-				lecturer: "dr inż. Michał Ren",
-				room: "A3-01",
-			},
-		],
-	},
-];