#13 Add useTravelerdata to populartravelers.js

src/pages/travelers/PopularTravelers.js

@@ -1,36 +1,12 @@
 import React, { useEffect, useState } from "react";
 import appStyles from "../../App.module.css";
 import Container from "react-bootstrap/Container";
-import { axiosReq } from "../../api/axiosDefaults";
-import { useCurrentUser } from "../../contexts/CurrentUserContext";
 import Asset from "../../components/Asset";
 import Traveler from "./Traveler";
+import { useTravelerData } from "../../contexts/TravelerDataContext";
 
 const PopularTravelers = ({ mobile }) => {
-  const [travelerData, setTravelerData] = useState({
-    pageTraveler: { results: [] },
-    popularTravelers: { results: [] },
-  });
-  const { popularTravelers } = travelerData;
-  const currentUser = useCurrentUser();
-
-  useEffect(() => {
-    const handleMount = async () => {
-      try {
-        const { data } = await axiosReq.get(
-          "/travelers/?ordering=-followers_count"
-        );
-        setTravelerData((prevState) => ({
-          ...prevState,
-          popularTravelers: data,
-        }));
-      } catch (err) {
-        console.log(err);
-      }
-    };
-
-    handleMount();
-  }, [currentUser]);
+  const { popularTravelers }  = useTravelerData();
 
   return (
     <Container