auth_challange

package.json

@@ -10,11 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@prisma/client": "^5.16.2",
+    "@prisma/client": "^5.18.0",
     "bcrypt": "^5.1.1",
     "concurrently": "^7.6.0",
     "cors": "^2.8.5",
-    "dotenv": "^16.4.0",
+    "dotenv": "^16.4.5",
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -29,7 +29,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "nodemon": "^3.0.2",
-    "prisma": "^5.16.2",
+    "prisma": "^5.18.0",
     "vite": "^5.0.8"
   }
 }

prisma/schema.prisma

@@ -7,8 +7,8 @@ generator client {
 
 datasource db {
   provider          = "postgresql"
-  url               = env("DATABASE_URL")
-  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
+  url               = "postgresql://neondb_owner:0oLU3FieVmED@ep-patient-sun-a53sxtxp-pooler.us-east-2.aws.neon.tech/auth%20challange?sslmode=require"
+  shadowDatabaseUrl = env("postgresql://neondb_owner:0oLU3FieVmED@ep-sparkling-dream-a53gmr91-pooler.us-east-2.aws.neon.tech/neondb?sslmode=require")
 }
 
 model User {

src/client/App.jsx

@@ -1,73 +1,116 @@
-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}`;
+import React, { useState, useEffect } from 'react';
 
 function App() {
   const [movies, setMovies] = useState([]);
 
+  const fetchMovies = async () => {
+    const response = await fetch('http://localhost:4000/movie');
+    const data = await response.json();
+    setMovies(data.data);
+  };
+
   useEffect(() => {
-    fetch(`${apiUrl}/movie`)
-      .then(res => res.json())
-      .then(res => setMovies(res.data));
+    fetchMovies();
   }, []);
 
-  /**
-   * HINTS!
-   * 1. This handle___ functions below use async/await to handle promises, but the
-   * useEffect above is using .then to handle them. Both are valid approaches, but
-   * we should ideally use one or the other. Pick whichever you prefer.
-   *
-   * 2. The default method for the `fetch` API is to make a GET request. To make other
-   * types of requests, we must provide an object as the second argument of `fetch`.
-   * The values that you must provide are:
-   * - method
-   * - headers
-   * - body (if needed)
-   * For the "headers" property, you must state the content type of the body, i.e.:
-   *   headers: {
-   *     'Content-Type': 'application/json'
-   *   }
-   * */
-
-  const handleRegister = async ({ username, password }) => {
+  const handleRegister = async (event) => {
+    event.preventDefault();
+    const username = event.target.elements.username.value;
+    const password = event.target.elements.password.value;
 
+    const response = await fetch('http://localhost:4000/user/register', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    });
+
+    const data = await response.json();
+    console.log('Registered user:', data);
   };
 
-  const handleLogin = async ({ username, password }) => {
+  const handleLogin = async (event) => {
+    event.preventDefault();
+    const username = event.target.elements.username.value;
+    const password = event.target.elements.password.value;
+
+    const response = await fetch('http://localhost:4000/user/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    });
 
+    const data = await response.json();
+    localStorage.setItem('token', data.token);
+    console.log('Logged in user:', data);
   };
 
-  const handleCreateMovie = async ({ title, description, runtimeMins }) => {
+  const handleCreateMovie = async (event) => {
+    event.preventDefault();
+    const title = event.target.elements.title.value;
+    const description = event.target.elements.description.value;
+    const runtimeMins = parseInt(event.target.elements.runtimeMins.value, 10);
 
-  }
+    const response = await fetch('http://localhost:4000/movie', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('token')}`,
+      },
+      body: JSON.stringify({ title, description, runtimeMins }),
+    });
+
+    const data = await response.json();
+    console.log('Created movie:', data);
+    fetchMovies();
+  };
 
   return (
-    <div className="App">
-      <h1>Register</h1>
-      <UserForm handleSubmit={handleRegister} />
-
-      <h1>Login</h1>
-      <UserForm handleSubmit={handleLogin} />
-
-      <h1>Create a movie</h1>
-      <MovieForm handleSubmit={handleCreateMovie} />
-
-      <h1>Movie list</h1>
-      <ul>
-        {movies.map(movie => {
-          return (
-            <li key={movie.id}>
-              <h3>{movie.title}</h3>
-              <p>Description: {movie.description}</p>
-              <p>Runtime: {movie.runtimeMins}</p>
-            </li>
-          );
-        })}
-      </ul>
+    <div>
+      <div>
+        <h1>Register</h1>
+        <form onSubmit={handleRegister}>
+          <label>Username</label>
+          <input type="text" name="username" />
+          <label>Password</label>
+          <input type="password" name="password" />
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+
+      <div>
+        <h1>Login</h1>
+        <form onSubmit={handleLogin}>
+          <label>Username</label>
+          <input type="text" name="username" />
+          <label>Password</label>
+          <input type="password" name="password" />
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+
+      <div>
+        <h1>Create a Movie</h1>
+        <form onSubmit={handleCreateMovie}>
+          <label>Title</label>
+          <input type="text" name="title" />
+          <label>Description</label>
+          <input type="text" name="description" />
+          <label>Runtime (mins)</label>
+          <input type="number" name="runtimeMins" />
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+
+      <div>
+        <h1>Movie List</h1>
+        {movies.map((movie, index) => (
+          <div key={index}>
+            <h2>{movie.title}</h2>
+            <p>Description: {movie.description}</p>
+            <p>Runtime: {movie.runtimeMins}</p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }