✨ Oh-my-class/Oh-my-class#21: Dashboard structure

Oh-my-class · Nov 8, 2022 · 22474a2 · 22474a2
1 parent 82b1084
commit 22474a2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/components/login/Login.tsx b/components/login/Login.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import React, { FormEventHandler, useRef, useState } from "react";
 import { Alert, AlertType } from "../../ts/interfaces/Alert";
 import { useAlertStore } from "../../ts/store/AlertStore";
@@ -10,6 +11,7 @@ interface LoginProps {
 export const Login: React.FC<LoginProps> = ({ className }) => {
   const form = useRef<HTMLFormElement>(null);
   const alertStore = useAlertStore();
+  const router = useRouter();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
@@ -63,6 +65,7 @@ export const Login: React.FC<LoginProps> = ({ className }) => {
     alertStore.addAlert(
       new Alert("Login successful", "Welcome back!", AlertType.success)
     );
+    router.push("/app");
   };
 
   return (

diff --git a/components/login/Register.tsx b/components/login/Register.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import React, { FormEventHandler, useRef, useState } from "react";
 import { Alert, AlertType } from "../../ts/interfaces/Alert";
 import { useAlertStore } from "../../ts/store/AlertStore";
@@ -14,6 +15,7 @@ export const Register: React.FC<RegistrationProps> = ({ className }) => {
   const [password, setPassword] = useState("");
 
   const alertStore = useAlertStore();
+  const router = useRouter();
 
   function validate() {
     return form.current?.reportValidity();
@@ -57,6 +59,7 @@ export const Register: React.FC<RegistrationProps> = ({ className }) => {
         AlertType.success
       )
     );
+    router.push("/app");
   };
 
   return (

diff --git a/pages/app/index.tsx b/pages/app/index.tsx
@@ -0,0 +1,36 @@
+import { NextPage } from "next";
+import React from "react";
+
+const App: NextPage = () => {
+  return (
+    <div className="w-full min-h-screen flex flex-col lg:grid p-5 gap-5 lg:grid-rows-3 lg:grid-cols-3 animate-pulse">
+      <div className="card bg-slate-800 shadow col-span-2">
+        <div className="card-body">
+          <h1 className="card-title">Welcome to Oh my Class!</h1>
+        </div>
+      </div>
+      <div className="card bg-slate-800 shadow row-span-2">
+        <div className="card-body">
+          <h1 className="card-title">Next assessments</h1>
+        </div>
+      </div>
+      <div className="card bg-slate-800 shadow row-span-2">
+        <div className="card-body">
+          <h1 className="card-title">Calendar</h1>
+        </div>
+      </div>
+      <div className="card bg-slate-800 shadow row-span-2">
+        <div className="card-body">
+          <h1 className="card-title">Statistics</h1>
+        </div>
+      </div>
+      <div className="card bg-slate-800 shadow">
+        <div className="card-body">
+          <h1 className="card-title">Marked assessments</h1>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;