- 2. Then, once you have cloned your fork of the repo, you can run `git checkout freedom` or `git checkout empty` 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.
-
-## Instructions
-
-- Run the app with `npm run dev` - this will open a React app in your browser *and* run the express server at the
- same time. This is thanks to the `concurrently` package that we have included in this project.
-- The frontend React app will run on Vite's default port, which is usually `5173` - check the terminal once you have
- started the app to see what port it is running on.
- - If you have other Vite apps running, then this port could be different.
-- The server will run on port `4000` (as set in `.env.example` - remember to create your own `.env` file). If you need
- to, you can change this by updating the `VITE_PORT` environment variable in your `.env`.
- - Note: This environment variable is used in both the server and the client. Vite requires environment variables
- to be prefixed with `VITE_`, so do not change the name! Read more about environment variables in Vite
- [here](https://vitejs.dev/guide/env-and-mode.html#env-files).
-- Work through each file in the `requirements` directory in numerical order. You can choose whether to work on the
- Client or Server version of each requirement first, but you may find it easier to do Server first.
+## Requirements
+
+1. Both your backend _and_ your frontend must exist in this repo. We should be able to run them both together with a single command.
+2. Must use React, Express and an SQL database. Everything else is fair game.
+3. Good luck, have fun!
+
+## Extension
+
+1. Create an admin dashboard where admins can view and delete users.
+2. Introduce a second type of auth. It should be a second option to the user, not a replacement for the original.
## Example solution
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..769cfa7d
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,24 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import pluginReact from 'eslint-plugin-react'
+
+export default [
+ {
+ rules: {
+ 'react/react-in-jsx-scope': 'off',
+ 'react/jsx-uses-react': 'off',
+ },
+ },
+ {
+ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+ },
+ {
+ languageOptions: {
+ globals: { ...globals.browser, ...globals.node },
+ },
+ },
+ pluginJs.configs.recommended,
+ ...tseslint.configs.recommended,
+ pluginReact.configs.recommended,
+]
diff --git a/index.html b/index.html
index 0c589ecc..b0640226 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
-
-
-
-
-
+ {displayState ?
+
+
+
+
+ )
+}
diff --git a/src/client/components/LoginModal/index.tsx b/src/client/components/LoginModal/index.tsx
new file mode 100644
index 00000000..bccc90be
--- /dev/null
+++ b/src/client/components/LoginModal/index.tsx
@@ -0,0 +1,123 @@
+import type { AxiosResponse } from 'axios'
+import axios from 'axios'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useState } from 'react'
+import Input from './components/Input'
+import { API_LOGIN_URL, API_REGISTER_URL } from '../../const'
+import { loginStateAtom, modalAtom } from '../../state/ui.state'
+import {
+ tokenAtom,
+ userIdAtom,
+ inputNameAtom,
+ inputEmailAtom,
+ inputPasswordAtom,
+} from '../../state/user.state'
+
+export default function LoginModal() {
+ const [errorMessage, setErrorMessage] = useState('')
+ const login = useAtomValue(loginStateAtom)
+ const setDisplay = useSetAtom(modalAtom)
+ const setToken = useSetAtom(tokenAtom)
+ const setUserId = useSetAtom(userIdAtom)
+ const [name, setName] = useAtom(inputNameAtom)
+ const [email, setEmail] = useAtom(inputEmailAtom)
+ const [password, setPassword] = useAtom(inputPasswordAtom)
+
+ const loginSwitch = (): boolean => {
+ switch (login) {
+ case 'login':
+ return true
+ case 'signup':
+ return false
+ }
+ }
+
+ const loginToState = (res: AxiosResponse) => {
+ console.log(res)
+ setUserId(res.data.user.id)
+ setToken(res.data.token)
+ setDisplay(false)
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+
+ try {
+ let res: AxiosResponse | void
+
+ switch (login) {
+ case 'login':
+ res = await axios
+ .post(API_LOGIN_URL, {
+ email,
+ password,
+ })
+ .then((res) => loginToState(res))
+ break
+
+ case 'signup':
+ res = await axios
+ .post(API_REGISTER_URL, {
+ name,
+ email,
+ password,
+ })
+ .then((res) => loginToState(res))
+ break
+ }
+ } catch (error: any) {
+ console.error('ERROR: Authentication failed: ', error)
+ setErrorMessage(error.message)
+ setDisplay(true)
+ }
+ }
+
+ return (
+
+
+ )
+}
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/Movies/components/EditMovieListItem.tsx b/src/client/components/Movies/components/EditMovieListItem.tsx
new file mode 100644
index 00000000..815a7a14
--- /dev/null
+++ b/src/client/components/Movies/components/EditMovieListItem.tsx
@@ -0,0 +1,110 @@
+import { Prisma } from '@prisma/client'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { API_MOVIES_URL } from '../../../const'
+import axios from 'axios'
+import { useEffect } from 'react'
+import {
+ editTitleAtom,
+ editDescriptionAtom,
+ editCoverAtom,
+ editRuntimeAtom,
+} from '../../../state/movie.state'
+import { refreshAtom, isEditingAtom } from '../../../state/ui.state'
+import { userIdAtom, tokenAtom } from '../../../state/user.state'
+
+export default function EditMovieListItem(props: {
+ movie: Prisma.MovieUncheckedCreateInput
+}) {
+ const [title, setTitle] = useAtom(editTitleAtom)
+ const [description, setDescription] = useAtom(editDescriptionAtom)
+ const [cover, setCover] = useAtom(editCoverAtom)
+ const [runtime, setRuntime] = useAtom(editRuntimeAtom)
+ const [refresh, setRefresh] = useAtom(refreshAtom)
+ const setIsEditing = useSetAtom(isEditingAtom)
+ const userId = useAtomValue(userIdAtom)
+ const token = useAtomValue(tokenAtom)
+ const { movie } = props
+
+ useEffect(() => {
+ setTitle(movie.title)
+ setDescription(movie.description)
+ setCover(movie.cover)
+ setRuntime(movie.runtimeMins.toString())
+ }, [])
+
+ const handleSubmit = (e: React.FormEvent
+
+
+
+
+ + {loginSwitch() + ? 'Log in to your user' + : 'Create a new user'} +
+ +
+
+ 
+
+
+
+
+ )
+}
diff --git a/src/client/components/Movies/components/MovieListForm.tsx b/src/client/components/Movies/components/MovieListForm.tsx
new file mode 100644
index 00000000..2707861c
--- /dev/null
+++ b/src/client/components/Movies/components/MovieListForm.tsx
@@ -0,0 +1,95 @@
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import axios from 'axios'
+import { API_MOVIES_URL } from '../../../const'
+import {
+ inputTitleAtom,
+ inputDescriptionAtom,
+ inputCoverAtom,
+ inputRuntimeAtom,
+} from '../../../state/movie.state'
+import { isAddingAtom, refreshAtom } from '../../../state/ui.state'
+import { userIdAtom, tokenAtom } from '../../../state/user.state'
+
+export default function MoviesListForm() {
+ const [title, setTitle] = useAtom(inputTitleAtom)
+ const [description, setDescription] = useAtom(inputDescriptionAtom)
+ const [cover, setCover] = useAtom(inputCoverAtom)
+ const [runtime, setRuntime] = useAtom(inputRuntimeAtom)
+ const setIsAdding = useSetAtom(isAddingAtom)
+ const userId = useAtomValue(userIdAtom)
+ const token = useAtomValue(tokenAtom)
+ const [refresh, setRefresh] = useAtom(refreshAtom)
+
+ const handleSubmit = (e: React.FormEvent
+
+ 
+
+
+
+
+ )
+}
diff --git a/src/client/components/Movies/components/MovieListItem/components/EditButton.tsx b/src/client/components/Movies/components/MovieListItem/components/EditButton.tsx
new file mode 100644
index 00000000..41c59f80
--- /dev/null
+++ b/src/client/components/Movies/components/MovieListItem/components/EditButton.tsx
@@ -0,0 +1,16 @@
+import { useSetAtom } from 'jotai'
+import { Pencil } from 'lucide-react'
+import { isEditingAtom } from '../../../../../state/ui.state'
+
+export default function EditButton() {
+ const setIsEditing = useSetAtom(isEditingAtom)
+
+ return (
+
+ )
+}
diff --git a/src/client/components/Movies/components/MovieListItem/components/TrashButton.tsx b/src/client/components/Movies/components/MovieListItem/components/TrashButton.tsx
new file mode 100644
index 00000000..5ca8fcfa
--- /dev/null
+++ b/src/client/components/Movies/components/MovieListItem/components/TrashButton.tsx
@@ -0,0 +1,45 @@
+import { Prisma } from '@prisma/client'
+import axios from 'axios'
+import { Trash2 } from 'lucide-react'
+import { API_MOVIES_URL } from '../../../../../const'
+import { useAtom, useAtomValue } from 'jotai'
+import { refreshAtom } from '../../../../../state/ui.state'
+import { tokenAtom } from '../../../../../state/user.state'
+
+export default function TrashButton(props: {
+ movie: Prisma.MovieUncheckedCreateInput
+}) {
+ const token = useAtomValue(tokenAtom)
+ const [refresh, setRefresh] = useAtom(refreshAtom)
+ const { movie } = props
+
+ const handleDelete = () => {
+ axios
+ .delete(`${API_MOVIES_URL}/${movie.id}`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ })
+ .then((res) => {
+ console.log(res)
+ setRefresh(!refresh)
+ })
+ }
+
+ return (
+
+ )
+}
diff --git a/src/client/components/Movies/components/MovieListItem/index.tsx b/src/client/components/Movies/components/MovieListItem/index.tsx
new file mode 100644
index 00000000..62f31e4e
--- /dev/null
+++ b/src/client/components/Movies/components/MovieListItem/index.tsx
@@ -0,0 +1,40 @@
+import { Prisma } from '@prisma/client'
+import { useAtomValue } from 'jotai'
+import { isEditingAtom } from '../../../../atoms'
+import EditMovieListItem from '../EditMovieListItem'
+import EditButton from './components/EditButton'
+import TrashButton from './components/TrashButton'
+
+export default function MoviesListItem(props: {
+ movie: Prisma.MovieUncheckedCreateInput
+}) {
+ const isEditing = useAtomValue(isEditingAtom)
+ const { movie } = props
+
+ if (isEditing) return
+
+
+
+
+
+ )
+}
diff --git a/src/client/components/Movies/index.tsx b/src/client/components/Movies/index.tsx
new file mode 100644
index 00000000..e89bc025
--- /dev/null
+++ b/src/client/components/Movies/index.tsx
@@ -0,0 +1,68 @@
+import { useAtom, useAtomValue } from 'jotai'
+import Error from '../../Error'
+import { useEffect } from 'react'
+import axios from 'axios'
+import MoviesListItem from './components/MovieListItem'
+import MoviesListForm from './components/MovieListForm'
+import { SquarePen } from 'lucide-react'
+import { API_MOVIES_URL } from '../../const'
+import { isAddingAtom, refreshAtom } from '../../state/ui.state'
+import { userDataAtom, tokenAtom } from '../../state/user.state'
+import { moviesAtom } from '../../state/movie.state'
+
+export default function Movies() {
+ const [addingMov, setAddingMov] = useAtom(isAddingAtom)
+ const user = useAtomValue(userDataAtom)
+ const [movies, setMovies] = useAtom(moviesAtom)
+ const token = useAtomValue(tokenAtom)
+ const refresh = useAtomValue(refreshAtom)
+
+ useEffect(() => {
+ axios
+ .get(API_MOVIES_URL, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ })
+ .then((res) => setMovies(res.data.movies))
+ }, [refresh])
+
+ if (!user) return
+
+ {movie.title}
+Runtime: {movie.runtimeMins} mins
+{movie.description}
+
+
+ + {/* @ts-ignore */} + Added by {movie.user.name} +
+
+
+
+ )
+
+ movies.sort((a, b) => {
+ if (a.updatedAt !== undefined && b.updatedAt !== undefined) {
+ if (a.updatedAt < b.updatedAt) {
+ return 1
+ }
+ if (a.updatedAt > b.updatedAt) {
+ return -1
+ }
+ }
+ return 0
+ })
+
+ return (
+
+
+ )
+}
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/client/const.ts b/src/client/const.ts
new file mode 100644
index 00000000..72a8ba02
--- /dev/null
+++ b/src/client/const.ts
@@ -0,0 +1,4 @@
+export const API_BASE_URL = 'http://localhost:3030/users'
+export const API_REGISTER_URL = 'http://localhost:3030/users/register'
+export const API_LOGIN_URL = 'http://localhost:3030/users/login'
+export const API_MOVIES_URL = 'http://localhost:3030/movies'
diff --git a/src/client/state/movie.state.ts b/src/client/state/movie.state.ts
new file mode 100644
index 00000000..9ea665b3
--- /dev/null
+++ b/src/client/state/movie.state.ts
@@ -0,0 +1,16 @@
+import { Prisma } from '@prisma/client'
+import { atom } from 'jotai'
+
+export const moviesAtom = atom
+
+
+
+ {addingMov ?
+