Major refactoring

2020-08-12 04:13:14 +02:00
parent f6da0d9c72
commit f1cf374b07
35 changed files with 783 additions and 732 deletions
--- a/src/components/RightBar/LectureCard/index.tsx
+++ b/src/components/RightBar/LectureCard/index.tsx
@@ -1,10 +1,9 @@
-import React, {useContext} from "react";
-import "./index.scss";
-import Collapse from "@material-ui/core/Collapse";
-import ExpandIcon from "./expand.png";
-import { Lecture } from "../../../businesslogic/types/lecture";
-import { Group } from "../../../businesslogic/types/group";
-import { LecturesContext } from "../../../businesslogic/LecturesProvider";
+import React, { useContext } from 'react';
+import './index.scss';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandIcon from './expand.png';
+import { Lecture, Group } from '../../../types/index';
+import { LecturesContext } from '../../../contexts/LecturesProvider';

 interface LectureCardProps {
  onGroupMouseOver: (id: string, name: string) => void;
@@ -14,31 +13,17 @@ interface LectureCardProps {
  isSelected: boolean;
 }

-export default function LectureCard({
-  onGroupMouseOver,
-  onCardClick,
-  lecture,
-  id,
-  isSelected,
-}: LectureCardProps) {
+export default function LectureCard({ onGroupMouseOver, onCardClick, lecture, id, isSelected }: LectureCardProps) {
+  const { addGroup } = useContext(LecturesContext)!;

-  const {addGroup} = useContext(LecturesContext);
-
-
-  function onGroupClick(group : Group){
-      addGroup(group);
+  function onGroupClick(group: Group) {
+    addGroup(group);
  }

-
  return (
    <div className="class" onClick={onCardClick} id={id}>
      <div className="class__name">{lecture.name}</div>
-      <Collapse
-        className="expanded"
-        in={isSelected}
-        timeout="auto"
-        unmountOnExit
-      >
+      <Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
        {lecture.groups.map((group, index) => (
          <div
            className="class__group"
@@ -48,16 +33,12 @@ export default function LectureCard({
          >
            <p>
              {group.time} {group.room} <br></br> {group.lecturer}
-            </p>{" "}
+            </p>{' '}
          </div>
        ))}
      </Collapse>
      <div onClick={onCardClick} id={id}>
-        <img
-          alt="expand"
-          src={ExpandIcon}
-          className={`class__expandIcon${isSelected ? "Rotate" : ""}`}
-        />
+        <img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
      </div>
    </div>
  );
--- a/src/components/RightBar/index.tsx
+++ b/src/components/RightBar/index.tsx
@@ -1,27 +1,21 @@
-import React, { useState, useContext } from "react";
-import "./index.scss";
-import { Lecture } from "../../businesslogic/types/lecture";
-import LectureCard from "./LectureCard";
-import { LecturesContext } from "../../businesslogic/LecturesProvider";
+import React, { useState, useContext } from 'react';
+import './index.scss';
+import { Lecture } from '../../types';
+import LectureCard from './LectureCard';
+import { LecturesContext } from '../../contexts/LecturesProvider';

 interface RightBarProps {
  onGroupMouseOver: (id: string, name: string) => void;
-  lectures: Array<Lecture>;
 }

-export default function RightBar({
-  lectures,
-  onGroupMouseOver,
-}: RightBarProps) {
+export default function RightBar({ onGroupMouseOver }: RightBarProps) {
  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);

  const lecturesContext = useContext(LecturesContext);

  const onCardClick = (e: React.MouseEvent) => {
    const target = e.currentTarget as HTMLElement;
-    selectedCardId === target.id
-      ? setSelectedCardId(null)
-      : setSelectedCardId(target.id);
+    selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
  };

  return (
@@ -30,7 +24,7 @@ export default function RightBar({
        Hubert Wrzesiński<br></br>
        Semestr zimowy 2020/2021
      </div>
-      {lecturesContext.lectures.map((lecture, index) => (
+      {lecturesContext?.lectures.map((lecture, index) => (
        <LectureCard
          lecture={lecture}
          key={index}
--- a/src/components/Scheduler/Cell/index.scss
+++ b/src/components/Scheduler/Cell/index.scss
--- a/src/components/Scheduler/Cell/index.tsx
+++ b/src/components/Scheduler/Cell/index.tsx
@@ -1,23 +0,0 @@
-import React from "react";
-
-interface CellProps {
-  colIndex: number;
-  index: number;
-  term?: string;
-  handleClick?: (e: React.MouseEvent) => void;
-  isEventable?: boolean;
-}
-
-export const Cell = ({
-  colIndex,
-  index,
-  term,
-  handleClick,
-  isEventable,
-}: CellProps) => {
-  return (
-    <div id={`${colIndex} ${index}`} className="td" onClick={handleClick}>
-      {isEventable || term}
-    </div>
-  );
-};
--- a/src/components/Scheduler/Column/index.scss
+++ b/src/components/Scheduler/Column/index.scss
--- a/src/components/Scheduler/Column/index.tsx
+++ b/src/components/Scheduler/Column/index.tsx
@@ -1,33 +0,0 @@
-import React from "react";
-import { Cell } from "../Cell";
-
-interface ColumnProps {
-  hours: Array<string>;
-  handleClick?: (e: React.MouseEvent) => void;
-  children?: React.ReactNode;
-  colIndex?: number;
-  isEventable?: boolean;
-}
-
-export const Column = ({
-  hours,
-  colIndex,
-  isEventable,
-  children,
-  ...rest
-}: ColumnProps) => {
-  return (
-    <div className="tbody__column">
-      {hours.map((hour, index) => (
-        <Cell
-          {...rest}
-          index={index}
-          term={hour}
-          colIndex={colIndex || 0}
-          isEventable={isEventable}
-        />
-      ))}
-      {children}
-    </div>
-  );
-};
--- a/src/components/Scheduler/SchedulerEvents/index.tsx
+++ b/src/components/Scheduler/SchedulerEvents/index.tsx
@@ -1,86 +1,81 @@
-import React, { useContext, useEffect, useState } from "react";
-import { SchedulerRow } from "../SchedulerRow";
-import { LecturesContext } from "../../../businesslogic/LecturesProvider";
-import { Group } from "../../../businesslogic/types/group";
+import React, { useContext, useEffect, useState } from 'react';
+import { SchedulerRow } from '../SchedulerRow';
+import { LecturesContext } from '../../../contexts/LecturesProvider';
+import { Group } from '../../../types';

 interface SchedulerEventsProps {
  cellTop: number;
  cellWidth: number;
 }

-export const SchedulerEvents = ({
-  cellTop,
-  cellWidth,
-}: SchedulerEventsProps) => {
-  //   const handleEventClick = (e: React.MouseEvent) => {
-  //     const eventDiv = e.target as HTMLDivElement;
-  //     eventDiv.style.backgroundColor = "#1547C5";
-  //   };
-
-  const { choosenGroups } = useContext(LecturesContext);
+export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
+  const { choosenGroups } = useContext(LecturesContext)!;

  const [groupsMappedToEvents, setGroupsMappedToEvents] = useState<any>([]);

-
-
  // const groups: Array<Group> = [{ id: "5", day: "4", time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3" },
  // { id: "28", day: "1", time: "13.45", lecturer: "dr Barbara Kołodziejczak", room: "D-3" },
  // { id: "69", day: "4", time: "15.30", lecturer: "dr Karol Gierszewski", room: "A2-3" }];

-
  interface GroupTimeToEventRowMapping {
-    [time: string]: number
+    [time: string]: number;
  }

  const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
-    "8.15": 0,
-    "10.00": 1,
-    "11.45": 2,
-    "13.45": 3,
-    "15.30": 4,
-    "17.15": 5,
-  }
-
-
-
+    '8.15': 0,
+    '10.00': 1,
+    '11.45': 2,
+    '13.45': 3,
+    '15.30': 4,
+    '17.15': 5,
+  };

  useEffect(() => {
    function mapGroupTimeToEventRow(groups: Array<Group>) {
      for (const group of groups) {
        console.log(group);
-        const groupTime = group.time
+        const groupTime = group.time;
        const eventRow: number = groupTimeToEventRowMapping[groupTime];
-        const groupMappedToEvent: any = { id: group.id, day: group.day, eventRow: eventRow, lecturer: group.lecturer, room: group.room };
+        const groupMappedToEvent: any = {
+          id: group.id,
+          day: group.day,
+          eventRow: eventRow,
+          lecturer: group.lecturer,
+          room: group.room,
+        };
        setGroupsMappedToEvents((groupsMappedToEvents: any) => [...groupsMappedToEvents, groupMappedToEvent]);
      }
+      function alternative(groups: Array<Group>) {
+        const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({
+          id,
+          day,
+          lecturer,
+          room,
+          eventRow: groupTimeToEventRowMapping[time],
+        }));
+        setGroupsMappedToEvents(groupsMapped);
+      }
    }
    mapGroupTimeToEventRow(choosenGroups);
  }, [choosenGroups]);

-
  useEffect(() => {
    console.log(groupsMappedToEvents);
-
  }, [groupsMappedToEvents]);

-
  return (
-
-
    <div>
-      {
-        [...Array(6)].map((_, index) => (
-          <SchedulerRow
-            key={index}
-            groups={groupsMappedToEvents.filter((group: any) => { return group.eventRow === index })}
-            indexRow={index}
-            cellTop={cellTop + (10 + 70 * index)}
-            cellWidth={cellWidth}
-          />
-        ))
-      }
-
-
+      {[...Array(6)].map((_, index) => (
+        <SchedulerRow
+          key={index}
+          groups={groupsMappedToEvents.filter((group: any) => {
+            return group.eventRow === index;
+          })}
+          indexRow={index}
+          cellTop={cellTop + (10 + 70 * index)}
+          cellWidth={cellWidth}
+        />
+      ))}
    </div>
  );
 };
--- a/src/components/Scheduler/SchedulerRow/index.tsx
+++ b/src/components/Scheduler/SchedulerRow/index.tsx
@@ -1,5 +1,22 @@
-import React from "react";
-import { Group } from "../../../businesslogic/types/group";
+import React from 'react';
+import { Group } from '../../../types';
+import styled from 'styled-components';
+
+interface SchedulerEventProps {
+  eventIndex: number;
+  cellTop: number;
+  cellWidth: number;
+}
+
+const SchedulerEvent = styled.div<SchedulerEventProps>`
+  position: absolute;
+  top: ${(props) => props.cellTop}px;
+  left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
+  width: ${(props) => (props.cellWidth * 2) / 3}px;
+  height: 60px;
+  background-color: lightblue;
+  z-index: 2;
+`;

 interface SchedulerRowProps {
  groups: Array<Group>;
@@ -8,44 +25,24 @@ interface SchedulerRowProps {
  cellWidth: number;
 }

-export const SchedulerRow = ({
-  groups,
-  indexRow,
-  cellTop,
-  cellWidth,
-}: SchedulerRowProps) => {
-  // const handleEventClick = (e: React.MouseEvent) => {
-  //   const eventDiv = e.target as HTMLDivElement;
-  //   eventDiv.style.backgroundColor = "#1547C5";
-  // };
-
-  console.log(`You passed me these of a groupzzz: ${groups}`)
-
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
+  console.log(`You passed me these of a groupzzz: ${groups}`);

  return (
-    <div>
+    <>
      {[...Array(5)].map((value, eventIndex) => (
-        <div
+        <SchedulerEvent
+          eventIndex={eventIndex}
+          cellTop={cellTop}
+          cellWidth={cellWidth}
          key={`eventRow${indexRow}eventCol${eventIndex}`}
          id={`eventRow${indexRow}eventCol${eventIndex}`}
-          style={{
-            position: "absolute",
-            top: cellTop,
-            left: cellWidth + 5 + cellWidth * eventIndex,
-            width: (cellWidth * 2) / 3,
-            height: 60,
-            backgroundColor: "lightblue",
-            zIndex: 2,
-          }}
        >
-
          {groups.map((group, index) =>
-            (
-              parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div>
-                : null
-            ))}
-        </div>
+            parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div> : null,
+          )}
+        </SchedulerEvent>
      ))}
-    </div>
+    </>
  );
 };
--- a/src/components/Scheduler/index.scss
+++ b/src/components/Scheduler/index.scss
@@ -1,26 +0,0 @@
-.scheduler {
-  margin-top: 20px;
-  border-collapse: collapse;
-
-
-  .tbody {
-    display: flex;
-    &__column {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      flex: 1;
-    }
-  }
-
-  .td,
-  .th {
-    border: 1px solid #ddd;
-    padding: 10px;
-    text-align: center;
-    flex: 1;
-  }
-  .td:hover {
-    background-color: #ddd;
-  }
-}
--- a/src/components/Scheduler/index.tsx
+++ b/src/components/Scheduler/index.tsx
@@ -1,61 +1,45 @@
 import React, { useEffect, useRef } from "react";
 import { useState } from "react";
-import "./index.scss";
 import { SchedulerEvents } from "./SchedulerEvents";
-const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
+import { days, hours } from "../../constants/index";
+import styled from "styled-components";

-const hours = [
-  "8:00",
-  "9:00",
-  "10:00",
-  "11:00",
-  "12:00",
-  "13:00",
-  "14:00",
-  "15:00",
-  "16:00",
-  "17:00",
-  "18:00",
-  "19:00",
-];
+const SchedulerWrapper = styled.div`
+  flex-grow: 3;
+  margin-top: 20px;
+  border-collapse: collapse;
+`;

-let events: Array<number> = [];
-for (let i = 0; i < hours.length / 2; i++) {
-  events.push(i);
-}
+const TableBody = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;

-let center: "center" = "center";
-let row: "row" = "row";
-let column: "column" = "column";
-// const collapse: "collapse" = "collapse";
-const tbodyStyles = {
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: column,
-};
+const TableRow = styled.div`
+  display: flex;
+  flex-direction: row;
+`;

-const rowStyles = {
-  display: "flex",
-  flexDirection: row,
-};
+const TableCell = styled.div`
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: center;
+  flex: 1;
+`;

-const cellStyles = {
-  border: "1px solid #ddd",
-  padding: "10px",
-  textAlign: center,
-  flex: 1,
-};
+const TableHead = styled.div`
+  display: flex;
+  width: 100%;
+`;

-const theadStyles = {
-  display: "flex",
-  width: "100%",
-};
-
-// const scheduler = {
-//   marginTop: "20px",
-//   borderCollapse: collapse,
-// };
+const TableHeadCell = styled.div`
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: center;
+  flex: 1;
+`;

 export const Scheduler = () => {
  const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
@@ -63,7 +47,6 @@ export const Scheduler = () => {
  const [cellWidth, setCellWidth] = useState(0);
  const [cellTop, setCellTop] = useState(0);

-
  useEffect(() => {
    const handleResize = () => {
      if (cellRef.current) {
@@ -98,29 +81,30 @@ export const Scheduler = () => {

  return (
    <>
-      <div className="scheduler">
-        <div style={theadStyles}>
+      <SchedulerWrapper>
+        <TableHead>
          {days.map((day, index) => (
-            <div className="th" key={index}>
-              {day}
-            </div>
+            <TableHeadCell key={index}>{day}</TableHeadCell>
          ))}
-        </div>
-        <div style={tbodyStyles}>
+        </TableHead>
+        <TableBody>
          {hours.map((hour, indexRow) => (
-            <div key={indexRow} style={rowStyles}>
+            <TableRow key={indexRow}>
              {[hour, "", "", "", "", ""].map((value, indexCell) =>
                indexRow === 0 && indexCell === 1 ? (
-                  <div key={`${indexRow}${indexCell}`}  ref={cellRef} style={cellStyles}></div>
+                  <TableCell
+                    key={`${indexRow}${indexCell}`}
+                    ref={cellRef}
+                  ></TableCell>
                ) : (
-                  <div key={`${indexRow}${indexCell}`} style={cellStyles}>{value}</div>
+                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
                )
              )}
-            </div>
+            </TableRow>
          ))}
-        </div>
+        </TableBody>
        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
-      </div>
+      </SchedulerWrapper>
    </>
  );
 };
--- a/src/components/TopBar/Results/index.tsx
+++ b/src/components/TopBar/Results/index.tsx
@@ -1,11 +1,10 @@
-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 } from "../../../businesslogic/types/lecture";
-import { Group } from "../../../businesslogic/types/group";
+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 '../../../contexts/LecturesProvider';
+import { Lecture, Group } from '../../../types';

 interface LectureData {
  name: string;
@@ -13,14 +12,12 @@ interface LectureData {
 }

 export const Results: React.FC = () => {
-  const [input, setInput] = useState<string>("");
+  const [input, setInput] = useState<string>('');
  const [lecturesData, setLecturesData] = useState<Array<LectureData>>([]);
-  const [filteredLecturesData, setFilteredLecturesData] = useState<
-    Array<LectureData>
-  >([]);
+  const [filteredLecturesData, setFilteredLecturesData] = useState<Array<LectureData>>([]);
  const [open, setOpen] = React.useState(false);

-  const lecturesContext = useContext(LecturesContext);
+  const lecturesContext = useContext(LecturesContext)!;

  //fetch lectures ids and lectures names
  // useEffect(() => {
@@ -36,12 +33,10 @@ export const Results: React.FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      const results = await axios.get(`http://localhost:1287/getCourses?name=`);
-      const lecturesData = results.data.map(
-        (result: { id: number; name: string }) => ({
-          id: result.id,
-          name: result.name,
-        })
-      );
+      const lecturesData = results.data.map((result: { id: number; name: string }) => ({
+        id: result.id,
+        name: result.name,
+      }));

      setLecturesData(lecturesData);
    };
@@ -51,8 +46,8 @@ export const Results: React.FC = () => {
  useEffect(() => {
    const names = lecturesContext.lectures.map((lecture) => lecture.name);
    const filterLectures = (value: string) => {
-      let filteredLectures = lecturesData.filter((lecture) =>
-        lecture.name.toLowerCase().includes(value.toLowerCase()) &&  !names.includes(lecture.name)
+      let filteredLectures = lecturesData.filter(
+        (lecture) => lecture.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(lecture.name),
      );
      setFilteredLecturesData(filteredLectures);
    };
@@ -60,9 +55,7 @@ export const Results: React.FC = () => {
  }, [input, open]);

  const getLecturesById = async (id: string) => {
-    const { data } = await axios.get(
-      `http://localhost:1287/getClassesByCourseId?id=${id}`
-    );
+    const { data } = await axios.get(`http://localhost:1287/getClassesByCourseId?id=${id}`);
    return data;
  };

@@ -92,12 +85,7 @@ export const Results: React.FC = () => {
      group.id = result[i].id;
      group.day = result[i].day;
      group.time = result[i].time;
-      group.lecturer =
-        result[i].lecturer.title +
-        " " +
-        result[i].lecturer.name +
-        " " +
-        result[i].lecturer.surname;
+      group.lecturer = result[i].lecturer.title + ' ' + result[i].lecturer.name + ' ' + result[i].lecturer.surname;
      group.room = result[i].room.trim();
      lecture.groups.push(group);
    }
@@ -113,7 +101,7 @@ export const Results: React.FC = () => {
      <div>
        <Input
          placeholder="Wyszukaj..."
-          inputProps={{ "aria-label": "description" }}
+          inputProps={{ 'aria-label': 'description' }}
          className="top-bar__input-field"
          onChange={handleChange}
          onClick={handleClick}
@@ -122,12 +110,7 @@ export const Results: React.FC = () => {
        {open ? (
          <div className="dropdown">
            {filteredLecturesData.map((lecture, index) => (
-              <div
-                className="lecture"
-                key={index}
-                id={String(lecture.id)}
-                onClick={onLectureClick}
-              >
+              <div className="lecture" key={index} id={String(lecture.id)} onClick={onLectureClick}>
                <p>{lecture.name} </p>
              </div>
            ))}