MOBEENMUHAMMAD

package.json

@@ -18,6 +18,7 @@
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
+    "react-axios": "^2.0.6",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

src/client/App.css

@@ -39,4 +39,16 @@
 
 ul {
   list-style: none;
-}
+}
+
+.button {
+  background-color: rgb(151, 151, 151);
+  border-radius: 20px;
+  outline: none;
+  border: none;
+  line-height: 30px;
+  cursor: pointer;
+  color: white;
+  width: 100px;
+  margin-top: 20px;
+}

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,40 +11,79 @@ function App() {
 
   useEffect(() => {
     fetch(`${apiUrl}/movie`)
-      .then(res => res.json())
-      .then(res => setMovies(res.data));
+      .then((res) => res.json())
+      .then((res) => setMovies(res.data));
   }, []);
 
-  /**
-   * 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 data = {
+      username,
+      password,
+    };
+
+    const options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    };
 
+    const registerUserData = await fetch(`${apiUrl}/user/register`, options);
+    const registeredUser = await registerUserData.json();
+    return alert(registeredUser.message);
   };
 
   const handleLogin = async ({ username, password }) => {
+    const data = {
+      username,
+      password,
+    };
+
+    const options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    };
+
+    const logInUserData = await fetch(`${apiUrl}/user/login`, options);
+
+    const loggedUser = await logInUserData.json();
+
+    const userToken = loggedUser.data;
 
+    localStorage.setItem("token", userToken);
+    return alert(loggedUser.message);
   };
 
   const handleCreateMovie = async ({ title, description, runtimeMins }) => {
+    const data = {
+      title,
+      description,
+      runtimeMins,
+    };
+    const options = {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify(data),
+    };
 
-  }
+    const newMovieData = await fetch(`${apiUrl}/movie`, options);
 
+    const newMovie = await newMovieData.json();
+
+    if (newMovie.data) {
+      setMovies([...movies, newMovie.data]);
+    } 
+
+    return alert(newMovie.message);
+  };
+
+  const handleLogOut = () => {
+    localStorage.removeItem("token");
+    return alert("User Log Out sucessfully");
+  };
   return (
     <div className="App">
       <h1>Register</h1>
@@ -56,9 +95,12 @@ function App() {
       <h1>Create a movie</h1>
       <MovieForm handleSubmit={handleCreateMovie} />
 
+      <button className="button" onClick={handleLogOut}>
+        Log Out
+      </button>
       <h1>Movie list</h1>
       <ul>
-        {movies.map(movie => {
+        {movies.map((movie) => {
           return (
             <li key={movie.id}>
               <h3>{movie.title}</h3>

src/client/components/MovieForm.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import '../App.css'
 
 export default function MovieForm({ handleSubmit }) {
     const [movie, setMovie] = useState({ title: '', description: '', runtimeMins: 60 });
@@ -22,7 +23,7 @@ export default function MovieForm({ handleSubmit }) {
             <input type='text' name='title' placeholder="Title" value={movie.title} onChange={handleChange} />
             <input type='text' name='description' placeholder="Description" value={movie.description} onChange={handleChange} />
             <input type='number' name='runtimeMins' placeholder="Runtime (minutes)" value={movie.runtimeMins} onChange={handleChange} />
-            <button type="submit">Submit</button>
+            <button type="submit" className="button">Submit</button>
         </form>
     );
 }

src/client/components/UserForm.jsx

@@ -1,27 +1,42 @@
 import { useState } from "react";
+import "../App.css";
 
 export default function UserForm({ handleSubmit }) {
-    const [user, setUser] = useState({ username: '', password: '' });
+  const [user, setUser] = useState({ username: "", password: "" });
 
-    const handleSubmitDecorator = (e) => {
-        e.preventDefault();
-        handleSubmit(user);
-    };
+  const handleSubmitDecorator = (e) => {
+    e.preventDefault();
+    handleSubmit(user);
+  };
 
-    const handleChange = (e) => {
-        const { name, value } = e.target;
+  const handleChange = (e) => {
+    const { name, value } = e.target;
 
-        setUser({
-            ...user,
-            [name]: value
-        });
-    };
+    setUser({
+      ...user,
+      [name]: value,
+    });
+  };
 
-    return (
-        <form onSubmit={handleSubmitDecorator}>
-            <input type="text" name="username" placeholder="Username" value={user.username} onChange={handleChange} />
-            <input type="password" name="password" placeholder="Password" value={user.password} onChange={handleChange} />
-            <button type="submit">Submit</button>
-        </form>
-    );
-}
+  return (
+    <form onSubmit={handleSubmitDecorator}>
+      <input
+        type="text"
+        name="username"
+        placeholder="Username"
+        value={user.username}
+        onChange={handleChange}
+      />
+      <input
+        type="password"
+        name="password"
+        placeholder="Password"
+        value={user.password}
+        onChange={handleChange}
+      />
+      <button type="submit" className="button">
+        Submit
+      </button>
+    </form>
+  );
+}

src/index.css

@@ -11,3 +11,4 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
   monospace;
 }
+