The Movie Review website

Components : The Components folder contains all the small individual Components which come together to form the website. Common : The Common folder contains all the components which were used more than once on several pages. Hooks : The Hooks folder contains function which perform certains task and then cause a re render of the website to occur.

The main point of react comes down to two point

The example below is a small footer containing two link

const Footer = () => (
  <Wrapper>
    <Content>
      <Link to='/AboutUs' style={{ textDecoration: 'none' }}>
        <p>About Us</p>
      </Link>
      <Link to='/ContactUs' style={{ textDecoration: 'none' }}>
        <p>Contact Us</p>
      </Link>
    </Content>
  </Wrapper>
);
export default Footer;

The below hook is used to fetch the next page of movies from the API and then it appends it to the end of existing movies in the array. After it has fetched the movies it uses the useEffect to trigger a re render of the page.

export const useHomeFetch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [state, setState] = useState(initialState);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);

  const fetchMovies = async (page, searchTerm = "") => {
    try {
      setError(false);
      setLoading(true);
      const movies = await API.fetchMovies(searchTerm, page);

      setState(prev => ({
        ...movies,
        results:
          // Appending the new moveis from page after 1 to the end of the array
          page > 1 ? [...prev.results, ...movies.results] : [...movies.results]
      }))
    } catch (error) {
      setError(true);
    }
    setLoading(false);
  };

  // Fetching the movies from the datbase
  useEffect(() => {
    if(!searchTerm){
      const sessionState = isPersistedState('homeState');
      if(sessionState){
        setState(sessionState);
        return;
      }
    }

    setState(initialState);
    fetchMovies(1, searchTerm);
  }, [searchTerm]);

• GET

  :3001/register?username=${username}&email=${email}&password=${password}
      

  register a new user

• GET

  :3001/login?email=${email}&password=${password}
      

  verifies login details

• GET

  :3001/view_count?email=${email}
      

  pulls total movies page visit count of user with given email id

• POST

  :3001/view_count?email=${email}
      

  increments view count of a user with given email by 1