From 4a982090218b239ee5025a16d50833ed3a6f3e9f Mon Sep 17 00:00:00 2001 From: Alex Stan Date: Sat, 1 Jun 2024 15:47:53 +0300 Subject: [PATCH] Added a TopicCard component (#6) --- app/components/form.tsx | 47 ++++++++++ app/components/topic_card.tsx | 44 ++++++++++ app/lib/api.ts | 33 +++++++ app/lib/question.ts | 33 +++++++ app/lib/session.ts | 17 ++++ app/sessionconfig/page.tsx | 157 +++++++--------------------------- 6 files changed, 204 insertions(+), 127 deletions(-) create mode 100644 app/components/form.tsx create mode 100644 app/components/topic_card.tsx create mode 100644 app/lib/api.ts create mode 100644 app/lib/question.ts create mode 100644 app/lib/session.ts diff --git a/app/components/form.tsx b/app/components/form.tsx new file mode 100644 index 0000000..71457a0 --- /dev/null +++ b/app/components/form.tsx @@ -0,0 +1,47 @@ +'use client'; +import { useState } from "react"; + +const Form = ({ initialData, onSubmit }) => { + const [formData, setFormData] = useState( initialData ); + + const handleSubmit = (event) => { + event.preventDefault(); + + //q = formData; + + //addQuestion( q ); + + //console.log( `Adding question ${JSON.stringify(q)}` ); + + onSubmit( formData ); + } + + const handleChange = (event) => { + const { name, value } = event.target; + setFormData( (prevData) => ({ + ...prevData, + [name]: value + })); + } + + return ( +
+
+ {Object.entries( initialData ).map( (key, val) => { + return( + )})} +
+ +
+ ); +} + +export default Form; + diff --git a/app/components/topic_card.tsx b/app/components/topic_card.tsx new file mode 100644 index 0000000..112a3fa --- /dev/null +++ b/app/components/topic_card.tsx @@ -0,0 +1,44 @@ + +const TopicCard = ({ title, children, link }) => { + return( +
+ +
+

{title}

+

+ {children} +

+
+
+
+
+

+ Start + now! +

+ + Begin + +
+
+
+
+ ) +} + +export default TopicCard; \ No newline at end of file diff --git a/app/lib/api.ts b/app/lib/api.ts new file mode 100644 index 0000000..4f656fe --- /dev/null +++ b/app/lib/api.ts @@ -0,0 +1,33 @@ +// the base URL of the api; all requests start with it +const base_url: string = "http://localhost:4000/"; + +/* +export const makeGetRequest = async (path: string): Promise => { + return await (await fetch( base_url + path )).json(); +} +*/ + +// generic function that makes a web request +const makeRequest = async (path: string, method: string, body?: string): Promise => { + console.log( `making ${method} request: ${base_url + path}, ${body}` ); + return fetch( base_url + path, { method: method, body: body ? body : null } ); +} + +// the following functions are wrappers around `makeRequest`, +// for every type of request that's needed. + +export const makeGetRequest = async (path: string): Promise => { + return (await makeRequest( path, "GET" )).json(); +} + +export const makePostRequest = async (path: string, body: T): Promise => { + return (await makeRequest( path, "POST", JSON.stringify( body ) )).json(); +} + +export const makePutRequest = async (path: string, body: T): Promise => { + return (await makeRequest( path, "PUT", JSON.stringify( body ) )).json(); +} + +export const makeDeleteRequest = async (path: string): Promise => { + return (await makeRequest( path, "DELETE" )).json(); +} \ No newline at end of file diff --git a/app/lib/question.ts b/app/lib/question.ts new file mode 100644 index 0000000..0420798 --- /dev/null +++ b/app/lib/question.ts @@ -0,0 +1,33 @@ +import { makeDeleteRequest, makeGetRequest, makePostRequest } from "./api"; + +export const enum QuizQuestion { + UL, + UR, + DL, + DR +}; + +export type Question = { + id: number; + category: string | null; + type: string | null; // TODO: make a TS type for every question type + text: string; + answer: string | boolean | QuizQuestion; +} + +export const getQuestion = async (id: number): Promise => { + return makeGetRequest( `questions/${id}/` ); +} + +export const addQuestion = async (question: Question): Promise => { + console.log( `adding question ${JSON.stringify( question)}` ); + return makePostRequest( `questions`, question ); +} + +export const editQuestion = async (question: Question): Promise => { + return makePostRequest( `questions/${question.id}`, question ); +} + +export const deleteQuestion = async (id: number): Promise => { + return makeDeleteRequest( `questions/${id}` ); +} \ No newline at end of file diff --git a/app/lib/session.ts b/app/lib/session.ts new file mode 100644 index 0000000..2a81c3b --- /dev/null +++ b/app/lib/session.ts @@ -0,0 +1,17 @@ +import { makeGetRequest, makePostRequest } from "./api"; + +export type Session = { + id: number; + right: number; + wrong: number; + total: number; + // user: string; +} + +export const getSession = async (id: number): Promise => { + return makeGetRequest( `sessions/${id}/` ); +} + +export const postSession = async (session: Session): Promise => { + return makePostRequest( `sessions`, session ); +} \ No newline at end of file diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx index 48dbfd1..172e4b5 100644 --- a/app/sessionconfig/page.tsx +++ b/app/sessionconfig/page.tsx @@ -1,4 +1,5 @@ import { CheckIcon } from '@heroicons/react/20/solid' +import TopicCard from '../components/topic_card' const includedFeatures = [ 'Private forum access', @@ -8,136 +9,38 @@ const includedFeatures = [ ] export default function Example() { + + const cards = [ + ["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ], + ["Learn geography", "It's cool ig", "/learn/geography"], + ["Learn C++", "Don't.", "/learn/cpp"], + ["Learn C", "Do.", "/learn/c"] + ]; return ( +
-
+
-
- -
-

Learn cybersecurity

-

- Learning cybersecurity is like becoming the guardian of the digital realm. - It's about mastering the art of protecting information, systems, and networks from cyber threats. - From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. -

-
-
-
-
-

- Start - now! -

- - Begin - -

- Take a short quiz to begin learning faster than ever -

-
-
-
-
-
- -
-

Learn cybersecurity

-

- Learning cybersecurity is like becoming the guardian of the digital realm. - It's about mastering the art of protecting information, systems, and networks from cyber threats. - From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. -

-
-
-
-
-

- Start - now! -

earn cybersecurity - - Begin - -

- Take a short quiz to begin learning faster than ever -

-
-
-
-
-
- -
-

Learn cybersecurity

-

- Learning cybersecurity is like becoming the guardian of the digital realm. - It's about mastering the art of protecting information, systems, and networks from cyber threats. - From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. -

-
-
-
-
-

- Start - now! -

- - Begin - -

- Take a short quiz to begin learning faster than ever -

-
-
-
-
+ { cards.map((elem) => { + return ({elem[1]}) + })} + {/* + + Learning cybersecurity is like becoming a guardian of the digital realm. + It's about mastering the art of protecting information, systems, and networks from cyber threats. + From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. + + + Learning cybersecurity is like becoming a guardian of the digital realm. + It's about mastering the art of protecting information, systems, and networks from cyber threats. + From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. + + + Learning cybersecurity is like becoming a guardian of the digital realm. + It's about mastering the art of protecting information, systems, and networks from cyber threats. + From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. + + */}
)