fetch instagram media

Had to move gallery.js to direct below pages folder in order for getStaticProps to work. Otherwise it would just give an empty props object to the Gallery component

.env.example

@@ -1,2 +1,5 @@
-REACT_APP_LONG_LIVED_ACCESS_TOKEN=""
-REACT_APP_TRACKING_ID=""
+NEXT_PUBLIC_LONG_LIVED_ACCESS_TOKEN=""
+NEXT_PUBLIC_TRACKING_ID=""
+
+
+# cp .env.example .env.local

src/pages/gallery/gallery.js → src/pages/gallery.js

@@ -1,63 +1,35 @@
 import React, { useCallback, useEffect, useState } from "react";
-import LightboxImage from "../../components/common/LightboxImage";
+import LightboxImage from "../components/common/LightboxImage";
 import classes from "./gallery.module.css";
 
 import { t, Trans } from "@lingui/macro";
 
 const Gallery = (props) => {
-  // console.log({props});
-  const [instaMedia, setInstaMedia] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(false);
-
-  const fetchMediaHandler = useCallback(async () => {
-    setIsLoading(true);
-    setError(false);
-
-    try {
-      const response = await fetch(
-        `https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type&access_token=${process.env.REACT_APP_LONG_LIVED_ACCESS_TOKEN}`
-      );
-      if (!response.ok) {
-        throw new Error("Something went wrong!");
-      }
-      const media = await response.json();
-      const mediaWithoutVideos = media.data.filter(
-        (d) => d.media_type !== "VIDEO"
-      );
-      setInstaMedia(mediaWithoutVideos);
-    } catch (error) {
-      setError(error.message);
-    }
-    setIsLoading(false);
-  }, []);
-
-  useEffect(() => {
-    fetchMediaHandler();
-  }, [fetchMediaHandler]);
-
   let content = (
     <p>
       <Trans>Fant ingen bilder</Trans>
     </p>
   );
 
-  if (instaMedia.length > 0) {
-    content = instaMedia.map((i) => (
-      <LightboxImage
-        key={i.id}
-        imgSrc={i.media_url}
-        imgAlt={i.caption}
-        title={i.caption}
-        gallery={true}
-      />
-    ));
+  if (props.media) {
+    const { media: instaMedia } = props;
+    if (instaMedia.length > 0) {
+      content = instaMedia.map((i) => (
+        <LightboxImage
+          key={i.id}
+          imgSrc={i.media_url}
+          imgAlt={i.caption}
+          title={i.caption}
+          gallery={true}
+        />
+      ));
+    }
   }
 
-  if (error) {
+  if (props.errMessage) {
     content = (
       <>
-        <p>{error}</p>
+        <p>{props.errMessage}</p>
         <p>
           <Trans>
             Innlasting av bilder mislyktes. Men du kan alltids se innholdet på{" "}
@@ -69,10 +41,12 @@ const Gallery = (props) => {
         </p>
       </>
     );
-    if (error === "NetworkError when attempting to fetch resource.") {
+    if (
+      props.errMessage === "NetworkError when attempting to fetch resource."
+    ) {
       content = (
         <>
-          <p>{error}</p>
+          <p>{props.errMessage}</p>
           <p>
             <Trans>
               Innlasting av bilder mislyktes. Du kan prøve å:
@@ -94,14 +68,6 @@ const Gallery = (props) => {
     }
   }
 
-  if (isLoading) {
-    content = (
-      <p>
-        <Trans>Laster inn...</Trans>
-      </p>
-    );
-  }
-
   return (
     <>
       <h2>{t`Maleri, tegninger og annet`}</h2>
@@ -114,13 +80,33 @@ const Gallery = (props) => {
   );
 };
 
+export async function getStaticProps(context) {
+  try {
+    const response = await fetch(
+      `https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type&access_token=${process.env.NEXT_PUBLIC_LONG_LIVED_ACCESS_TOKEN}`
+    );
+
+    if (!response.ok) {
+      throw new Error("Something went wrong!");
+    }
+    const media = await response.json();
+    const mediaWithoutVideos = media.data.filter(
+      (d) => d.media_type !== "VIDEO"
+    );
 
-// export async function getStaticProps(){
-//   return {
-//     props: {
-//       media: [{text:"ddffs"}]
-//     }
-//   }
-// }
+    console.log(mediaWithoutVideos);
+    return {
+      props: {
+        media: mediaWithoutVideos,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        errMessage: error.message,
+      },
+    };
+  }
+}
 
 export default Gallery;