Merge pull request #49 from wulkanowy/feature/SPA

SPA

frontend/package.json

@@ -34,6 +34,7 @@
     "@types/react-dom": "^17.0.0",
     "object-hash": "^2.1.1",
     "react-scripts": "^4.0.1",
+    "remarkable-react": "^1.4.3",
     "reverse-md5": "0.0.5"
   },
   "devDependencies": {

frontend/src/components/API/attendance.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class AttendanceCom extends Component {
+    render() {
+        return (
+            <p>Attendance</p>
+        )
+    }
+}
+
+export default AttendanceCom

frontend/src/components/API/dashboard.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class DashboardCom extends Component {
+    render() {
+        return (
+            <p>Dashboard</p>
+        )
+    }
+}
+
+export default DashboardCom

frontend/src/components/API/exams.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class ExamsCom extends Component {
+    render() {
+        return (
+            <p>Exams</p>
+        )
+    }
+}
+
+export default ExamsCom

frontend/src/components/API/grades.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class GradesCom extends Component {
+    render() {
+        return (
+            <p>Grades</p>
+        )
+    }
+}
+
+export default GradesCom

frontend/src/components/API/homeworks.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class HomeworksCom extends Component {
+    render() {
+        return (
+            <p>Homeworks</p>
+        )
+    }
+}
+
+export default HomeworksCom

frontend/src/components/API/messages/deleted.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class DeletedCom extends Component {
+    render() {
+        return (
+            <p>Deleted Messages</p>
+        )
+    }
+}
+
+export default DeletedCom

frontend/src/components/API/messages/received.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class ReceivedCom extends Component {
+    render() {
+        return (
+            <p>Received Messages</p>
+        )
+    }
+}
+
+export default ReceivedCom

frontend/src/components/API/messages/send.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class SendCom extends Component {
+    render() {
+        return (
+            <p>Send Message</p>
+        )
+    }
+}
+
+export default SendCom

frontend/src/components/API/messages/sent.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class SentCom extends Component {
+    render() {
+        return (
+            <p>Sent Messages</p>
+        )
+    }
+}
+
+export default SentCom

frontend/src/components/API/mobile.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class MobileCom extends Component {
+    render() {
+        return (
+            <p>Mobile</p>
+        )
+    }
+}
+
+export default MobileCom

frontend/src/components/API/notes.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class NotesCom extends Component {
+    render() {
+        return (
+            <p>Notes</p>
+        )
+    }
+}
+
+export default NotesCom

frontend/src/components/API/schoolData.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class SchoolDataCom extends Component {
+    render() {
+        return (
+            <p>School Data</p>
+        )
+    }
+}
+
+export default SchoolDataCom

frontend/src/components/API/stats.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class StatsCom extends Component {
+    render() {
+        return (
+            <p>Stats</p>
+        )
+    }
+}
+
+export default StatsCom

frontend/src/components/API/studentData.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class StudentDataCom extends Component {
+    render() {
+        return (
+            <p>Student Data</p>
+        )
+    }
+}
+
+export default StudentDataCom

frontend/src/components/API/timetable.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class TimetableCom extends Component {
+    render() {
+        return (
+            <p>Timetable</p>
+        )
+    }
+}
+
+export default TimetableCom

frontend/src/components/UI.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { renderToString } from 'react-dom/server'
 import clsx from 'clsx';
 import ReactDOM from 'react-dom';
 import { createStyles, makeStyles, useTheme, Theme } from '@material-ui/core/styles';
@@ -31,7 +32,22 @@ import AssignmentInd from '@material-ui/icons/AssignmentInd';
 import Forward from '@material-ui/icons/Forward';
 import Send from '@material-ui/icons/Send';
 import Delete from '@material-ui/icons/Delete';
-
+import DashboardCom from './API/dashboard';
+import GradesCom from './API/grades';
+import TimetableCom from './API/timetable';
+import ExamsCom from './API/exams';
+import HomeworksCom from './API/homeworks';
+import AttendanceCom from './API/attendance';
+import StatsCom from './API/stats';
+import NotesCom from './API/notes';
+import MobileCom from './API/mobile';
+import SchoolDataCom from './API/schoolData';
+import StudentDataCom from './API/studentData';
+//MESSAGES
+import ReceivedCom from './API/messages/received';
+import SentCom from './API/messages/sent';
+import SendCom from './API/messages/send';
+import DeletedCom from './API/messages/deleted';
 
 const drawerWidth = 240;
 
@@ -112,6 +128,25 @@ function MiniDrawer() {
         setOpen(false);
     };
 
+    const handleGetDashboard = () => {document.querySelector('#content-typo').innerHTML = renderToString(<DashboardCom />);};
+    const handleGetGrades = () => {document.querySelector('#content-typo').innerHTML = renderToString(<GradesCom />);};
+    const handleGetTimetable = () => {document.querySelector('#content-typo').innerHTML = renderToString(<TimetableCom />)};
+    const handleGetExams = () => {document.querySelector('#content-typo').innerHTML = renderToString(<ExamsCom />)};
+    const handleGetHomeworks = () => {document.querySelector('#content-typo').innerHTML = renderToString(<HomeworksCom />);};
+    const handleGetAttendance = () => {document.querySelector('#content-typo').innerHTML = renderToString(<AttendanceCom />);};
+    const handleGetStats = () => {document.querySelector('#content-typo').innerHTML = renderToString(<StatsCom />);};
+    const handleGetNotes = () => {document.querySelector('#content-typo').innerHTML = renderToString(<NotesCom />);};
+    const handleGetMobile = () => {document.querySelector('#content-typo').innerHTML = renderToString(<MobileCom />);};
+    const handleGetSchoolData = () => {document.querySelector('#content-typo').innerHTML = renderToString(<SchoolDataCom />);};
+    const handleGetStudentData = () => {document.querySelector('#content-typo').innerHTML = renderToString(<StudentDataCom />);};
+
+    const handleGetReceived = () => {document.querySelector('#content-typo').innerHTML = renderToString(<ReceivedCom />);};
+    const handleGetSent = () => {document.querySelector('#content-typo').innerHTML = renderToString(<SentCom />);};
+    const handleSend = () => {document.querySelector('#content-typo').innerHTML = renderToString(<SendCom />);};
+    const handleGetDeleted = () => {document.querySelector('#content-typo').innerHTML = renderToString(<DeletedCom />);};
+
+    const getDataList = [handleGetDashboard, handleGetGrades, handleGetTimetable, handleGetExams, handleGetHomeworks, handleGetAttendance, handleGetStats, handleGetNotes, handleGetMobile, handleGetSchoolData, handleGetStudentData];
+    const getDataMessages = [handleGetReceived, handleGetSent, handleSend, handleGetDeleted]
     const iconsList = [<Dashboard />, <Filter6Icon />, <EventNote />, <Event />, <Class />, <DateRange />, <InsertChart />, <EmojiEvents />, <Devices />, <Business />, <AssignmentInd />];
     const iconsListMessages = [<InboxIcon />, <Forward />, <Send />, <Delete />]
 
@@ -161,7 +196,7 @@ function MiniDrawer() {
                 <Divider />
                 <List>
                     {['Start', 'Oceny', 'Plan Lekcji', 'Sprawdziany', 'Zadania Domowe', 'Frekwencja', 'Uczeń na Tle Klasy', 'Uwagi i Osiągnięcia', 'Dostęp Mobilny', 'Szkoła i Nauczyciele', 'Dane Ucznia'].map((text, index) => (
-                        <ListItem button key={text}>
+                        <ListItem button onClick={getDataList[index]} key={text}>
                             <ListItemIcon>{iconsList[index]}</ListItemIcon>
                             <ListItemText primary={text} />
                         </ListItem>
@@ -170,7 +205,7 @@ function MiniDrawer() {
                 <Divider />
                 <List>
                     {['Odebrane', 'Wysłane', 'Wyślij Wiadomość', 'Usunięte'].map((text, index) => (
-                        <ListItem button key={text}>
+                        <ListItem button onClick={getDataMessages[index]} key={text}>
                             <ListItemIcon>{iconsListMessages[index]}</ListItemIcon>
                             <ListItemText primary={text} />
                         </ListItem>
@@ -179,15 +214,15 @@ function MiniDrawer() {
             </Drawer>
             <main className={classes.content}>
                 <div className={classes.toolbar} />
-                <Typography paragraph>
+                <Typography id="content-typo" paragraph>
-                    Here is content (in my imagination)
+                    <DashboardCom />
                 </Typography>
             </main>
         </div>
     );
 }
 
-class Content extends Component {
+class UI extends Component {
     render() {
         return (
             <MiniDrawer />
@@ -195,7 +230,7 @@ class Content extends Component {
     }
 }
 
-export default Content
+export default UI
 
 const content = document.getElementById("content");
-ReactDOM.render(<Content />, content);
+ReactDOM.render(<UI />, content);

frontend/src/content.js

@@ -1 +1 @@
-import Content from "./components/Content";
+import UI from "./components/UI";