Feature/page/landing

backend/app/routes/desafios.py

@@ -1,3 +1,4 @@
+from sqlalchemy import inspect
 from typing import List, Annotated
 
 from fastapi import APIRouter, Depends, HTTPException
@@ -11,34 +12,29 @@
 from sqlalchemy.orm import Session
 
 router = APIRouter(
-    prefix="/desafios",
-    tags=["desafios"],
-    responses={404: {"description": "Not found"}}
+    prefix="/desafios", tags=["desafios"], responses={404: {"description": "Not found"}}
 )
-from sqlalchemy import inspect
+
 
 @router.post("/", response_model=Desafio)
 def create_desafio(
     desafio: DesafioCreate,
     current_user: Annotated[Users, Depends(get_current_active_user)],
-    db: Session = Depends(get_db)
+    db: Session = Depends(get_db),
 ):
     # TODO: check if user is allowed to create desafio (staff)
     try:
         with db.begin():
             # create 'Atividade' object
-            db_atividade = Atividade(
-                nome=desafio.nome,
-                pontos=desafio.pontos
-            )
+            db_atividade = Atividade(nome=desafio.nome, pontos=desafio.pontos)
             db.add(db_atividade)
-            db.flush() # flush to get the id
+            db.flush()  # flush to get the id
 
             # create 'Desafios' object
             db_desafio = Desafios(
                 descricao=desafio.descricao,
-                empresa_id=desafio.empresa_id,
-                atividade_id=db_atividade.id
+                # empresa_id=desafio.empresa_id,
+                atividade_id=db_atividade.id,
             )
             db.add(db_desafio)
 
@@ -51,12 +47,12 @@ def create_desafio(
                 nome=db_atividade.nome,
                 pontos=db_atividade.pontos,
                 descricao=db_desafio.descricao,
-                empresa_id=db_desafio.empresa_id
             )
     except Exception as e:
         db.rollback()
         return HTTPException(status_code=400, detail=str(e))
 
+
 @router.get("/", response_model=List[Desafio])
 def read_desafios(skip: int = 0, limit: int = 10, db: Session = Depends(get_db)):
     # Join 'Atividade' and 'Desafios' tables
@@ -66,16 +62,16 @@ def read_desafios(skip: int = 0, limit: int = 10, db: Session = Depends(get_db))
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .offset(skip)
         .limit(limit)
         .all()
     )
-    
+
     return db_desafios
 
+
 @router.get("/{desafio_id}", response_model=Desafio)
 def read_desafio(desafio_id: int, db: Session = Depends(get_db)):
     # Join 'Atividade' and 'Desafios' tables
@@ -85,7 +81,6 @@ def read_desafio(desafio_id: int, db: Session = Depends(get_db)):
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .filter(Desafios.id == desafio_id)
@@ -95,12 +90,13 @@ def read_desafio(desafio_id: int, db: Session = Depends(get_db)):
         raise HTTPException(status_code=404, detail="Desafio not found")
     return db_desafio
 
+
 @router.put("/{desafio_id}", response_model=Desafio)
 def update_desafio(
     desafio_id: int,
     desafio: DesafioUpdate,
     current_user: Annotated[Users, Depends(get_current_active_user)],
-    db: Session = Depends(get_db)
+    db: Session = Depends(get_db),
 ):
     # TODO: check if user is allowed to update desafio (staff)
 
@@ -111,41 +107,39 @@ def update_desafio(
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .filter(Desafios.id == desafio_id)
         .first()
     )
     if db_desafio is None:
         raise HTTPException(status_code=404, detail="Desafio not found")
-    
+
     # update 'Atividade' object
-    db.query(Atividade).filter(Atividade.id == db_desafio.id).update({
-        "nome": desafio.nome,
-        "pontos": desafio.pontos
-    })
+    db.query(Atividade).filter(Atividade.id == db_desafio.id).update(
+        {"nome": desafio.nome, "pontos": desafio.pontos}
+    )
     # update 'Desafios' object
     db.query(Desafios).filter(Desafios.id == db_desafio.id).update({
         "descricao": desafio.descricao,
-        "empresa_id": desafio.empresa_id
     })
     db.commit()
-    
+
     # return updated object
     return Desafio(
         id=db_desafio.id,
         nome=desafio.nome,
         pontos=desafio.pontos,
         descricao=desafio.descricao,
-        empresa_id=desafio.empresa_id
     )
 
