Merge pull request #58 from ES2-UFPI/henrique

Creating new class

server/src/index.ts

@@ -5,6 +5,7 @@ import { config } from 'dotenv'
 config();
 
 import { AvaliationModel, AvaliationDocument } from './model/Avaliation';
+import { Class, IClass } from './model/Class';
 import AvaliationResponseModel from './model/AvaliationResponse';
 
 const app = express();
@@ -68,6 +69,24 @@ app.post('/getResponseAvaliation/:id}', async (req: Request, res: Response) => {
   }
 });
 
+app.post('/createClass', async (req: Request, res: Response) => {
+  try {
+    const { className, classSummary } = req.body;
+
+    const newClass: IClass = new Class({
+      className,
+      classSummary,
+    });
+
+    const savedClass: IClass = await newClass.save();
+
+    res.status(201).json({ message: 'Form created successfully', savedClass});
+  } catch (err) {
+    console.error(err);
+    res.status(500).send('Server error');
+  }
+});
+
 
 mongoose.connect(`${process.env.MONGO_URL}`).then(() => {
   console.log(`listening on port ${PORT}`);

server/src/model/Class.ts

@@ -0,0 +1,13 @@
+import { Document, Model, model, Schema } from 'mongoose';
+
+export interface IClass extends Document {
+  className: string;
+  classSummary: string;
+}
+
+const classSchema: Schema<IClass> = new Schema({
+  className: { type: String, required: true },
+  classSummary: { type: String, required: true },
+});
+
+export const Class: Model<IClass> = model<IClass>('Class', classSchema);

vite-client/src/Pages/CreateAvaliation/index.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 //Components da aplicação
 import { FormAvaliation } from '../../components/FormAvaliation'
 import { ContextQuestionsProvider } from '../../context/contextQuestions'
+import { Wrapper } from '../../styles/Layout'
 
 //Components de estilização
 import { CreateTaskOrExamStyled } from './styles'
@@ -19,28 +20,30 @@ export function CreateTaskOrExam() {
   return (
     <ContextQuestionsProvider>
       <CreateTaskOrExamStyled className="TaskOrExam">
-        <label htmlFor="avaliation">Escolha a avaliação: </label>
-        <select
-          name="avaliation"
-          id="avaliation"
-          value={selectValue}
-          onChange={e => setSelectValue(e.target.value)}
-        >
-          {list.map((avaliation, i) => (
-            <option key={i} value={avaliation.id}>
-              {avaliation.name}
-            </option>
-          ))}
-        </select>
-        {/* Dependendo da escolha, vai gerar um formulario diferente */}
-        { 
-          selectValue !== 'none' ? 
-            <FormAvaliation 
-              typeAvaliation={selectValue}
-            /> 
-            : 
-            <h2>Escolha uma opção</h2>
-        }
+        <Wrapper>
+          <label htmlFor="avaliation">Escolha a avaliação: </label>
+          <select
+            name="avaliation"
+            id="avaliation"
+            value={selectValue}
+            onChange={e => setSelectValue(e.target.value)}
+          >
+            {list.map((avaliation, i) => (
+              <option key={i} value={avaliation.id}>
+                {avaliation.name}
+              </option>
+            ))}
+          </select>
+          {/* Dependendo da escolha, vai gerar um formulario diferente */}
+          {
+            selectValue !== 'none' ?
+              <FormAvaliation
+                typeAvaliation={selectValue}
+              />
+              :
+              <h2>Escolha uma opção</h2>
+          }
+        </Wrapper>
       </CreateTaskOrExamStyled>
     </ContextQuestionsProvider>
   )

vite-client/src/Pages/CreateAvaliation/styles.ts

@@ -7,12 +7,10 @@ export const CreateTaskOrExamStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 40px 40px;
   min-height: 100vh;
 
   label {
     width: 50%;
-    /* margin-bottom: .5rem; */
   }
 
   select {

vite-client/src/Pages/CreateClass/index.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { Wrapper } from "../../styles/Layout";
+import { ButtonSaveClass, Class, Form } from "./styles";
+
+
+export function CreateClass(){
+
+  const [className, setClassName] = useState<string>('');
+  const [classSummary, setClassSummary] = useState<string>('');
+
+  function hanldeSubmitClass(){
+    const classData = {
+      className,
+      classSummary
+    }
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(classData)
+    };
+
+    fetch('http://localhost:3000/createClass', requestOptions)
+      .then(response => response.json())
+      .then(data => {
+        console.log(data);
+        // add code to handle successful class registration
+      })
+      .catch(error => console.error(error));
+  }
+
+  return (
+    <Class>
+      <Wrapper>
+        <Form onSubmit={e => e.preventDefault()}>
+          <legend>
+            <h2>Criar nova turma</h2>
+          </legend>
+
+          <label htmlFor="nameClass">Nome da turma:</label>
+          <input type="text" placeholder="Nome da turma"
+            value={className} onChange={(e) => setClassName(e.target.value)} />
+
+          <label htmlFor="dicipline">Diciplina: </label>
+          <input type="text" placeholder="Qual diciplina?"/>
+
+          <label htmlFor="menuDicipline">Ementa: </label>
+          <textarea
+            name="postContent"
+            rows={4}
+            cols={40}
+            placeholder="Ementa da diciplina..."
+            value={classSummary} onChange={(e) => setClassSummary(e.target.value)} 
+          />
+        </Form>
+
+        <ButtonSaveClass onClick={hanldeSubmitClass}>
+          Cadastrar Turma
+        </ButtonSaveClass>
+
+      </Wrapper>
+    </Class>
+  )
+}

vite-client/src/Pages/CreateClass/styles.ts

@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import { ContainerButtonGreen } from "../../components/ButtonGreen/styles";
+
+export const Class = styled.div `
+  padding: 1rem 1rem;
+`
+
+export const Form = styled.form`
+  width: 100%;
+  background-color: var(--primary);
+  
+  padding: 2rem 3rem 3rem;
+  margin: 3rem;
+  border-radius: 2rem;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+
+  h2 {
+    color: var(--secondary);
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  label {
+    color: var(--secondary);
+  }
+
+  input {
+    display: block;
+    margin: .5rem 0 1rem;
+    
+    padding: 2rem;
+    width: 100%;
+
+    border-radius: 2rem;
+    border: none;
+    height: 4rem;
+  }
+  
+  textarea {
+    display: block;
+    box-sizing: border-box;
+    border-radius: .8rem;
+    border: none;
+
+    width: 100%;
+    padding: 1rem;
+    line-height: 24px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+
+    &:focus {
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+`
+
+export const ButtonSaveClass = styled(ContainerButtonGreen) `
+  padding: 1rem 4rem;
+  border-radius: 2rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 0;
+`

vite-client/src/Pages/Home/index.tsx

@@ -18,8 +18,9 @@ export function Home() {
       >
         Cadastrar prova ou tarefa
       </Link>
+
       <Link
-        to="/solve-avaliation"
+        to="/view-avaliations"
         style={{
           color: '#fff',
           marginTop: '20px',
@@ -29,10 +30,11 @@ export function Home() {
           textDecoration: 'none'
         }}
       >
-        Responder prova ou tarefa
+        Ver provas e tarefas cadastradas
       </Link>
+
       <Link
-        to="/view-avaliations"
+        to="/create-class"
         style={{
           color: '#fff',
           marginTop: '20px',
@@ -42,7 +44,21 @@ export function Home() {
           textDecoration: 'none'
         }}
       >
-        Ver provas e tarefas cadastradas
+        Criar nova turma
+      </Link>
+
+      <Link
+        to="/view-classes"
+        style={{
+          color: '#fff',
+          marginTop: '20px',
+          border: '1px solid white',
+          padding: '6px',
+          borderRadius: '10px',
+          textDecoration: 'none'
+        }}
+      >
+        Ver turmas cadastradas
       </Link>
     </HomePage>
   )