From 5cad47817d589436cbe2f0ddac7c366908c62b24 Mon Sep 17 00:00:00 2001 From: Gil Teitelbaum <gil@nationalparalegal.edu> Date: Wed, 16 Sep 2020 22:09:52 +0300 Subject: [PATCH] fix broken images --- public/noimage.png | Bin 0 -> 4076 bytes src/components/movieDetails.jsx | 60 +++++++++++------------------ src/components/movies.jsx | 2 +- src/components/moviesTable.jsx | 6 ++- src/components/titleAndContent.jsx | 18 +++++++++ src/index.css | 10 ++++- 6 files changed, 55 insertions(+), 41 deletions(-) create mode 100644 public/noimage.png create mode 100644 src/components/titleAndContent.jsx diff --git a/public/noimage.png b/public/noimage.png new file mode 100644 index 0000000000000000000000000000000000000000..630701e2ef40bbfa361f800488e7abc5cd292896 GIT binary patch literal 4076 zcmV<I4-@c-P)<h;3K|Lk000e1NJLTq00C$K008<30{{R3yW%Yy0001EP)t-s=H}+G zu&}JGthBVW;o;%x>gw|H^6u{L+uPgS-QB0Br@Fej_V)I{!NGohespwnqobqA$;s2x z)7RJ6hK7dw`}@t!&3bxz#l^*ff`W^Si=CaFnVFfDm6iYh|B#T7ZEbBRNOmIt01re- zL_t(|+U&uB00000fS~=U7pVdO0000000000000000GJ)SOKltof&g68zZ%U5Yy}%V z`Tob;Nb6;Z*9o@R7y|XRPS6xZYlw)5h=_=Yh=_=Yh=_=YzG9#|xaXhAK`&s8^w(G( zKMafGMGVF`zkmT|$OL^e2Qo4p4|7)f&OP_KEEx&-$E3r#=l?0JjdF|&-aIO<{IhF> zmA+SCl2YW1eB>ZWUMl+-avl$=GEQ+p1#Fv@J3iqokEbPaO|<G*<_y@)52FMAcNpdU z+|ak~&>~Bm@Il5M>Fkaj42G~tM0J!iI<CwU-hF<%G0y{nSN9IxYn-f!tUZ0)c6g0! zgdL0A7)v{%XJx9NWR8m7O}FyUCBtC=azIBLrQDD*9wu~{!}ucgoNCCxbdaW^OI$Ey z)Y@ZiTK*yLpESDwbpR{m2?n4dPPG-)B63DJfZ9z(%biuLZkY}YSUC^t#~2*;JJX_C zbi1bqB&LHlSr@y_A1XyvM3ISi&hGfdzPau=3d2zN#3nX4K_Z}3NGtXIA9HcS-Y>J; z{>@RFa+~?_&6$H^(*H0tqI+8Aba71Po(2TTLDMgO4vqAd4#_f2BRu}AzS9UmTa`yl zc1n#ZJ3Hl{9qpv)8n$&3!Q#JQ82VpH_W;o66RQz31+S-74>scPTQM82hlph9(n0$} z#rTbR34u5TI#nTZFnLn=>x-x*hYw`w03!5yi7MjA>JR(T(-cLPlZlvp2*yPK(K&66 zDPQVF<{uJ-i2Z6mK1Uh1#gFfXqGw`q^Y*I3!Wk=&7iyrx&9?#Xo;Lp^Y6F=u7YK&_ z%6Wq7?7RXyx1J5Qi$;kvQ)g|xtg|*=Z@b>Nu{klNjc37_!F<ra6RaIDH^{_3uBZwr zi5gg<Zs@k%ujxNP6xu(76-)#4UlcJx=Fk(N!E~k}*;Znfn2$u;g)xxJH@cOtcjLVg z8M&*sv>@t&p}%Cb%+9S-cHB3`6@rS#n$F#IJXWUW<<LT#(}n#y<)%-b9izzmh_uXK z?{+uHR!z`}45&hLu9pP+WA&Ks7kZ8qxioqCZ5Qal`2)%Pec9HDn_XK48YN2vdOsxR z`EkdzXSy+>Lh|fRchF->{t@W#vzR!MaZ>GtiHKgp-4dZ*oe)1KU6zdGxie=B{Z;XI zphL@RD^f8-bU$YIbd@E>l@hmyEwom}fjV&mJqqcU9DRvX>rX4<bK5rJ^@yU9m$m&7 z+|x@INPZ9x(62h$%tt0$^@*vL>wuTcOI2hfhwLwgN<7#)=<x*L1xH&rS2ALvq8Y%W zPiEFdA^D&-Sx;nZ*^7I7IQm6L6P=h&CQ7sw$*3s7T32HdWa$-kVn0U2Bcoq-wDIw* z%NZ!~Mg<juvoHQwAsWHN!IPP+gC5cGqNBqKsj?CWhj~gA!6T6Gomu9mpJ`?e?3WBj zznsyf<{`SI4J9FVbwD(^Foa2Qj&&Z;gz88T6i^2jBf^qJ*bHcO&NQks;vbW(v1P zbbO%cPoN=)Z4THMKyD8ajnf`1*eO6|B0oJG{jQ@`qqYt1ooZT<Bcza5*1$7)bw@lv zzX>{JK)yEguKm6|DaMjM1(gQc(_=)(ziaxfqickGc|dr{u8$QN8T&>ms3|z;aWi~7 zqpM8H6z&IGY|PaA)3VPQ(*=5D^xM(l$`0E48V*<Mj24yFRsw2bVrCoB@h)gY<g{@k z-IpOa)*{kb=GH0Y;plf~hK@~22kEr$dO8&3I3WVe6fBI4e!IL|MdQ3~-O$W*7kRWI z3n0tw=Mf!mIohQX@n|T?u8%vc1D#qi#pyblcuc|Hb~MoxMVFNVCng7ddz+|06uGbm z_?WP~?Pw}<mN*BqUf$6csAea!R2<<tFeWVTIof4sRgoiY<~WI{dHNdL9T8Fsk16>3 zpuLt`v}#^fN6e{rojGty%mq;ebF#qH4i3;SXEd|%k|kz6Rt{#{W_<2T>g&Z;5fxdI zvF|$W5go7fIy^5Z&3Te4nD=s)eTL+ULgqoT#tO*Mt}|ky;pl&IH2-!1jip@_h`CnD zIs5kWx-_LgTY-oGWW;X&0s0>le+#<Z{AgdIh$xyg=j9{{E?V&v)T6hXctppm8SStW z)5hgkppt9No+0;_0up<FT5yq0PTq#2KhpI3j1GL)6J(UiG0*d{pNTf=MsGeoAyU;n zokm7~X76lvTnAw&e84}1kVtK#R9WTyAM*}YQr%884INE){t&G|S)E$00h_eduyo-k z$hs8-?d!ujwhvmcLUppNb<ZX}R~l&wwC~dG*pO(~HpaNGT5Osu_!uE+7&_{yX54sk z^a-L<Fcrhk#Et*P)vMSUu6A@OJ!StVZ1B-lL30T0nEP0uNIC_&5PJ>F3mC|-lzlQ+ z+-lKe_DmK}4+@07<m8pJCzrr#y2Xb%M{8&7KTIDM%n9@Ddh;OqHG-TJW4P2<xIBdX z){Z`!%9gBDFe?;DzFs-6=uEg3iv5?^jfB{L5krkPMp03(xPOf>q<$$F+)Z8H=$<*u z=Un?@XNpv&RX778uJtJ*b>C<nTCs<5CkyjNtjq~;q2Gp|+hHEola7{ILn8)dchSFr zpZjs1xe6_dMR~F4%<MwH|2`J^);12~8A}ZY`%tj@JyxyG;w`0XXHEmI(T-V4TG6>p zpTcN2$frlODouf6fp6b6EB(H=$rxk_mM%tE-E}m>XhinMlgd5XPU_-!{ro))$m2q9 zTzf0BEi;_Yz#`1sUP&l7_tKw&ft;Z#V;>8<L4OQ}k%n|1dG_Pkf9#!E&Z968ge#^O zjPU|-aM&if|0xFu^GkDpj7CvP5e~R$iO-E?c%a`W0`D8T!QR^M*Vx`D!YTePIo>Kd zNDG1OcXjthF+gCD!hT=<|AWf2mO)?8-{Q0XnZ616Z$!Yi%G*B>;S2h!4-%c*@9N>b zqH{@1csFPHs5c^H!J<$wffcGk#31m&6GX2o7FfcMR0+%{YTC^f1by}WIQfhZAz@{? zwG7@nE%?>_<6}AxDCmf!grP~FcFWi<HNC<DRpn21f8pBtafpti^(&w451<{qwFg1_ zig*BqDwvokr6n!%ye^LL(qSVI?f>XJjfil>)P2{7_(`C72Umq+AT=<>1_B~x;qxk4 zK`zAJg6Kd*%r8oIHz-(Nu)qw0oO!*sKU8xp&u83zhCubpL-y5f4ZsI;!a0CUs&Jv; zqr|`la`Y{LM=?i62~<UXs`L6>t}H-%(;Hb<s4$cOMhhqis70Wy0)m62ZUPb0?#iL@ zzU#d2&!NK&ASh7_Fk2`IxD^#SCuaukIpEV&#aO0Vh}LXsfNP(Y#!)L!28i4kdyu<$ zmy+qFzN9qNEr5F1jQ1K0g`bnV-{%2P+|!br6+i$GVswIY)D&H_Hg^J}PfZP2mpss! z>R!!F1!hL?jBzH151Ki45nPz&XaHKmg_N&pj2rrfl<3Upa7Dj_X)4dST;>qtS_#lM z)ARYv=E|hic1{^{G!RtN<_L}b11gLiK!4`@-59H0)tAsg>oppnDPhUa7+ehu^Jd9Y z{IHBBiz-ZAo(4uLjn(>+AI6&;98S4VYOR;@FqbCBoZMxJD_~uYelt!U@MCFQHIKO> zxM?!?OU@pra;R_?wUDOdrgNLmN>@T{g_a$36-HB;d3+2EH$BqjGMDj_GMX5KDo)hI zhOmSL?bgyTkm7u0fL@?`v2&TPEjCd8rY=rbke`kG!VZc}cnoqI#^SY3CE+F}Gz8)U zbX?~&ugP1fr%=@`QcMGe5-h2mgTXP@ZQF%7h@E4CSQEoXJ>fHes!Y_c!DB87;z}3< z@FfrD+O`@)uSmf_$b`uX?s@D<uimUF<^48TcUo$5anes=eava2+n=QJbDxWzB@J7s zX;56dFm}9WG`K!8`m%*prW_piTM$-Tg<?OcUdwOx&1mOM7>2@UVB@4|90*xLD2%@U zQ?6Ot?P{C;X}jrqlv<^#jQBu@#29Lz>j5~uOk+KP+x5+isAVGDK{t=K&BoD)05pX% zv$*|+F9hugtA2t7RqZ8fNbTpaWflSmNk{J&?<0m=a(f1#CCU=i5aU!jz}1!(dP|dQ z^#D257sA~1I7&0tZPOFb>tUEUs%A7XTq?8BrF;U0zWo<jHNqUaJMXsISse8fh;6NI zm{S=2a^srq(>jtD83ZlWHCb3#O&OC`V?n2KBDj(WK+qmJ)#VI$)d4T{xSXih6&R+q zuFY3{)oB2hQlkJMpid<;M!m75uC4@3s*$4Bi9feHD25wtk-?_Yi&;be`5V?2nu2-| znrtjJGsA~9n<=Gumicl6O|GmUVlBPIRUHrTN$qQK23$G-wtdpn5yvB(4CgWI<^kHT zjrmya){($iYK<^jTmuq%m@cFYOhKK{B^=X$d5RDsf<V;+O#*X-jz7oCbp&!P{b2om zw~n0wQFTK+!kC9RYQjss8^D0mL?GDhS~>%`n)Y$k)k6rvjJ^ijZdxNmK9!2IEJY*e z2*<V^p*WGehIPM;A$gX(m3r*Q(UTCf0IEF*z+>^VjceJxh~0u-wylPdxGQU;+Hz4> z({|a?^~L7Vu%_2$oWsy3?F<I=dkJB6k4hZPorc-Qi*}aGje-T1pb_GBy{_Y~TLink z&9F5%3*@%;NS6fzZi*(Q?pfU%;MQ<0N1mHmjT&^{>&c)?>kP6fbofkN4cGNj>nm9_ z0~oA};2C0PKMiC6>-=PffdC6Y%#<x8dNUBr<ZsbtCx)3^&ekj$Xjb9PT*Cw-5|=zp zGX_}8uxGyj1b&o^?6Sle013$ZiR=;ucJjh>cG(aZF}sMVKik)ucL+m%v>^guZXd=& z{ERH$xA{@PX55F&QND=NH470l?qu(hHl8BLkJNnMJNUT+x_@H^%WFCGU+dfG_kBDx zoMr*t;WCIm-n8(f{$KVr5a_q(z^x&Kb<B{*%D%<lfcl?F6aGwM^1a^tGy?ncO#cJN zkMkzb2Og%%lOn&H$NrIsTCk4|@SF3;yplj4Y|RCp5%g}C{Dm0&$2Q7s&~FIRoAJBJ z^sTqvdh4yX-ulWO90&ja0002_zczxZs;a80sw(ZlfdBvi0DvHW>p`vn0000000000 e00000fRg~F5VaZ89>BB!0000<MNUMnLSTY1Hqjjb literal 0 HcmV?d00001 diff --git a/src/components/movieDetails.jsx b/src/components/movieDetails.jsx index 4988d76..10348b6 100644 --- a/src/components/movieDetails.jsx +++ b/src/components/movieDetails.jsx @@ -3,6 +3,7 @@ import restService from '../services/restService'; import config from "../config.json"; import { Row, Col } from "react-bootstrap"; import { Link } from "react-router-dom"; +import TitleAndContent from "./titleAndContent"; class MovieDetails extends Component { @@ -32,39 +33,15 @@ class MovieDetails extends Component { this.performSearch(); } - displayColumn(content) { - return ( - <Col className="description"> - {content} - </Col> - ); - } - - displayTitledData(title, content) { - return ( - <> - <Row> - <Col lg={3} md={4} xs={6} className="title"> - {title} - </Col> - <Col lg={9} md={8} xs={6} className="content"> - {content} - </Col> - </Row> - </> - ) - } - displayTitledDataWithLine(title, content) { return ( <> <hr></hr> - {this.displayTitledData(title, content)} + <TitleAndContent title={title} content={content}></TitleAndContent> </> ) } - render() { const { movie, isLoading } = this.state; @@ -73,39 +50,46 @@ class MovieDetails extends Component { if (isLoading) return (<h3>Loading Movie Details...</h3>); return ( <> + {isLoading && <h3>Loading Movie Details...</h3>} <h2>{movie.Title} {"(" + movie.Year + ")"}</h2> <hr></hr> <Row> <Col className="margin-bottom-40" md={6} sm={12}> - <img className="movieListImage" src={movie.Poster}></img> + <img className="largeMovieListImage" src={movie.Poster}></img> </Col> <Col md={6} sm={12} > <Row> - {this.displayColumn(movie.Rated)} - {this.displayColumn(movie.Runtime)} - {this.displayColumn(movie.Genre)} + <Col className="description"> + {movie.Rated} + </Col> + <Col className="description"> + {movie.Runtime} + </Col> + <Col className="description"> + {movie.Genre} + </Col> </Row> <hr></hr> <Row> <Col className="description"> - {movie.Plot}} + {movie.Plot} </Col> </Row> {this.displayTitledDataWithLine("Writer:", movie.Writer)} - {this.displayTitledData("Actors:", movie.Actors)} - {this.displayTitledData("Director:", movie.Director)} - {this.displayTitledData("Country:", movie.Country)} + <TitleAndContent title="Actors:" content={movie.Actors}></TitleAndContent> + <TitleAndContent title="Director:" content={movie.Director}></TitleAndContent> + <TitleAndContent title="Country:" content={movie.Country}></TitleAndContent> {this.displayTitledDataWithLine("Awards:", movie.Awards)} - {this.displayTitledData("Metascore:", movie.Metascore)} - {this.displayTitledData("Imdb Rating:", movie.imdbRating)} - {this.displayTitledData("Imdb Votes:", movie.imdbVotes)} + <TitleAndContent title="Metascore:" content={movie.Metascore}></TitleAndContent> + <TitleAndContent title="Imdb Rating:" content={movie.imdbRating}></TitleAndContent> + <TitleAndContent title="Imdb Votes:" content={movie.imdbVotes}></TitleAndContent> {this.displayTitledDataWithLine("Box Office:", movie.BoxOffice)} - {this.displayTitledData("Production:", movie.Production)} + <TitleAndContent title="Production:" content={movie.Production}></TitleAndContent> </Col> </Row> <hr></hr> <Row> - <Link className="btn-custom wideButton" to="/movies">Back to Movies Search</Link> + <Link className="btn-custom wideButton" to="/movies">Back to Movies Search</Link> </Row> </> ); diff --git a/src/components/movies.jsx b/src/components/movies.jsx index 35775b4..782ed44 100644 --- a/src/components/movies.jsx +++ b/src/components/movies.jsx @@ -101,10 +101,10 @@ class Movies extends Component { render() { const { isLoading, movies, totalMovies, movieSearchName, movieYear } = this.state; - if (isLoading) return <p>Loading...</p> return ( <> + {isLoading && <p>Loading...</p>} <Form onSubmit={this.handleSubmit}> <Row> <Col className="searchControl" md={8} sm={6} xs={8}><Form.Control id="movieSearchName" onChange={this.handleChange} value={movieSearchName || ""} placeholder="Search for any movie" /></Col> diff --git a/src/components/moviesTable.jsx b/src/components/moviesTable.jsx index a2ac92e..36401c4 100644 --- a/src/components/moviesTable.jsx +++ b/src/components/moviesTable.jsx @@ -10,7 +10,7 @@ class MoviesTable extends Component { {movies.map(movie => ( <div key={movie.imdbID} className="col-xs-12 col-sm-6 col-md-4 col-lg-3 movieListEntry"> <Link to={'/movies/' + movie.imdbID}> - <img loading="lazy" className="movieListImage" src={movie.Poster} alt={"Movie poster for " + movie.Title}></img> + <img loading="lazy" onError={this.setDefaultSource} className="movieListImage" src={movie.Poster} alt={"Movie poster for " + movie.Title}></img> <h4 className="movieListTitle">{movie.Title} {"(" + movie.Year + ")"}</h4> </Link> </div> @@ -18,6 +18,10 @@ class MoviesTable extends Component { </div> ); } + + setDefaultSource(event) { + event.target.src = "../../noimage.png"; + } } export default MoviesTable; diff --git a/src/components/titleAndContent.jsx b/src/components/titleAndContent.jsx new file mode 100644 index 0000000..ebb91ab --- /dev/null +++ b/src/components/titleAndContent.jsx @@ -0,0 +1,18 @@ +import React, { useState } from "react"; +import { Row, Col } from "react-bootstrap"; + + +export default function TitleAndContent(props) { + return ( + <> + <Row> + <Col lg={3} md={4} xs={6} className="title"> + {props.title} + </Col> + <Col lg={9} md={8} xs={6} className="content"> + {props.content} + </Col> + </Row> + </> + ); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 55eab58..ebcd1e3 100644 --- a/src/index.css +++ b/src/index.css @@ -34,9 +34,17 @@ body { .movieListImage{ width: 100%; - border-radius: 10px + border-radius: 10px; + width: 200px; + height: 250px; } +.largeMovieListImage{ + width: 100%; + border-radius: 10px; +} + + .movieListTitle { font-size: 18px; font-weight: bold;