From eeaa77b244dd498b5c4c27f3d997733dc18c9ca4 Mon Sep 17 00:00:00 2001
From: Jacek Pyziak <jacek.pyziak@project-pro.pl>
Date: Wed, 23 Oct 2024 12:57:48 +0200
Subject: [PATCH] Refactor Instagram box component to use Splide slider

---
 .../components/instagram-box-dev.php          | 98 +++++++++----------
 templates_user/components/instagram-box.php   | 54 ----------
 2 files changed, 47 insertions(+), 105 deletions(-)

diff --git a/templates_user/components/instagram-box-dev.php b/templates_user/components/instagram-box-dev.php
index c4d96ac..7a1056c 100644
--- a/templates_user/components/instagram-box-dev.php
+++ b/templates_user/components/instagram-box-dev.php
@@ -1,58 +1,54 @@
 <?php
-    require_once "vendor/Yizack/Config.php";
-    require_once "vendor/Yizack/InstagramFeed.php";
-
-    use Yizack\InstagramFeed;
-
-    $instagramToken = 'IGQWRPTU9mbHRVUDdBUWVuNE5UWDE2OElwVlp2QVJpWTdWSXNXUzF6X3l4T2FvMV9yNm9nVUcxZA3JLdk5jRllFNmI3c292S00tRldmQ1IwQkZAmM3FYQkFoaFJ0TkxVWDY3QUExWjQxRGI4eGxqMUY1SVl6VWZAzZAXMZD';
-    $feed = new InstagramFeed($instagramToken);
+    $instagramToken = 'IGQWROR1p4UFRFS1ZAoQm5BWTZAmYnQ2TXpHVVJoTHdRdVVycEVhRWdzRTJhTHVGa0hmS3VYVjR5MG9URWRETllpbnFOcXBuLU1PQVRYUXdPTjZAMYVFBTEVYQTBuV0twSjI0N2pzZA0JWWVg0SlJuTU5Oa3loTXJNUUkZD';
     $postsData = json_decode(file_get_contents('https://graph.instagram.com/me/media?limit=25&fields=thumbnail_url,permalink,media_url,media_type,caption&access_token=' . $instagramToken));
 ?>
 
-<?
-    function post($username, $permalink, $caption, $timestamp) {
-        $html = '<blockquote class="instagram-media" data-instgrm-permalink="' . $permalink . '" data-instgrm-captioned data-instgrm-version="13">';
-        $html .= '<a href="' . $permalink . '"></a>';
-        $html .= '</blockquote>';
-        $html .= '<script async src="//www.instagram.com/embed.js"></script>';
-        return $html;
-    }
-?>
+<div class="box-title">Sprawdź nas na Instagramie</div>
 
-<!-- Get only image -->
-<ul>
-    <? foreach($postsData->data as $post): ?>
-        <?
-            $postId = $post->id;
-            $permalink = $post->permalink;
-            $mediaUrl = $post->media_url;
-            $mediaType = $post->media_type;
-            $description = $post->caption;
-        ?>
-        <li>
-            <a href="<?= $permalink; ?>">
-                <img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: 200px;">
-            </a>
-        </li>
-    <? endforeach ?>
-</ul>
+<section class="splide" id="instagram-feed-box" aria-label="Splide Basic HTML Example">
+  <div class="splide__track">
+		<ul class="splide__list">
+            <? foreach($postsData->data as $post): ?>
+                <?
+                    $postId = $post->id;
+                    $permalink = $post->permalink;
+                    $mediaUrl = $post->media_url;
+                    $mediaType = $post->media_type;
+                    $description = $post->caption;
+                ?>
+                <li class="splide__slide">
+                    <a href="<?= $permalink; ?>">
+                        <img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: fit-content;">
+                    </a>
+                </li>
+            <? endforeach ?>
+		</ul>
+  </div>
+</section>
 
-<!-- Get instagram card (iframe) -->
-<ul>
-    <? foreach($feed->getFeed() as $value) : ?>
-        <?
-            $username = $value["username"];
-            $permalink = $value["permalink"];
-            $timestamp = $value["timestamp"];
-            $caption = "";
+<script class="footer" type="text/javascript">
+    let instagramFeedBox = new Splide("#instagram-feed-box", {
+        type: "loop",
+        perPage: 6,
+        perMove: 1,
+        gap: 20,
+        pagination: false,
+        arrows:true,
+        breakpoints: {
+            1400: {
+              perPage: 5,
+            },
+            991: {
+              perPage: 4,
+            },
+            600: {
+              perPage: 3,
+            },
+            500: {
+              perPage: 2,
+            },
+          },
+    });
 
-            if(isset($value["caption"])) {
-            $caption = $value["caption"];
-            }
-        ?>
-
-        <li class="glide__slide">
-            <div class="instagram-wrapper"><?= post($username, $permalink, $caption, $timestamp); ?></div>
-        </li>
-    <? endforeach; ?>
-</ul>
+    instagramFeedBox.mount();
+</script>
\ No newline at end of file
diff --git a/templates_user/components/instagram-box.php b/templates_user/components/instagram-box.php
index 7a1056c..e69de29 100644
--- a/templates_user/components/instagram-box.php
+++ b/templates_user/components/instagram-box.php
@@ -1,54 +0,0 @@
-<?php
-    $instagramToken = 'IGQWROR1p4UFRFS1ZAoQm5BWTZAmYnQ2TXpHVVJoTHdRdVVycEVhRWdzRTJhTHVGa0hmS3VYVjR5MG9URWRETllpbnFOcXBuLU1PQVRYUXdPTjZAMYVFBTEVYQTBuV0twSjI0N2pzZA0JWWVg0SlJuTU5Oa3loTXJNUUkZD';
-    $postsData = json_decode(file_get_contents('https://graph.instagram.com/me/media?limit=25&fields=thumbnail_url,permalink,media_url,media_type,caption&access_token=' . $instagramToken));
-?>
-
-<div class="box-title">Sprawdź nas na Instagramie</div>
-
-<section class="splide" id="instagram-feed-box" aria-label="Splide Basic HTML Example">
-  <div class="splide__track">
-		<ul class="splide__list">
-            <? foreach($postsData->data as $post): ?>
-                <?
-                    $postId = $post->id;
-                    $permalink = $post->permalink;
-                    $mediaUrl = $post->media_url;
-                    $mediaType = $post->media_type;
-                    $description = $post->caption;
-                ?>
-                <li class="splide__slide">
-                    <a href="<?= $permalink; ?>">
-                        <img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: fit-content;">
-                    </a>
-                </li>
-            <? endforeach ?>
-		</ul>
-  </div>
-</section>
-
-<script class="footer" type="text/javascript">
-    let instagramFeedBox = new Splide("#instagram-feed-box", {
-        type: "loop",
-        perPage: 6,
-        perMove: 1,
-        gap: 20,
-        pagination: false,
-        arrows:true,
-        breakpoints: {
-            1400: {
-              perPage: 5,
-            },
-            991: {
-              perPage: 4,
-            },
-            600: {
-              perPage: 3,
-            },
-            500: {
-              perPage: 2,
-            },
-          },
-    });
-
-    instagramFeedBox.mount();
-</script>
\ No newline at end of file