From da61b72402436d2ebc7d2b9c06bec98e0293c3c2 Mon Sep 17 00:00:00 2001 From: andrzej Date: Sun, 5 May 2024 23:59:33 +0200 Subject: [PATCH] ongoing --- .gitignore | 1 + src/App.css | 65 +++++++++++++++++++------------------- src/App.tsx | 14 +++++--- src/defaults.css | 62 ++++++++++++++++++++++++++++++++++++ src/functions.tsx | 19 +++++++++++ src/objects/movie-wall.tsx | 46 ++++++++++++++++++++------- src/objects/tmdb.tsx | 43 ++++++++++++++++++++++--- 7 files changed, 195 insertions(+), 55 deletions(-) create mode 100644 src/defaults.css create mode 100644 src/functions.tsx diff --git a/.gitignore b/.gitignore index dbc5e78..a0bce6e 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ dist-ssr *.sln *.sw? src/conf.js +src/auth.json diff --git a/src/App.css b/src/App.css index b9d355d..1b5d41a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,41 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; +.flow-container { + display: flex; + flex-wrap: wrap; + width: 80%; + margin: auto; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); +.poster { + font-size: 2rem; + aspect-ratio: 3/4.5; + width: 25rem; + } -@keyframes logo-spin { - from { - transform: rotate(0deg); + + +.overlay { + margin: 0; + height: 100%; + width: 100%; + font-size: inherit; + color: white; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + + p { + font-size: 0.8em; } - to { - transform: rotate(360deg); + + h1 { + font-size: 1.6em; + margin: 0; + } + + } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; +.overlay:hover { + opacity: 1; } diff --git a/src/App.tsx b/src/App.tsx index 5c4fef2..c5ace3b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +import './defaults.css' import './App.css' import { MovieWall } from './objects/movie-wall' import { useState, useEffect } from 'react' @@ -11,11 +12,12 @@ export type Config = { function App() { const [config, setConfig] = useState({ language: "es", - region: "spain" + region: "spain", + page: 1 }) - const [popularMovies, setPopularMovies] = useState([]) - useEffect(() => { tmdb.getPopular(config, setPopularMovies) }, []) - useEffect(() => { console.log(popularMovies) }, [popularMovies]) + const [movies, setMovies] = useState([]) + useEffect(() => { tmdb.getPopular(config, setMovies) }, []) + useEffect(() => { console.log(movies) }, [movies]) return ( <>
@@ -23,7 +25,9 @@ function App() {
Let's explore! - +
+ +
diff --git a/src/defaults.css b/src/defaults.css new file mode 100644 index 0000000..4f95935 --- /dev/null +++ b/src/defaults.css @@ -0,0 +1,62 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +img { + display: block; + max-width: 100%; +} + +menu:not(article menu), +ol:not(article ol), +ul:not(article ul) { + list-style: none; +} + +menu, +ol, +ul { + padding-left: 0; +} + +article ol, +article ul { + list-style-position: inside; +} + +a { + /* Places underlines below the descenders */ + text-underline-position: under; + + + /* Sets the thickness as a percentage of the font size */ + text-decoration-thickness: 8; +} + +/* = the root */ +html { + font-size: 62.5%; + /* (62.5/100) * 16px = 10px */ + -webkit-text-size-adjust: none; + /* for iOS Safari */ + text-size-adjust: none; + /* for other mobile browsers */ +} + +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + +label, +button, +select, +summary, +[type=radio], +[type=submit], +[type=checkbox] { + cursor: pointer; +} diff --git a/src/functions.tsx b/src/functions.tsx new file mode 100644 index 0000000..4c0c7c0 --- /dev/null +++ b/src/functions.tsx @@ -0,0 +1,19 @@ +/** + * Move array item from provided index to specified index + * @remarks 'to' index refers to position in original array, i.e. if to > from, to = to -1 + * @param array + * @param from - the index of the item we want moved + * @param to - the index we want the item moved to + * @returns The modified array + * + * @beta +*/ +export function relocateArrayItem(array: Array, from: number, to: number) { + const newArray = structuredClone(array) + const element = newArray.splice(from, 1)[0] + newArray.splice(to < from ? to : to - 1, 0, element) + console.log("reordered array: ") + console.log(newArray) + return newArray +} + diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx index 6667161..248da65 100644 --- a/src/objects/movie-wall.tsx +++ b/src/objects/movie-wall.tsx @@ -1,4 +1,5 @@ -import { FC } from "react" +import React, { useState } from "react" +import { relocateArrayItem } from "../functions" type Movie = { id: string @@ -24,17 +25,27 @@ const sampleData = { vote_count: 52 } +interface MovieWallProps extends React.ComponentPropsWithRef<"div"> { + movies: Array; + setMovies: Function; +} -export const MovieWall: FC<{ movies: Array }> = (props) => { - const movies = props.movies +export function MovieWall({ movies, setMovies }: MovieWallProps) { + + function moveMovieToFront(index: number) { + setMovies((prev: Array) => { return relocateArrayItem(prev, index, 0) }) + } + + function listSimilarMovies(movie: Movie) { + } - const posters = [] + const posters: Array = [] for (let i = 0; i < movies.length; i++) { const movie = movies[i] posters.push( - + ) } return <> @@ -42,15 +53,26 @@ export const MovieWall: FC<{ movies: Array }> = (props) => { } -type PosterProps = { +interface PosterProps extends React.ComponentPropsWithRef<"div"> { movie: Movie; + moveMovieToFront: Function; + index: number; } -function Poster({ movie }: PosterProps) { - return -

{movie.title}

-

{movie.overview}

- - + +function Poster({ movie, index, moveMovieToFront: onclick }: PosterProps) { + const [style, setStyle] = useState({ + backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie.poster_path + ")", + backgroundSize: "cover", + alignSelf: "auto", + color: "inherit" + }) + return
+
{ onclick(index) }}> +

{movie.title}

+

{movie.overview}

+ +
+
} diff --git a/src/objects/tmdb.tsx b/src/objects/tmdb.tsx index 8aaa9d6..7e80d61 100644 --- a/src/objects/tmdb.tsx +++ b/src/objects/tmdb.tsx @@ -10,15 +10,48 @@ const tmdb = axios.create({ } }) export default { - getPopular: async function({ language, region }: Config, callback: Function) { - let res = await tmdb.get('/popular?language=en-US&page=1', + /** +* Calls tmdb API/popular and then fires the callback with res.data.results as argument +* @param {Function} callback +* @returns {boolean} +*/ + getPopular: async function({ language, region, page }: Config, callback: Function) { + let res = await tmdb.get('/popular', { params: { language, - region + region, + page } }) - res = res.data.results - callback(res) + console.log(res) + if (res.status === 200) { + res = res.data.results + callback(res) + return true + } else { + throw Error("API call failed! Response: " + JSON.stringify(res)) + } + }, + /** + * Calls TMDB/similar + */ + getSimilar: async function({ language, page }: Config, id: number, callback: Function) { + let res = await tmdb.get(id + '/similar', { + params: { + language, + page + } + }) + console.log(res) + if (res.status === 200) { + res = res.data.results + callback(res) + return true + } else { + throw Error("API call failed! Response: " + JSON.stringify(res)) + } + } + }