added search

bonomite · Aug 8, 2021 · bcd4f0d · bcd4f0d
1 parent 7611097
commit bcd4f0d
Show file tree

Hide file tree

Showing 5 changed files with 1,277 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "babel-eslint": "^10.1.0",
     "color-thief-react": "^2.1.0",
     "gsap": "^3.7.1",
+    "i": "^0.3.6",
+    "npm": "^7.20.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-gsap": "^3.2.1",

diff --git a/src/GlobalStyles.js b/src/GlobalStyles.js
@@ -15,8 +15,8 @@ const styles = theme => ({
       top: 0,
       width: '100%',
       boxShadow: theme.shadows[6],
+      height: headerHeight,
       '& .MuiGrid-root':{
-        height: headerHeight,
       }
     },
 

diff --git a/src/components/shared/TheHeader.js b/src/components/shared/TheHeader.js
@@ -1,17 +1,33 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {
   Grid,
   withStyles,
   withWidth,
-  CircularProgress ,
+  CircularProgress,
+  LinearProgress,
+  TextField,
+  Typography,
 } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+
 import SVG from 'react-inlinesvg';
 import {useHistory} from 'react-router-dom';
+import {useQuery} from 'react-query';
+
+import {getSearch} from '../../helpers/my-api';
 
 const styles = theme => ({
-  wrapper: {
+  searchField: {
+    '& .MuiInputBase-root':{
+      background: theme.palette.common.white,
+    },
   },
+  searchItems:{
+    '& img':{
+      width:70,
+    },
+  }
 });
 
 const TheHeader = ({
@@ -21,31 +37,105 @@ const TheHeader = ({
 
   const history = useHistory();
 
-  const handleClick = (e) => {
+  const goHome = (e) => {
     history.push(`/`);
   };
 
+  const [ searchValue , setSearchValue ] = useState('');
+
+  const {isLoading, error, data} = useQuery( ['movieData', searchValue], () => getSearch(searchValue), {refetchOnWindowFocus: false} );
+
+  console.log('data = ', data);
+  console.log('data results = ', data?.results);
+  console.log('searchValue = ', searchValue);
+
+  //   if (isLoading) return <LinearProgress style={{width: '100%'}} />;
+  //
+  if (error) return `An error has occurred: ${ error.message }`;
+
+  const onSetSearchValue = (e) => {
+    setSearchValue(e.target.value);
+  };
+
+  const selectMovie = (id) => {
+    history.push(`/movie?id=${id}`);
+    if(history.location.pathname === '/movie'){
+      history.go(0);
+    }
+  };
+
   return (
     <>
       <div className={ `the-header ${ classes.wrapper }` }>
-        <div className={ 'container-fluid' }>
+        <div className={ 'container-fluid' } style={{display: 'flex', height: 'inherit'}}>
           <Grid
             container
-            direction="row"
-            justifyContent="flex-start"
+            justifyContent="space-between"
             alignItems="center"
           >
+            <Grid item xs={6}>
+              <SVG
+                description="The TMDB logo"
+                loader={ <CircularProgress /> }
+                src="logo.svg"
+                title="TMDB"
+                width={ 150 }
+                height={ 50 }
+                onClick={ goHome }
+                style={{cursor: 'pointer'}}
+              />
+            </Grid>
+            <Grid item xs={6} sm={4}>
+              <Autocomplete
+                className={classes.searchField}
+                //>value={searchValue}
+                autoHighlight
+                /* options={(data && data?.results?.length) ? data?.results?.map((option) => option.title) : []} */
+                options={(data && data?.results?.length) ? data?.results : []}
+                getOptionLabel={(option) => option.title}
+                renderOption={(option) => {
+                  console.log('option = ', option);
+                  const date = option.release_date;
+                  const year = date ? date.substring(0,4) : '';
+                  return (
+                    <React.Fragment>
+                      <Grid
+                        className={classes.searchItems}
+                        container
+                        direction="row"
+                        justifyContent="flex-start"
+                        alignItems="center"
+                        onClick={ () => selectMovie(option.id) }
+                      >
+                        <Grid item xs={2}>
+                          <img alt="search poster" src={`https://www.themoviedb.org/t/p/w220_and_h330_face${option.poster_path}`}/>
+                        </Grid>
+                        <Grid item xs={10}>
+                          <Typography style={{marginLeft:24}}>{option.title} - {year}</Typography>
+
+                        </Grid>
+                      </Grid>
+                    </React.Fragment>
+                  );
+                }}
+                renderInput={params => (
+                  <TextField
+                    {...params}
+                    onChange={ onSetSearchValue }
+                    label="Search"
+                    margin="none"
+                    variant="filled"
+                    fullWidth
+                    inputProps={{
+                      ...params.inputProps,
+                      autoComplete: 'new-password', // disable autocomplete and autofill
+                    }}
+                  />
+                )}
+              />
+
 
-            <SVG
-              description="The TMDB logo"
-              loader={ <CircularProgress /> }
-              src="logo.svg"
-              title="TMDB"
-              width={ 150 }
-              height={ 50 }
-              onClick={ handleClick }
-              style={{cursor: 'pointer'}}
-            />
+            </Grid>
 
           </Grid>
         </div>

diff --git a/src/helpers/my-api.js b/src/helpers/my-api.js
@@ -36,4 +36,11 @@ const getSimilarMovies = (page,id) => {
 
 };
 
-export {getPopularMovies, getMovie, getVideos, getSimilarMovies};
+const getSearch = (query) => {
+  return fetch(
+    `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&page=1&include_adult=false&query=${query}`,
+  ).then(res => res.json());
+
+};
+
+export {getPopularMovies, getMovie, getVideos, getSimilarMovies, getSearch};