search fixed, add welcome text, route forget password fixed

src/App.js

@@ -7,7 +7,6 @@ import { ThemeProvider } from '@mui/material';
 import { Outlet } from 'react-router-dom';
 
 import Navbar from './components/Navbar';
-import Home from './containers/Home';
 import theme from './themes/theme';
 
 function App() {

src/components/Account.js

@@ -2,12 +2,12 @@ import * as React from 'react';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import { IconButton, Menu, MenuItem } from '@mui/material';
 import { auth } from '../config/firebase';
-import { useAuthState } from 'react-firebase-hooks/auth';
+//import { useAuthState } from 'react-firebase-hooks/auth';
 import { signOut } from 'firebase/auth';
 import { Navigate } from 'react-router-dom';
 
 const Account = () => {
-    const [user] = useAuthState(auth);
+    //const [user] = useAuthState(auth);
     const [anchorEl, setAnchorEl] = React.useState(null);
     const isMenuOpen = Boolean(anchorEl);
     const handleProfileMenuOpen = (event) => {

src/components/FilterMenu.js

@@ -13,7 +13,7 @@ const FilterMenu = (props) => {
 
     const handleMenuClose = (sort) => {
         setAnchorEl(null);
-        console.log(props.path)
+        //console.log(props.path)
         navigate(`${props.path}?sort=${sort}`)
     };
 
@@ -43,7 +43,7 @@ const FilterMenu = (props) => {
                 color="inherit"
                 aria-controls={menuId}
                 onClick={handleProfileMenuOpen}
-                sx={props.menu?{ visibility: 'visible', mr: 2 }:{ visibility: 'hidden', mr: 2 }}
+                sx={props.menu ? { visibility: 'visible', mr: 2 } : { visibility: 'hidden', mr: 2 }}
             >
                 <MenuIcons />
             </IconButton>

src/containers/ListTile.js → src/components/ListTile.js

@@ -1,29 +1,24 @@
-import { ImageList } from '@mui/material';
-import PosterItem from '../components/PosterItem';
-import { ThemeProvider } from '@mui/material';
-import CssBaseline from "@mui/material/CssBaseline";
-
-import theme from '../themes/theme';
-import useMovieStore, { selectMovies } from '../store/movie';
-
-import {Box} from '@mui/material';
-
-const ListTile = () => {
-
-    const movies = useMovieStore(selectMovies);
-
-    return (
-        <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <Box sx={{ mt: 10 }}>            
-                <ImageList cols={5}>
-                    {movies.map((item, index) => (
-                        <PosterItem key={index} item={item} />
-                    ))}
-                </ImageList>
-            </Box>
-        </ThemeProvider>
-    )
-}
-
+import { ImageList } from '@mui/material';
+import PosterItem from './PosterItem';
+import { ThemeProvider } from '@mui/material';
+import CssBaseline from "@mui/material/CssBaseline";
+import theme from '../themes/theme';
+import { Box } from '@mui/material';
+
+const ListTile = (props) => {
+
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Box sx={{ mt: 10 }}>
+                <ImageList cols={5}>
+                    {props.items.map((item, index) => (
+                        <PosterItem key={index} item={item} />
+                    ))}
+                </ImageList>
+            </Box>
+        </ThemeProvider>
+    )
+}
+
 export default ListTile;

src/components/Navbar.js

@@ -1,10 +1,9 @@
-import { Menu } from '@mui/icons-material';
 import {
-    IconButton,
     Toolbar,
     Box,
     AppBar,
-    Button
+    Button,
+    Typography
 } from '@mui/material';
 
 import * as React from 'react';
@@ -13,7 +12,10 @@ import SearchBox from './SearchBox';
 import Account from './Account';
 import FilterManu from './FilterMenu'
 
+import useUserStore, { selectUser } from '../store/user';
+
 const Navbar = () => {
+    const user = useUserStore(selectUser)
     const navigate = useNavigate();
     const [popular, setPopular] = React.useState(false)
     const [trending, setTrending] = React.useState(false)
@@ -24,15 +26,6 @@ const Navbar = () => {
     const [search, setSearch] = React.useState(false)
     const [path, setPath] = React.useState(false)
 
-    /*const onLogout = async () => {
-        try {
-            await signOut(auth);
-            navigate("/login");
-        } catch (err) {
-            console.log(err);
-        }
-    };*/
-
     const buttons = [
         { title: 'Home', path: '/', onState: () => setHome(true), offState: () => setHome(false), getState: home },
         { title: 'Upcoming', path: '/upcoming', onState: () => setUpcoming(true), offState: () => setUpcoming(false), getState: upcoming },
@@ -60,6 +53,8 @@ const Navbar = () => {
         }
     }
 
+    //console.log('user:', user.displayName)
+
     return (
         <Box sx={{ display: 'flex' }}>
             <AppBar>
@@ -78,6 +73,9 @@ const Navbar = () => {
 
                     <SearchBox text={"Search.."} search={search} />
                     <Box sx={{ flexGrow: 1 }} />
+                    <Box>
+                        <Typography variant='body'><b>Welcome</b>, {user.displayName}</Typography>
+                    </Box>
                     <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
                         <Account />
                     </Box>

src/components/SearchBox.js

@@ -1,6 +1,10 @@
 import { styled, alpha } from '@mui/material/styles';
 import SearchIcon from '@mui/icons-material/Search';
 import { InputBase } from '@mui/material';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import useMovieStore, { selectFindMovie } from '../store/movie';
 
 const Search = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -43,7 +47,10 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 const SearchBox = (props) => {
-    //console.log(props.search)
+    const findMovie = useMovieStore(selectFindMovie);
+    const [findText, setFindText] = useState('')
+    const navigate = useNavigate();
+
     return (
         <Search sx={props.search ? { visibility: 'visible' } : { visibility: 'hidden' }}>
             <SearchIconWrapper>
@@ -52,6 +59,15 @@ const SearchBox = (props) => {
             <StyledInputBase
                 placeholder={props.text}
                 inputProps={{ 'aria-label': 'search' }}
+                onChange={(e) => {
+                    setFindText(e.target.value)
+                }}
+                onKeyUp={(e) => {
+                    if (e.key === 'Enter') {
+                        findMovie(findText)
+                        navigate('/find')
+                    }
+                }}
             />
         </Search>
     )

src/containers/FindMovieResults.js

@@ -0,0 +1,20 @@
+import useMovieStore, {
+    selectFindMovieResults
+} from '../store/movie';
+import ListTile from "../components/ListTile";
+import MovieNotFound from './MovieNotFound';
+
+const ListFindMovies = () => {
+
+    const findMovieResults = useMovieStore(selectFindMovieResults);
+
+    //console.log('findMovie: ', findMovieResults)
+
+    return (
+        <>
+            {(findMovieResults.length > 0) ? <ListTile items={findMovieResults} /> : <MovieNotFound />}
+        </>
+    )
+}
+
+export default ListFindMovies;

src/containers/ForgetPass.js

@@ -1,21 +1,20 @@
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { sendPasswordResetEmail, signInWithEmailAndPassword } from 'firebase/auth';
-import { Link, useNavigate } from 'react-router-dom';
+import { sendPasswordResetEmail } from 'firebase/auth';
+import { Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup'
 
 import { auth } from '../config/firebase';
 
 const ForgetPass = () => {
-    const navigate = useNavigate();
+    //const navigate = useNavigate();
     const validationSchema = Yup.object().shape({
         email: Yup.string()
             .required('Email is required')

src/containers/ListNowPlayingMovie.js

@@ -1,13 +1,18 @@
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from 'react';
-import useMovieStore, { selectFetchNowPlayingMovies, selectSortMovies, selectMoviesReady } from '../store/movie';
-import ListTile from "./ListTile";
+import useMovieStore, {
+    selectFetchNowPlayingMovies,
+    selectSortMovies,
+    selectMoviesReady,
+    selectMovies
+} from '../store/movie';
+import ListTile from "../components/ListTile";
 
 const ListNowPlayingMovie = () => {
-    const fetchNowPlayingMovies = useMovieStore(selectFetchNowPlayingMovies)    
+    const fetchNowPlayingMovies = useMovieStore(selectFetchNowPlayingMovies)
     const [queryParams, setQueryParams] = useSearchParams();
     const moviesReady = useMovieStore(selectMoviesReady);
-    
+
     const sortMovies = useMovieStore(selectSortMovies);
 
     useEffect(() => {
@@ -21,10 +26,11 @@ const ListNowPlayingMovie = () => {
         sortMovies(queryParams.get('sort'));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [queryParams, moviesReady]);
-
-
+
+    const movies = useMovieStore(selectMovies);
+
     return (
-        <ListTile/>
+        <ListTile items={movies} />
     )
 }
 

src/containers/ListPopularMovie.js

@@ -1,10 +1,15 @@
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from 'react';
-import useMovieStore, { selectFecthPopularMovies, selectSortMovies, selectMoviesReady } from '../store/movie';
-import ListTile from "./ListTile";
+import useMovieStore, {
+    selectFecthPopularMovies,
+    selectSortMovies,
+    selectMoviesReady,
+    selectMovies
+} from '../store/movie';
+import ListTile from "../components/ListTile";
 
 const ListPopularMovie = () => {
-    const fecthPopularMovies = useMovieStore(selectFecthPopularMovies)    
+    const fecthPopularMovies = useMovieStore(selectFecthPopularMovies)
     const [queryParams, setQueryParams] = useSearchParams();
     const moviesReady = useMovieStore(selectMoviesReady);
     const sortMovies = useMovieStore(selectSortMovies);
@@ -20,9 +25,11 @@ const ListPopularMovie = () => {
         sortMovies(queryParams.get('sort'));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [queryParams, moviesReady]);
-
+
+    const movies = useMovieStore(selectMovies);
+
     return (
-        <ListTile/>
+        <ListTile items={movies} />
     )
 }
 

src/containers/ListRow.js

@@ -1,8 +1,8 @@
-import { Box, ImageList, Typography, Link } from '@mui/material'
+import { Box, ImageList, Typography } from '@mui/material'
 import PosterItem from '../components/PosterItem';
 
 const ListRow = (props) => {
-    console.log(props.items)
+    //console.log(props.items)
     return (
         <Box sx={{ width: '100%', pt: 5 }}>
             <Typography variant='body1' sx={{ textAlign: 'left', mx: 1, fontWeight: 'bold' }}>

src/containers/ListTrendingMovie.js

@@ -1,10 +1,15 @@
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from 'react';
-import useMovieStore, { selectFetchTrendingMovies, selectSortMovies, selectMoviesReady } from '../store/movie';
-import ListTile from "./ListTile";
+import useMovieStore, {
+    selectFetchTrendingMovies,
+    selectSortMovies,
+    selectMoviesReady,
+    selectMovies
+} from '../store/movie';
+import ListTile from "../components/ListTile";
 
 const ListTrendingMovie = () => {
-    const fetchTrendingMovies = useMovieStore(selectFetchTrendingMovies)    
+    const fetchTrendingMovies = useMovieStore(selectFetchTrendingMovies)
     const [queryParams, setQueryParams] = useSearchParams();
     const moviesReady = useMovieStore(selectMoviesReady);
 
@@ -21,9 +26,11 @@ const ListTrendingMovie = () => {
         sortMovies(queryParams.get('sort'));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [queryParams, moviesReady]);
-
+
+    const movies = useMovieStore(selectMovies);
+
     return (
-        <ListTile/>
+        <ListTile items={movies} />
     )
 }
 

src/containers/ListUpComingMovie.js

@@ -1,10 +1,15 @@
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from 'react';
-import useMovieStore, { selectFetchUpComingMovie, selectSortMovies, selectMoviesReady } from '../store/movie';
-import ListTile from "./ListTile";
+import useMovieStore, {
+    selectFetchUpComingMovie,
+    selectSortMovies,
+    selectMoviesReady,
+    selectMovies
+} from '../store/movie';
+import ListTile from "../components/ListTile";
 
 const ListUpComingMovie = () => {
-    const fetchUpComingMovie = useMovieStore(selectFetchUpComingMovie)    
+    const fetchUpComingMovie = useMovieStore(selectFetchUpComingMovie)
     const [queryParams, setQueryParams] = useSearchParams();
     const moviesReady = useMovieStore(selectMoviesReady);
 
@@ -21,9 +26,11 @@ const ListUpComingMovie = () => {
         sortMovies(queryParams.get('sort'));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [queryParams, moviesReady]);
-
+
+    const movies = useMovieStore(selectMovies);
+
     return (
-        <ListTile/>
+        <ListTile items={movies} />
     )
 }