diff --git a/.env.example b/.env.example deleted file mode 100644 index 73eec69b..00000000 --- a/.env.example +++ /dev/null @@ -1,4 +0,0 @@ -DATABASE_URL="YOUR_DATABASE_URL" - -# This env var must be prefixed with `VITE_` in order to work in the client / Vite React app. -VITE_PORT=4000 diff --git a/requirements/03 - Movie - Client.md b/requirements/03 - Movie - Client.md index 72a06eeb..86054fef 100644 --- a/requirements/03 - Movie - Client.md +++ b/requirements/03 - Movie - Client.md @@ -5,6 +5,6 @@ Work inside the `handleCreateMovie` function in [src/client/App.jsx](../src/clie The `title`, `description` and `runtimeMins` parameters of the function are already hooked up to the form so you can focus on the function logic. 1. Send a request to the `/movie` route to create a new movie using the parameters provided in the function. - 1. You must add an appropriate auth header to the request - 2. The value of the header must be the token obtained during login, which should be available in local storage + 1. You must add an appropriate auth header to the request + 2. The value of the header must be the token obtained during login, which should be available in local storage 2. Update the `movies` state to include the newly created movie. The list of movies must re-render without requiring a page refresh. diff --git a/src/client/App.jsx b/src/client/App.jsx index bae3b635..a8c29a16 100644 --- a/src/client/App.jsx +++ b/src/client/App.jsx @@ -1,7 +1,7 @@ -import { useEffect, useState } from 'react'; -import './App.css'; -import MovieForm from './components/MovieForm'; -import UserForm from './components/UserForm'; +import { useEffect, useState } from "react"; +import "./App.css"; +import MovieForm from "./components/MovieForm"; +import UserForm from "./components/UserForm"; const port = import.meta.env.VITE_PORT; const apiUrl = `http://localhost:${port}`; @@ -11,8 +11,8 @@ function App() { useEffect(() => { fetch(`${apiUrl}/movie`) - .then(res => res.json()) - .then(res => setMovies(res.data)); + .then((res) => res.json()) + .then((res) => setMovies(res.data)); }, []); /** @@ -34,16 +34,72 @@ function App() { * */ const handleRegister = async ({ username, password }) => { + try { + const response = await fetch(`${apiUrl}/user/register`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ username, password }), + }); + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.message || "Something went wrong!"); + } + + const data = await response.json(); + console.log("Registration successful:", data); + } catch (error) { + console.error("Error during registration:", error); + } }; const handleLogin = async ({ username, password }) => { + try { + const response = await fetch(`${apiUrl}/user/login`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ username, password }), + }); + + if (!response.ok) { + throw new Error("Login failed"); + } + + const data = await response.json(); + const token = data.token; + localStorage.setItem("authToken", token); + + console.log("Login successful, token saved to local storage"); + } catch (error) { + console.log("Login failed:", error); + } }; const handleCreateMovie = async ({ title, description, runtimeMins }) => { - - } + try { + const token = localStorage.getItem("token"); + const res = await fetch(`${apiUrl}/movie`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `bearer ${token}`, + }, + body: JSON.stringify({ title, description, runtimeMins }), + }); + if (!res.ok) { + throw new Error("failed"); + } + const data = await res.json(); + console.log("Created Movie: ", data); + } catch (e) { + console.log("Error creating movie: ", e); + } + }; return (
@@ -58,7 +114,7 @@ function App() {

Movie list