From e82816ce88b53568ffababdd209d9a40e0b50b20 Mon Sep 17 00:00:00 2001 From: Mobeen Date: Sun, 10 Mar 2024 14:29:04 +0100 Subject: [PATCH] completed --- package-lock.json | 86 +++++++++++++++++++++++++- package.json | 1 + src/client/App.css | 14 ++++- src/client/App.jsx | 94 +++++++++++++++++++++-------- src/client/components/MovieForm.jsx | 3 +- src/client/components/UserForm.jsx | 55 +++++++++++------ src/index.css | 1 + src/main.jsx | 14 ++--- src/server/controllers/movie.js | 40 ++++++------ src/server/controllers/user.js | 58 ++++++++++-------- src/server/domains/movie.js | 14 +++++ src/server/domains/user.js | 18 ++++++ src/server/index.js | 28 ++++----- src/server/routers/movie.js | 8 +-- src/server/routers/user.js | 8 +-- 15 files changed, 314 insertions(+), 128 deletions(-) create mode 100644 src/server/domains/movie.js create mode 100644 src/server/domains/user.js diff --git a/package-lock.json b/package-lock.json index 143302ab..6309d9a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "express": "^4.18.2", "jsonwebtoken": "^9.0.2", "react": "^18.2.0", + "react-axios": "^2.0.6", "react-dom": "^18.2.0" }, "devDependencies": { @@ -1567,6 +1568,12 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "peer": true + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -1579,6 +1586,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "peer": true, + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1847,6 +1864,18 @@ "color-support": "bin.js" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "peer": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2098,6 +2127,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "peer": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -2839,6 +2877,26 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "peer": true, + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2848,6 +2906,20 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "peer": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -4472,7 +4544,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -4573,6 +4644,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-axios": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz", + "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==", + "peerDependencies": { + "axios": "^0.27.2", + "prop-types": "^15.8.1", + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -4588,8 +4669,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.0", diff --git a/package.json b/package.json index eb2dc20c..a2522c41 100644 --- a/package.json +++ b/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": { diff --git a/src/client/App.css b/src/client/App.css index 635ac03f..126828cb 100644 --- a/src/client/App.css +++ b/src/client/App.css @@ -39,4 +39,16 @@ ul { list-style: none; -} \ No newline at end of file +} + +.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; +} diff --git a/src/client/App.jsx b/src/client/App.jsx index bae3b635..52af3991 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,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 (

Register

@@ -56,9 +95,12 @@ function App() {

Create a movie

+

Movie list

    - {movies.map(movie => { + {movies.map((movie) => { return (

  • {movie.title}

    diff --git a/src/client/components/MovieForm.jsx b/src/client/components/MovieForm.jsx index a3d92402..f642f330 100644 --- a/src/client/components/MovieForm.jsx +++ b/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 }) { - + ); } \ No newline at end of file diff --git a/src/client/components/UserForm.jsx b/src/client/components/UserForm.jsx index 328f90b4..2eee2b35 100644 --- a/src/client/components/UserForm.jsx +++ b/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 ( -
    - - - -
    - ); -} \ No newline at end of file + return ( +
    + + + +
    + ); +} diff --git a/src/index.css b/src/index.css index 7d30acef..e9a38c39 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,4 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + diff --git a/src/main.jsx b/src/main.jsx index 7749a5cf..ac9f9635 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './client/App.jsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./client/App.jsx"; +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - , -) + +); diff --git a/src/server/controllers/movie.js b/src/server/controllers/movie.js index d4733b61..6fc88041 100644 --- a/src/server/controllers/movie.js +++ b/src/server/controllers/movie.js @@ -1,31 +1,31 @@ -import jwt from 'jsonwebtoken'; -import { PrismaClient } from '@prisma/client' -const prisma = new PrismaClient(); - -const jwtSecret = 'mysecret'; +import jwt from "jsonwebtoken"; +import { createMovieDb, getAllMoviesDb } from "../domains/movie.js"; +const jwtSecret = "mysecret"; const getAllMovies = async (req, res) => { - const movies = await prisma.movie.findMany(); + const movies = await getAllMoviesDb(); - res.json({ data: movies }); + res.status(200).json({ data: movies }); }; const createMovie = async (req, res) => { - const { title, description, runtimeMins } = req.body; + const { title, description, runtimeMins } = req.body; - try { - const token = null; - // todo verify the token - } catch (e) { - return res.status(401).json({ error: 'Invalid token provided.' }) - } + try { + const token = req.headers.authorization.split(" ")[1]; - const createdMovie = null; + // todo verify the token + jwt.verify(token, jwtSecret); + } catch (err) { + return res.status(401).json({ error: "Invalid token provided." }); + } - res.json({ data: createdMovie }); -}; + const createdMovie = await createMovieDb(title, description, runtimeMins); -export { - getAllMovies, - createMovie + return res.status(201).json({ + newMovie: createdMovie, + message: "New movie created successfully", + }); }; + +export { getAllMovies, createMovie }; diff --git a/src/server/controllers/user.js b/src/server/controllers/user.js index 05db4183..72e9a815 100644 --- a/src/server/controllers/user.js +++ b/src/server/controllers/user.js @@ -1,39 +1,47 @@ -import bcrypt from 'bcrypt'; -import jwt from 'jsonwebtoken'; -import { PrismaClient } from '@prisma/client' -const prisma = new PrismaClient(); +import bcrypt from "bcrypt"; +import jwt from "jsonwebtoken"; +import { findUser, registerNewUserdb } from "../domains/user.js"; -const jwtSecret = 'mysecret'; +const jwtSecret = "mysecret"; const register = async (req, res) => { - const { username, password } = req.body; - - const createdUser = null; - - res.json({ data: createdUser }); + const { username, password } = req.body; + + if (!username || !password) + return res + .status(400) + .json({ error: "Enter a valid username and password" }); + + try { + const hash = await bcrypt.hash(password, 12); + + const createdUser = await registerNewUserdb(username, hash); + return res + .status(201) + .json({ data: createdUser, message: "Created user successfully" }); + } catch (err) { + return res.status(500).json({ error: err.message }); + } }; const login = async (req, res) => { - const { username, password } = req.body; + const { username, password } = req.body; - const foundUser = null; + const foundUser = await findUser(username); - if (!foundUser) { - return res.status(401).json({ error: 'Invalid username or password.' }); - } + if (!foundUser) { + return res.status(401).json({ error: "Invalid username or password." }); + } - const passwordsMatch = false; + const passwordsMatch = await bcrypt.compare(password, foundUser.password); - if (!passwordsMatch) { - return res.status(401).json({ error: 'Invalid username or password.' }); - } + if (!passwordsMatch) { + return res.status(401).json({ error: "Invalid username or password." }); + } - const token = null; + const token = jwt.sign(username, jwtSecret); - res.json({ data: token }); + res.json({ data: token, message: "User logged in sucess" }); }; -export { - register, - login -}; +export { register, login }; diff --git a/src/server/domains/movie.js b/src/server/domains/movie.js new file mode 100644 index 00000000..8f672322 --- /dev/null +++ b/src/server/domains/movie.js @@ -0,0 +1,14 @@ +import { PrismaClient } from "@prisma/client"; +const prisma = new PrismaClient(); + +const getAllMoviesDb = async () => await prisma.movie.findMany({}); + +const createMovieDb = async (title, description, runtimeMins) => + await prisma.movie.create({ + data: { + title, + description, + runtimeMins, + }, + }); +export { getAllMoviesDb, createMovieDb }; diff --git a/src/server/domains/user.js b/src/server/domains/user.js new file mode 100644 index 00000000..4e32a8bb --- /dev/null +++ b/src/server/domains/user.js @@ -0,0 +1,18 @@ +import { PrismaClient } from "@prisma/client"; +const prisma = new PrismaClient(); + +const registerNewUserdb = async (username, hash) => + await prisma.user.create({ + data: { + username: username, + password: hash, + }, + }); + +const findUser = async (username) => + await prisma.user.findFirst({ + where: { + username, + }, + }); +export { registerNewUserdb, findUser }; diff --git a/src/server/index.js b/src/server/index.js index 1edd415d..d40ecaba 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -1,40 +1,34 @@ // Load our .env file -import { config } from 'dotenv'; +import { config } from "dotenv"; config(); // Import express and cors -import express from 'express'; -import cors from 'cors'; +import express from "express"; +import cors from "cors"; // Set up express const app = express(); -app.disable('x-powered-by'); +app.disable("x-powered-by"); app.use(cors()); // Tell express to use a JSON parser middleware app.use(express.json()); // Tell express to use a URL Encoding middleware app.use(express.urlencoded({ extended: true })); +import userRouter from "./routers/user.js"; +app.use("/user", userRouter); - - -import userRouter from './routers/user.js'; -app.use('/user', userRouter); - -import movieRouter from './routers/movie.js'; -app.use('/movie', movieRouter); - - - +import movieRouter from "./routers/movie.js"; +app.use("/movie", movieRouter); // Set up a default "catch all" route to use when someone visits a route // that we haven't built -app.get('*', (req, res) => { - res.json({ ok: true }); +app.get("*", (req, res) => { + res.json({ ok: true }); }); // Start our API server const port = process.env.VITE_PORT; app.listen(port, () => { - console.log(`\n Server is running on http://localhost:${port}\n`); + console.log(`\n Server is running on http://localhost:${port}\n`); }); diff --git a/src/server/routers/movie.js b/src/server/routers/movie.js index a606c4c9..99a943f4 100644 --- a/src/server/routers/movie.js +++ b/src/server/routers/movie.js @@ -1,9 +1,9 @@ -import express from 'express'; -import { getAllMovies, createMovie } from '../controllers/movie.js'; +import express from "express"; +import { getAllMovies, createMovie } from "../controllers/movie.js"; const router = express.Router(); -router.get('/', getAllMovies); -router.post('/', createMovie); +router.get("/", getAllMovies); +router.post("/", createMovie); export default router; diff --git a/src/server/routers/user.js b/src/server/routers/user.js index 086a7f7b..ef578c57 100644 --- a/src/server/routers/user.js +++ b/src/server/routers/user.js @@ -1,9 +1,9 @@ -import express from 'express'; -import { register, login } from '../controllers/user.js'; +import express from "express"; +import { register, login } from "../controllers/user.js"; const router = express.Router(); -router.post('/register', register); -router.post('/login', login); +router.post("/register", register); +router.post("/login", login); export default router;