+
 @router.delete("/{desafio_id}", response_model=Desafio)
 def delete_desafio(
     desafio_id: int,
     current_user: Annotated[Users, Depends(get_current_active_user)],
-    db: Session = Depends(get_db)):
+    db: Session = Depends(get_db),
+):
     # TODO: check if user is allowed to delete desafio (staff)
 
     # Join 'Atividade' and 'Desafios' tables
@@ -155,16 +149,15 @@ def delete_desafio(
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .filter(Desafios.id == desafio_id)
         .first()
     )
     if db_desafio is None:
         raise HTTPException(status_code=404, detail="Desafio not found")
-    
+
     # delete atividade (this will delete desafio too)
     db.query(Atividade).filter(Atividade.id == db_desafio.id).delete()
     db.commit()
-    return db_desafio
+    return db_desafio

frontend/src/components/BaseLayout.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Navbar from "./Navbar";
+export default function BaseLayout({ children }) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}

frontend/src/components/Navbar.jsx

@@ -0,0 +1,85 @@
+export default function Navbar() {
+  return (
+    <div className="navbar bg-base-100 py-6 px-5 w-full">
+      <div className="navbar-start">
+        <div className="h-full max-w-48">
+          <img
+            className="max-h-full max-w-full w-auto object-contain"
+            src="/public/logo_white.png"
+            alt="logo"
+          />
+        </div>
+      </div>
+      <div className="navbar-center hidden lg:flex">
+        <ul className="menu menu-horizontal px-1">
+          <li>
+            <a>Item 1</a>
+          </li>
+          <li>
+            <details>
+              <summary>Parent</summary>
+              <ul className="p-2">
+                <li>
+                  <a>Submenu 1</a>
+                </li>
+                <li>
+                  <a>Submenu 2</a>
+                </li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <a>Item 3</a>
+          </li>
+        </ul>
+      </div>
+      <div className="navbar-end">
+        <a className="btn btn-primary text-white border-white mx-3">Button</a>
+        <div className="dropdown dropdown-end">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-secondary border-white lg:hidden"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
+            </svg>
+          </div>
+          <ul
+            tabIndex={0}
+            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+          >
+            <li>
+              <a>Item 1</a>
+            </li>
+            <li>
+              <a>Parent</a>
+              <ul className="p-2">
+                <li>
+                  <a>Submenu 1</a>
+                </li>
+                <li>
+                  <a>Submenu 2</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a>Item 3</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/desafios.jsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from "react";
+export const Desafios = () => {
+    const [desafios, setDesafios] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        fetch("http://127.0.0.1:8000/desafios")
+            .then((response) => response.json())
+            .then((data) => {
+                setDesafios(data);
+                setLoading(false);
+            });
+    }, []);
+    const handleAddDesafio = (event) => {
+        event.preventDefault();
+        const nome = event.target.nome.value;
+        const pontos = event.target.pontos.value;
+        const descricao = event.target.descricao.value;
+        fetch("http://127.0.0.1:8000/desafios", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ nome, pontos, descricao }),
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                setDesafios([...desafios, data]);
+                event.target.reset();
+            });
+    };
+    return (
+        <>
+            <h1 className="text-4xl font-semibold">Desafios</h1>
+            {loading ? (
+                <p>Loading...</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="table">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Nome</th>
+                                <th>Pontos</th>
+                                <th>Descrição</th>
+                            </tr>
+                        </thead>
+                        {desafios.map((desafio) => (
+                            <tr key={desafio.id}>
+                                <td>{desafio.id}</td>
+                                <td>{desafio.nome}</td>
+                                <td>{desafio.pontos}</td>
+                                <td>{desafio.descricao}</td>
+                            </tr>
+                        ))}
+                    </table>
+                </div>
+            )}
+            <form
+                className="overflow-x-auto flex flex-col"
+                onSubmit={handleAddDesafio}
+            >
+                <label>Nome</label>
+                <input
+                    className="input input-bordered w-full max-w-xs"
+                    type="text"
+                    name="nome"
+                />
+                <label>Pontos</label>
+                <input
+                    className="input input-bordered w-full max-w-xs"
+                    type="number"
+                    name="pontos"
+                />
+                <label>Descrição</label>
+                <input
+                    className="input input-bordered w-full max-w-xs"
+                    type="text"
+                    name="descricao"
+                />
+                <button type="submit" className="btn btn-primary max-w-xs mt-6">
+                    Adicionar
+                </button>
+            </form>
+        </>
+    );
+};