From 3010cd395fd11f3bbdc4fd424d397c2453b57f28 Mon Sep 17 00:00:00 2001 From: Julian Ng Date: Wed, 24 Jan 2024 17:49:32 +0000 Subject: [PATCH 1/3] Remove boilerplate for freedom option --- src/client/App.jsx | 62 ----------------------------- src/client/components/MovieForm.jsx | 28 ------------- src/client/components/UserForm.jsx | 27 ------------- src/server/controllers/movie.js | 31 --------------- src/server/controllers/user.js | 39 ------------------ src/server/routers/movie.js | 4 -- src/server/routers/user.js | 4 -- 7 files changed, 195 deletions(-) delete mode 100644 src/client/components/MovieForm.jsx delete mode 100644 src/client/components/UserForm.jsx diff --git a/src/client/App.jsx b/src/client/App.jsx index bae3b635..4becfbda 100644 --- a/src/client/App.jsx +++ b/src/client/App.jsx @@ -1,73 +1,11 @@ -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}`; function App() { - const [movies, setMovies] = useState([]); - - useEffect(() => { - fetch(`${apiUrl}/movie`) - .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 handleLogin = async ({ username, password }) => { - - }; - - const handleCreateMovie = async ({ title, description, runtimeMins }) => { - - } - return (
-

Register

- - -

Login

- - -

Create a movie

- - -

Movie list

-
    - {movies.map(movie => { - return ( -
  • -

    {movie.title}

    -

    Description: {movie.description}

    -

    Runtime: {movie.runtimeMins}

    -
    • - ); - })} -
); } diff --git a/src/client/components/MovieForm.jsx b/src/client/components/MovieForm.jsx deleted file mode 100644 index a3d92402..00000000 --- a/src/client/components/MovieForm.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useState } from "react"; - -export default function MovieForm({ handleSubmit }) { - const [movie, setMovie] = useState({ title: '', description: '', runtimeMins: 60 }); - - const handleSubmitDecorator = (e) => { - e.preventDefault(); - handleSubmit(movie); - } - - const handleChange = (e) => { - const { name, value } = e.target; - - setMovie({ - ...movie, - [name]: name === 'runtimeMins' ? parseInt(value) : value - }); - } - - return ( -
- - - - -
- ); -} \ No newline at end of file diff --git a/src/client/components/UserForm.jsx b/src/client/components/UserForm.jsx deleted file mode 100644 index 328f90b4..00000000 --- a/src/client/components/UserForm.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useState } from "react"; - -export default function UserForm({ handleSubmit }) { - const [user, setUser] = useState({ username: '', password: '' }); - - const handleSubmitDecorator = (e) => { - e.preventDefault(); - handleSubmit(user); - }; - - const handleChange = (e) => { - const { name, value } = e.target; - - setUser({ - ...user, - [name]: value - }); - }; - - return ( -
- - - -
- ); -} \ No newline at end of file diff --git a/src/server/controllers/movie.js b/src/server/controllers/movie.js index d4733b61..e69de29b 100644 --- a/src/server/controllers/movie.js +++ b/src/server/controllers/movie.js @@ -1,31 +0,0 @@ -import jwt from 'jsonwebtoken'; -import { PrismaClient } from '@prisma/client' -const prisma = new PrismaClient(); - -const jwtSecret = 'mysecret'; - -const getAllMovies = async (req, res) => { - const movies = await prisma.movie.findMany(); - - res.json({ data: movies }); -}; - -const createMovie = async (req, res) => { - 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.' }) - } - - const createdMovie = null; - - res.json({ data: createdMovie }); -}; - -export { - getAllMovies, - createMovie -}; diff --git a/src/server/controllers/user.js b/src/server/controllers/user.js index 05db4183..e69de29b 100644 --- a/src/server/controllers/user.js +++ b/src/server/controllers/user.js @@ -1,39 +0,0 @@ -import bcrypt from 'bcrypt'; -import jwt from 'jsonwebtoken'; -import { PrismaClient } from '@prisma/client' -const prisma = new PrismaClient(); - -const jwtSecret = 'mysecret'; - -const register = async (req, res) => { - const { username, password } = req.body; - - const createdUser = null; - - res.json({ data: createdUser }); -}; - -const login = async (req, res) => { - const { username, password } = req.body; - - const foundUser = null; - - if (!foundUser) { - return res.status(401).json({ error: 'Invalid username or password.' }); - } - - const passwordsMatch = false; - - if (!passwordsMatch) { - return res.status(401).json({ error: 'Invalid username or password.' }); - } - - const token = null; - - res.json({ data: token }); -}; - -export { - register, - login -}; diff --git a/src/server/routers/movie.js b/src/server/routers/movie.js index a606c4c9..60772b98 100644 --- a/src/server/routers/movie.js +++ b/src/server/routers/movie.js @@ -1,9 +1,5 @@ import express from 'express'; -import { getAllMovies, createMovie } from '../controllers/movie.js'; const router = express.Router(); -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..60772b98 100644 --- a/src/server/routers/user.js +++ b/src/server/routers/user.js @@ -1,9 +1,5 @@ import express from 'express'; -import { register, login } from '../controllers/user.js'; const router = express.Router(); -router.post('/register', register); -router.post('/login', login); - export default router; From 9b4e7b78013710b6f571eef0cae5664fcd5a823e Mon Sep 17 00:00:00 2001 From: Nathan King Date: Wed, 10 Jul 2024 08:43:40 +0100 Subject: [PATCH 2/3] update freedom --- README.md | 13 ++++----- index.html | 2 +- .../20220211144514_init/migration.sql | 28 ------------------ prisma/migrations/migration_lock.toml | 3 -- prisma/schema.prisma | 29 ------------------- src/client/App.jsx | 5 +--- src/server/controllers/movie.js | 0 src/server/controllers/user.js | 0 src/server/index.js | 29 ------------------- src/server/routers/movie.js | 5 ---- src/server/routers/user.js | 5 ---- 11 files changed, 8 insertions(+), 111 deletions(-) delete mode 100644 prisma/migrations/20220211144514_init/migration.sql delete mode 100644 prisma/migrations/migration_lock.toml delete mode 100644 prisma/schema.prisma delete mode 100644 src/server/controllers/movie.js delete mode 100644 src/server/controllers/user.js delete mode 100644 src/server/routers/movie.js delete mode 100644 src/server/routers/user.js diff --git a/README.md b/README.md index 1aaec8c4..f88db7b7 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,8 @@ The flow of the application you build looks like this: Take a little bit of time to familiarise yourself with the project structure - this exercise has both a front-end React app (`src/client/`) *and* a back-end express API (`src/server/`) in it. +**Note:** Since you are using the freedom branch, all we've done is add the require dependencies and place (almost) empty index files into the src/ sub-directories. Everything else is up to you. + 1. Fork this repository and clone the fork. 1. If you want to use the more challenging `freedom` branch, remember to UNCHECK the checkbox for "Copy the `main` branch only" @@ -32,13 +34,10 @@ app (`src/client/`) *and* a back-end express API (`src/server/`) in it. 2. Then, once you have cloned your fork of the repo, you can run `git checkout freedom` in your terminal. 3. If you do not uncheck this box, then you will only be able to access the `main` branch. 2. Rename `.env.example` to `.env` -3. Edit the `DATABASE_URL` variable in `.env`, swapping `YOUR_DATABASE_URL` for the URL of the database you just - created. Leave `?schema=prisma` at the end. -4. Edit the `SHADOW_DATABASE_URL` variable in `.env`, swapping `YOUR_SHADOW_DATABASE_URL` for the URL of a shadow - database you created in an earlier exercise. Leave `?schema=shadow` at the end. -5. Run `npm ci` to install the project dependencies. -6. We have already created the Prisma schema and migrations for you. Run `npx prisma migrate reset` to execute the - database migrations. Press `y` when it asks if you're sure. +3. Edit the `DATABASE_URL` variable in `.env`, swapping `YOUR_DATABASE_URL` for the URL of your database +4. Run `npm ci` to install the project dependencies. +5. If you're using the main branch, we have already created the Prisma schema and migrations for you. Run `npx prisma migrate reset` to execute the database migrations. Press `y` when it asks if you're sure. + - If you're using the freedom branch: good luck and have fun! ## Instructions diff --git a/index.html b/index.html index 0c589ecc..0ccc3959 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + Auth Challenge
diff --git a/prisma/migrations/20220211144514_init/migration.sql b/prisma/migrations/20220211144514_init/migration.sql deleted file mode 100644 index d20c1f64..00000000 --- a/prisma/migrations/20220211144514_init/migration.sql +++ /dev/null @@ -1,28 +0,0 @@ --- CreateTable -CREATE TABLE "User" ( - "id" SERIAL NOT NULL, - "username" TEXT NOT NULL, - "password" TEXT NOT NULL, - "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, - "updatedAt" TIMESTAMP(3) NOT NULL, - - CONSTRAINT "User_pkey" PRIMARY KEY ("id") -); - --- CreateTable -CREATE TABLE "Movie" ( - "id" SERIAL NOT NULL, - "title" TEXT NOT NULL, - "description" TEXT NOT NULL, - "runtimeMins" INTEGER NOT NULL, - "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, - "updatedAt" TIMESTAMP(3) NOT NULL, - - CONSTRAINT "Movie_pkey" PRIMARY KEY ("id") -); - --- CreateIndex -CREATE UNIQUE INDEX "User_username_key" ON "User"("username"); - --- CreateIndex -CREATE UNIQUE INDEX "Movie_title_key" ON "Movie"("title"); diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml deleted file mode 100644 index 6bf90154..00000000 --- a/prisma/migrations/migration_lock.toml +++ /dev/null @@ -1,3 +0,0 @@ -# Please do not edit this file manually -# It should be added in your version-control system (i.e. Git) -provider = "postgresql" \ No newline at end of file diff --git a/prisma/schema.prisma b/prisma/schema.prisma deleted file mode 100644 index 68676dd3..00000000 --- a/prisma/schema.prisma +++ /dev/null @@ -1,29 +0,0 @@ -// This is your Prisma schema file, -// learn more about it in the docs: https://pris.ly/d/prisma-schema - -generator client { - provider = "prisma-client-js" -} - -datasource db { - provider = "postgresql" - url = env("DATABASE_URL") - shadowDatabaseUrl = env("SHADOW_DATABASE_URL") -} - -model User { - id Int @id @default(autoincrement()) - username String @unique - password String - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt -} - -model Movie { - id Int @id @default(autoincrement()) - title String @unique - description String - runtimeMins Int - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt -} diff --git a/src/client/App.jsx b/src/client/App.jsx index 4becfbda..f5e08f1b 100644 --- a/src/client/App.jsx +++ b/src/client/App.jsx @@ -4,10 +4,7 @@ const port = import.meta.env.VITE_PORT; const apiUrl = `http://localhost:${port}`; function App() { - return ( -
-
- ); + return <>; } export default App; diff --git a/src/server/controllers/movie.js b/src/server/controllers/movie.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/server/controllers/user.js b/src/server/controllers/user.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/server/index.js b/src/server/index.js index 1edd415d..acbd9268 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -2,36 +2,7 @@ import { config } from 'dotenv'; config(); -// Import express and cors -import express from 'express'; -import cors from 'cors'; -// Set up express -const app = express(); -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 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 }); -}); // Start our API server const port = process.env.VITE_PORT; diff --git a/src/server/routers/movie.js b/src/server/routers/movie.js deleted file mode 100644 index 60772b98..00000000 --- a/src/server/routers/movie.js +++ /dev/null @@ -1,5 +0,0 @@ -import express from 'express'; - -const router = express.Router(); - -export default router; diff --git a/src/server/routers/user.js b/src/server/routers/user.js deleted file mode 100644 index 60772b98..00000000 --- a/src/server/routers/user.js +++ /dev/null @@ -1,5 +0,0 @@ -import express from 'express'; - -const router = express.Router(); - -export default router; From 8f4dc39cdedd4db5b9c28be8126aa94079026e8e Mon Sep 17 00:00:00 2001 From: Nathan King Date: Wed, 10 Jul 2024 08:48:18 +0100 Subject: [PATCH 3/3] update readme --- README.md | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index f88db7b7..0f74f6ad 100644 --- a/README.md +++ b/README.md @@ -26,18 +26,9 @@ app (`src/client/`) *and* a back-end express API (`src/server/`) in it. **Note:** Since you are using the freedom branch, all we've done is add the require dependencies and place (almost) empty index files into the src/ sub-directories. Everything else is up to you. -1. Fork this repository and clone the fork. - 1. If you want to use the more challenging `freedom` branch, remember to UNCHECK the checkbox for "Copy the - `main` branch only" - - forking screenshot - 2. Then, once you have cloned your fork of the repo, you can run `git checkout freedom` in your terminal. - 3. If you do not uncheck this box, then you will only be able to access the `main` branch. -2. Rename `.env.example` to `.env` -3. Edit the `DATABASE_URL` variable in `.env`, swapping `YOUR_DATABASE_URL` for the URL of your database -4. Run `npm ci` to install the project dependencies. -5. If you're using the main branch, we have already created the Prisma schema and migrations for you. Run `npx prisma migrate reset` to execute the database migrations. Press `y` when it asks if you're sure. - - If you're using the freedom branch: good luck and have fun! +1. Rename `.env.example` to `.env` +2. Edit the `DATABASE_URL` variable in `.env`, swapping `YOUR_DATABASE_URL` for the URL of your database +3. Run `npm ci` to install the project dependencies. ## Instructions