#11 Refactor custom context hook

src/components/NavBar.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import Button from "react-bootstrap/Button";
 import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";
@@ -9,10 +9,11 @@ import logo from "../assets/logo.webp";
 import { NavLink } from "react-router-dom";
 import styles from "../styles/NavBar.module.css";
 import btnStyles from "../styles/Button.module.css";
-import { CurrentUserContext } from "../App";
+import { useCurrentUser } from "../contexts/CurrentUserContext";
 
 const NavBar = () => {
-  const currentUser = useContext(CurrentUserContext);
+  const currentUser = useCurrentUser();
+
   const loggedInIcons = <>{currentUser?.username}</>
   const loggedOutIcons = (
     <>

src/contexts/CurrentUserContext.js

@@ -1,9 +1,12 @@
-import { createContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import axios from "axios";
 
 export const CurrentUserContext = createContext();
 export const SetCurrentUserContext = createContext();
 
+export const useCurrentUser = () => useContext(CurrentUserContext)
+export const useSetCurrentUser = () => useContext(SetCurrentUserContext)
+
 export const CurrentUserProvider = ({ children }) => {
   const [currentUser, setCurrentUser] = useState(null);
 

src/pages/auth/LoginForm.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 
 import Form from "react-bootstrap/Form";
 import Alert from "react-bootstrap/Alert";
@@ -17,10 +17,10 @@ import alertStyles from "../../styles/AlertMessages.module.css";
 
 import axios from "axios";
 import { useHistory } from "react-router-dom/";
-import { SetCurrentUserContext } from "../../App";
+import { useSetCurrentUser } from "../../contexts/CurrentUserContext";
 
 function LogInForm() {
-  const SetCurrentUser = useContext(SetCurrentUserContext);
+  const SetCurrentUser = useSetCurrentUser();
 
   const [logInData, setLogInData] = useState({
     username: "",