From 26be736beff8e20dfc3903ae72b6d2a2acb99706 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Wed, 28 Jun 2023 12:42:07 +0000
Subject: [PATCH] #50 Add popularTravelers.js with function to get from api

---
 src/pages/travelers/PopularTravelers.js | 40 +++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/pages/travelers/PopularTravelers.js

diff --git a/src/pages/travelers/PopularTravelers.js b/src/pages/travelers/PopularTravelers.js
new file mode 100644
index 0000000..46db373
--- /dev/null
+++ b/src/pages/travelers/PopularTravelers.js
@@ -0,0 +1,40 @@
+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";
+
+const PopularTravelers = () => {
+  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]);
+
+  return (
+    <Container className={appStyles.Container}>
+      <p>Most followed travelers</p>
+    </Container>
+  );
+};
+
+export default PopularTravelers;