From 21547959c9011eeb753983f47d05b7710d9d0da4 Mon Sep 17 00:00:00 2001 From: qpismont Date: Tue, 16 Jul 2024 22:41:10 +0200 Subject: [PATCH] a lot of stuff... --- .vscode/extensions.json | 4 -- .vscode/launch.json | 11 ---- .vscode/settings.json | 13 ++-- bun.lockb | Bin 235816 -> 235313 bytes package.json | 2 +- src/components/DebouceInput.tsx | 6 ++ src/components/MoviesSearchInput.tsx | 37 +++++++++++ src/components/forms/MovieFormData.tsx | 52 +++++++++++++-- .../lists/movies/CardMoviesList.tsx | 18 ++++++ .../lists/movies/CardMoviesListItem.tsx | 50 ++++++++++++++ src/layouts/RootLayout.astro | 3 +- src/pages/home/index.astro | 36 ++++++++++- src/pages/home/movies/[id].astro | 61 ++++++++++++++++++ src/pages/home/settings/movies.astro | 1 - src/pages/index.astro | 2 +- src/styles/index.css | 27 ++++++++ 16 files changed, 291 insertions(+), 32 deletions(-) delete mode 100644 .vscode/extensions.json delete mode 100644 .vscode/launch.json create mode 100644 src/components/MoviesSearchInput.tsx create mode 100644 src/components/lists/movies/CardMoviesList.tsx create mode 100644 src/components/lists/movies/CardMoviesListItem.tsx create mode 100644 src/pages/home/movies/[id].astro create mode 100644 src/styles/index.css diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 22a1505..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "recommendations": ["astro-build.astro-vscode"], - "unwantedRecommendations": [] -} diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index d642209..0000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "version": "0.2.0", - "configurations": [ - { - "command": "./node_modules/.bin/astro dev", - "name": "Development server", - "request": "launch", - "type": "node-terminal" - } - ] -} diff --git a/.vscode/settings.json b/.vscode/settings.json index 0013f78..0c203b4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,7 @@ { - "editor.formatOnSave": true, - "[astro]": { - "editor.defaultFormatter": "astro-build.astro-vscode" - }, - "editor.defaultFormatter": "biomejs.biome", - "typescript.tsdk": "node_modules/typescript/lib" -} \ No newline at end of file + "editor.formatOnSave": true, + "editor.defaultFormatter": "biomejs.biome", + "[astro]": { + "editor.defaultFormatter": "astro-build.astro-vscode" + } +} diff --git a/bun.lockb b/bun.lockb index 56658e6ba814d51325250e0d12ac11bbfbd807f7..aa6a593786a7d8e8d180b2e5e8ddd96733e52990 100755 GIT binary patch delta 4881 zcmc&&dsJ0b8sBH%dy$I@2qKRw$U}Sq7cPVsyvpMyq5%Ps`3e;iA`=B4SX7J& zrU%-gqSCa|5=lb4sp+gJCtIcB3#2A1bIcx=)L2p)d+Va)dZ9{goA6(zrG4R^6-{0xI`J*RVzFV8IE5vVG zedCilMrHD*X~X#L^p=N@dpoN4GUmZpWf{-}ENx~i9GC;7dOC0ba3b1A1NSsB<_~o2 zV=M&7TNv{Mu7o}q_$=y!fYI;|04{%#v7x{cpcn97AdNQ!?L!!IRO&%|AatVxU!d5} zm>=*4&>OfKNF8f|u0PNdP;psV@iI(i)=P{9qJ0vOt}BN>_49zUXW#-L2CDo3{Zn8| zUS=!^coy}6Or7N8ZAZx{H!ycQ_8+n?DtK8MFM62O$)b3In znrsFqShkDlkf|AJVUx|c32ZKWnHo0IYV1aB5^9PX7Hc(HTYF+LxcXU&+Elv6a1JcT z#lnz~TvtC$U{hRIB2uFPiA?S3XPnhI5w*#vaW!m{)$kN*?jxlgJwL+SiXzR1j});U0^Oh z{>{dSB$wv!#EI#5;kc=Sly*NYdT-M>t)!6VhvA zmYyx5r-2nipa4pw10i)-3UmW5k~*O~>JQ2Ke~qo1-YodP&)M<6owHmk#(whpi58i) ze)?|0fwc7TZHGedd9v_K%*eyzj_sW_B7ZS!oHHQ%!y4n_lM&0lZkYG@*TK6UJ9xl0 zt?bjM_FicBEngkC)%z#=<%09;I=(&cEZn42^0XP@iot%QZe*R;s>YNN^WV94y=BFH z*NOs;tUlHHmxU|$*M)w5E^@BN)HdIc$SW0(ES(>+Xkl|w(d~|q7j|5@fBl;xxK=3_ z1Ggwy;zF%5P)w*(vJ{i(s#T^rtLv01y(p%(>08it1Wbt%#;wXU;l33@*;WWK;vfkx zlMuWOLacaT8-&tr5KfR_5rGX50vaGZ)&LJVx~M0x zi*AD3#gsn*CW=Oa3~`fSlE{Askm-Ex8KpBC?`6Hw4etcnT0%wRY2`k{LA(Tv;`CAF ztjIg2=$#*&QEC@^Tu-Nmg|X;N@q(RCaDHs(!HR>+#9u+u>1o4O$=slk?Z0?Ox7^8qiA+BK{;vsseL8={Goj)wZBV0?1AhJsojto_CfX*GlMJ0bnPb!iUQM#@e~@jK}_ z6pnkPc2jEDcv&qpdbNBnwGi+s>Gy-whCzEDoXU?<3k9zs0p*s|!oW9ReEP~^^vvOp zzJS=HFnkTLpQRQ7o~}Kg7>xXe!;H}IRlpRfMS^=sjZ19=wEj}lNo^#wE^tb1h2?hDb3HoR)^7_m|pO@QvUURDjg1;E#e+36xqAco{ea8YH!3@GoFgOi~*M zj_(3j8S0Rt4OM&!xJt0p@TJA{h?=4gk=g|C-+@yA!=#o1z6hKG2$fnY_y$@clrX8K zf!~5rP~lRGPe;WagV10RQnZ7YgHy-Dr8Yei1m*Kw;gQcrh=r4RbTI9-i(%!k3fL0Z zQrI%sa_51`+)JOl0Q^B%EUXYV2R0X01e*uTho!;j4!6TBu-jn6owu@isxpW^8**Xv zxiJYgQRLjoKQ_?UMwUp<Gc+WjXShsPIg8n@AsomKd!`?o8_%%(Y5l30#V&T>By zdW!3nQqkRejhKFl`*4qaBJKnaFjnmAIj1>94Tku&r^3a%B<6^+b3D*jJFceu{_@P_ zmk!*)l?oBo&cjUFIrWt~YsLxh@HGe`(cC9+r9>P?2g-7>sr{ERL|O;;)(uuXL?`-? z^PwsFL>$L?2s_L#=jZ1iSn*)QH?LoWGor;FP}wtk#kEFS(5?>q|BFw#u$;l5t3?)p z5XEPBl!w;Ojs0TF86K~!7bmFIwNCzcwYV0K7TI)`2b#3wGBYiSX`NSviO-HVCz$b) znjqp&+1?d&5e^n)0q^U7-%=nNsBi7)T~+X1hB76^?n)po){?F)5ud?N zCg!*2_#f{AN}YD~&U4)7myFA#$b0JxG$EhLc^)`SyC<}>{qF4i@MlwI+K_O%Tg1u} z-0z>d8LIsr@Iyb}V`=^OySe6JrFnE86zk9P0OhytFq8Jv$aQPLy0E}PJZK4Ki`9%x z?N{zJZy!VN=n-0o+RqKST@7z9MW$ zKcD<+wqCKAlPH}mN(}16a@j=`z@+^~@wb}^4_=PY;X%^;D#RQ(q-Z~C9NJPGkXgIn zwO$A9XOF2H(^fU#aVes=rIbD~P)2n+U+Tp3>M^~uN2q_&*>-^!Jg-=sLssh&Io?&- zRk~Hq&MMvA3cl>4*XTy;A1N)&KCbI0_N~==|nlfeDWLavZsm=TCvv%0?IpEO?`|@UdaOPiz*5|)F?v(%2GGk-#uyb!OwoeVIwUqhXt*Fp3 zx>Cxg4v=3@s4qI=T3o)9F-OKqo&}nKMRhiu0`!4D0oW6mhVlSl?GDEJ0$1&3%p2%b z&zK8vIrQGZUGUw25vcD8T(*a?e!vC5Ucdq%-ERQOA7HGw#2LgLf)>CnbmRg5ZX;uT zfHU_p<_i1u;eoOrvN+m zG3LdTk?vl_*#~S*Qi0AW3I|f`&!H;C+WxLhH{dojR;TwE>kqto(3Y#yK&syaq+8Sg zDU=OB%GDB4K3kMm-b`(BNjdV=Houafz|w+-g@BNTj!=>C2ezN-#Dvm z_nqsIP#qWha(&+528Y3ID-}CGetS6>znv%97+E59Whq_F08)`A!f;S$Xq__oJ4Dk)NSk$}gpNE%4ZS-fs($v<& zFe|qB%I8`1tKg-px(8-6MeQeJexw7OI9sQqEQVTm$?#;wt=yvj4c=%aEi~E?jfsv| z^>#mtv{Y%{9VeYp4E1q_AWSuNh876%8F=I1A>biM5WJ~2uQbvQYamr|j)>N;RT+)% z8rV!!uvaL;^!p`z+|8VOd(Mq>63(iFUrs#6!kL%P6m?xkf?tzl9Y`f!kMBR zSj_0H@-PHEE9@~K1u#!kAfyhT0NMke5;~y+{3XKwUy-o}**f9>Nmy|vdT;#aMT;iw zzkW2_?`+oG*u1Y+%^0}Iapr=+fX$6rH;$z5yC{3Ve{{~rHLi~w-o5|kg8Y}?96E38 zmD`i6c5RDDfBRI`0PCIgQi&YzHFw;3=h~iwo>p#*P-bp;{BZG`Z**1v-59^cy<(~7 zg^EMckhItbVDTU5>G9 zMb4;o*H3=P3pYxh{Om?4RWk9#8>OjM|4mY<9Ul&b|FT(f<~ui|ERf&aEKTKaRYJ(A zgfN`fR6@wEg5X>QA(&6Ag5aEt~`$#C<0wJ95Ct+?ig#OhKBKTv~5Ina+ zXd%JEjawlcA>l7uAw=@)__PFP((l`0nS^LwOF$4d$HBr+D6%=e6uW31Q5$evPx zNj!lU@z~Oni(Q(@Li-v5J>A%VnLRXW{|z)kY@+NE3aR{C(bgS&G6}e@2o0Ms%j63a zWsl;aqUd{3)CWc9&=jb2#43T*&*si=2bXak{r z0Z!K)p$!6GqbiKu6`BwHwJ?0Y6tmxi=nG*93|}B>f+4fPuyJB8B;1TNKbQfUI!{6y z0?koqI-w1P<|H&bq4`7W1gH7bt6H)8S;u~ZLzlg%I1Ky}IL$^6AQcC~z6PP$FbFLO zybGLW!%1kv!B2tHY&Z+e41N-v65k6*0||z;6~pNV;wr=t@U`G{xdDlW!k!SC2apO0(%QB930<2>eWYRBgn(D!?!DYKxh%*Az~>O_Z8wuh?E+N-cx86@O9u6lu>Ar z;7h>i@)BAUcp*3iY7*Kg@b6%B^%Gh&xK&l~0cq3tw(+vQ7~dS~^t<-=yf z3Se_!S+KD%TH)hip|BA!U+a}rIZkq;kC99meauXNCG(gx`D;CW!=&?oN%CQNv>pF$ zk~~jJe z>7!}&$4Tu3B}=&x<}fp!knzV!TnMBham)PLtvJ`2H zmlg3A+|@%nS;sE>a{4n}dncejezR2`Bo%PeadcBSG?Y4aPXR@oVx8%Wh9Y-H(<3OpM-$7%8HUtscpXM^0a(Pc*PUuUFTr|6X9`8xu zACe$-@K@R}lyCUE1b6w#HaXBy>vrZ|?$|DeN!NHxyOzGbc!8II`Afb2o)lCxTGtqD&hKGsSO^;-1E$Cs^_yGv}n_S63N__c?}KjNJl?bTsfXjs_?`0W$; zNc__ktNjIZ)#CZ$AY)FZEQOmx>7ihMs7`5c|2@q62c!MVlHOT;Y+c>HOKKEhW^D9- zSR*{_r0gZnKFBAXls!$_Un}h+8xjt+{+Megg_n##3p|rH&ikmlg7$Au*1Gr=brZULyGwrQu)QJoowg1+h1Z1R zrPDTHeT6lwL(Y5~ugbFJx(Hbc;RpY!TcHaxkFZ9r)J?~`lq;pW03KDQbK;?^bPw>7 zGM%2!IxU;Ht8i0nEV4}3lMg7 props.onDebounce(e.target.value), props.debouceDelay, ); + + if (props.onChange) { + props.onChange(e); + } } const inputAttr = { @@ -45,9 +49,11 @@ export default function DebounceInput(props: DebouceInputProps) { ); } diff --git a/src/components/MoviesSearchInput.tsx b/src/components/MoviesSearchInput.tsx new file mode 100644 index 0000000..eda929c --- /dev/null +++ b/src/components/MoviesSearchInput.tsx @@ -0,0 +1,37 @@ +import { useState } from "react"; +import DebounceInput from "./DebouceInput"; + +interface MoviesSearchInput { + searchUrl: string; +} + +export default function MoviesSearchInput({ searchUrl }: MoviesSearchInput) { + const [value, setValue] = useState(""); + + function handleOnDebounce(value: string) {} + + function handleOnChange(event: React.ChangeEvent) { + setValue(event.target.value); + } + + function handleOnKeyDown(e: React.KeyboardEvent) { + if (e.key === "Enter") { + window.location.href = `${searchUrl}?q=${value}`; + } + } + + return ( +
+ + +
+ ); +} diff --git a/src/components/forms/MovieFormData.tsx b/src/components/forms/MovieFormData.tsx index 30306f7..fff30d5 100644 --- a/src/components/forms/MovieFormData.tsx +++ b/src/components/forms/MovieFormData.tsx @@ -2,12 +2,15 @@ import { useState } from "react"; import type { CreateMovie } from "../../types"; import MovieForm from "./MovieForm"; +declare let bootstrap: any; + interface MovieFormDataProps { defaultValue?: CreateMovie; } export default function MovieFormData({ defaultValue }: MovieFormDataProps) { const [loading, setLoading] = useState(false); + const [showModal, setShowModal] = useState(false); function handleOnSubmit(createMovie: CreateMovie) { const searchParams = new URLSearchParams(window.location.search); @@ -24,6 +27,11 @@ export default function MovieFormData({ defaultValue }: MovieFormDataProps) { }) .then((res) => res.json()) .then((movie) => { + const myModal = new bootstrap.Modal( + document.getElementById("exampleModal"), + ); + + myModal?.show(); console.log(movie); }) .catch((err) => console.log(err)) @@ -31,10 +39,44 @@ export default function MovieFormData({ defaultValue }: MovieFormDataProps) { } return ( - + <> + + + ); } diff --git a/src/components/lists/movies/CardMoviesList.tsx b/src/components/lists/movies/CardMoviesList.tsx new file mode 100644 index 0000000..d9380ad --- /dev/null +++ b/src/components/lists/movies/CardMoviesList.tsx @@ -0,0 +1,18 @@ +import type { Movie } from "../../../types"; +import CardMoviesListItem from "./CardMoviesListItem"; + +interface CardMoviesListProps { + movies: Movie[]; +} + +export default function CardMoviesList({ movies }: CardMoviesListProps) { + const items = movies.map((elt) => { + return ( +
+ +
+ ); + }); + + return
{items}
; +} diff --git a/src/components/lists/movies/CardMoviesListItem.tsx b/src/components/lists/movies/CardMoviesListItem.tsx new file mode 100644 index 0000000..a7c2ce8 --- /dev/null +++ b/src/components/lists/movies/CardMoviesListItem.tsx @@ -0,0 +1,50 @@ +import { FaEye } from "react-icons/fa"; +import type { Movie } from "../../../types"; + +interface CardMoviesListItemProps { + movie: Movie; +} + +export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) { + return ( +
+
+
+
+
+
+
+ {movie.title} +
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+ ); +} diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro index b1fcb9e..3229bd9 100644 --- a/src/layouts/RootLayout.astro +++ b/src/layouts/RootLayout.astro @@ -6,6 +6,7 @@ interface Props { const { title } = Astro.props; import "bootstrap/dist/css/bootstrap.min.css"; +import "../styles/index.css"; --- @@ -19,7 +20,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; {title} -
+
diff --git a/src/pages/home/index.astro b/src/pages/home/index.astro index 3163211..719ce9d 100644 --- a/src/pages/home/index.astro +++ b/src/pages/home/index.astro @@ -1,9 +1,43 @@ --- +import MoviesSearchInput from "../../components/MoviesSearchInput"; +import CardMoviesList from "../../components/lists/movies/CardMoviesList"; import HomeLayout from "../../layouts/HomeLayout.astro"; +import type { Movie } from "../../types"; +const jwt = Astro.cookies.get("jwt")?.value as string; +const url = new URL(Astro.request.url); + +const queryParams = new URLSearchParams(); +const query = url.searchParams.get("q"); + +if (query) { + queryParams.append("q", query); +} + +const res = await fetch( + `${import.meta.env.API_URL}/movies?${queryParams.toString()}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${jwt}`, + }, + }, +); + +const resBody = (await res.json()) as { movies: Movie[] }; const account = Astro.locals.account; --- - Hello {account?.username} +
+
+ +
+
+
+
+ +
+
diff --git a/src/pages/home/movies/[id].astro b/src/pages/home/movies/[id].astro new file mode 100644 index 0000000..5a54344 --- /dev/null +++ b/src/pages/home/movies/[id].astro @@ -0,0 +1,61 @@ +--- +import { FaEye } from "react-icons/fa"; +import HomeLayout from "../../../layouts/HomeLayout.astro"; +import type { Movie } from "../../../types"; + +const jwt = Astro.cookies.get("jwt")?.value as string; +const { id } = Astro.params; + +const res = await fetch(`${import.meta.env.API_URL}/movies/${id}`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${jwt}`, + }, +}); + +const movie = (await res.json()).movie as Movie; +--- + + + <> +

{movie.title}

+
+
+
+
+

{movie.overview}

+
+
+
+ + Watch + +
+
+ +
+ + Share + +
+
+
+
+
+ + diff --git a/src/pages/home/settings/movies.astro b/src/pages/home/settings/movies.astro index 52a09de..e1fc2e0 100644 --- a/src/pages/home/settings/movies.astro +++ b/src/pages/home/settings/movies.astro @@ -1,6 +1,5 @@ --- import AddMovieForm from "../../../components/forms/AddMovieForm"; -import TmdbSearch from "../../../components/TmdbSearch"; import HomeLayout from "../../../layouts/HomeLayout.astro"; --- diff --git a/src/pages/index.astro b/src/pages/index.astro index e80e5d5..446aa3c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,5 +4,5 @@ import EmptyLayout from "../layouts/EmptyLayout.astro"; --- - + diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..217912a --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,27 @@ +.cardshadow { + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); + transition: box-shadow 0.2s ease-in-out; +} + +.cardshadow:hover { + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); +} + +.movieitem { + opacity: 0; + background-color: rgba(0, 0, 0, 0.75); + color: rgba(255, 255, 255, 1); +} + +.movieitem:hover { + animation: 0.2s ease-in-out forwards moviehover; +} + +@keyframes moviehover { + from { + opacity: 0; + } + to { + opacity: 1; + } +}