React Instagram Clone

Introduction

This page is about the things I found on the instagram clone created by Karl Hadwin. This was a twelve hour course which aimed to reproduce the social media app Instagram. The repo can be found here

Making the enter key Work for button Click

<button
   type="button"
   title="Sign Out"
   onClick={() => {
     firebase.auth().signOut();
   }}
   onKeyDown={(event) => {
     if (event.key === 'Enter') {
       firebase.auth().signOut();
     }
   }}
>

Example of a listener

This listens for a change in firebase and returns the user logging on.

export default function useAuthListener() {
  const [user, setUser] = useState(JSON.parse(localStorage.getItem('authUser')));
  const { firebase } = useContext(FirebaseContext);

  useEffect(() => {
    const listener = firebase.auth().onAuthStateChanged((authUser) => {
      if (authUser) {
        localStorage.setItem('authUser', JSON.stringify(authUser));
        setUser(authUser);
      } else {
        localStorage.removeItem('authUser');
        setUser(null);
      }
    });

    return () => listener();
  }, [firebase]);

  console.log(`Returning user:`, user);
  return { user };
}

This listener is kicked off with the App and the result is passed down via the Context Provider Pattern

export default function App() {
  const { user } = useAuthListener();

  return (
    <UserContext.Provider value={{ user }}>
      <Router>
        <Suspense fallback={<p>Loading ...</p>}>
          <Routes>
            <Route path={ROUTES.LOGIN} element={<Login />} />
            <Route path={ROUTES.SIGN_UP} element={<SignUp />} />
            <Route path={ROUTES.DASHBOARD} element={<Dashboard />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Suspense>
      </Router>
    </UserContext.Provider>
  );
}

This can now be accessed in components by using the useContext hook in any component being rendered in the app. In this case a component called header

import { useContext } from 'react';

export default function Header() {
  const { user } = useContext(UserContext);
  console.log(user)
  return (
    <header>
    </header>
  );
}