Merge pull request #23 from idindrakusuma/indra/qr

feat: improvement Wishes section and QR Wrapper

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   extends: `react-app`,
   rules: {
     'jsx-a11y/accessible-emoji': 'off',
-    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
+    // 'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
     'import/no-unresolved': [2, { caseSensitive: false }],
   },
   settings: {

src/components/HelloSection/index.js

@@ -64,7 +64,7 @@ function HelloSection({ isInvitation }) {
                 <h2 className="main-font">Seputar Covid-19</h2>
                 <p className="info">
                   Berkaitan dengan kondisi pandemik saat ini, keberlangsungan acara kami mengacu pada pedoman
-                  Kementerian Kesehatan, yaitu memeberlakukan pembatasan jarak dan pembatasan jumlah tamu undangan.
+                  Kementerian Kesehatan, yaitu memberlakukan pembatasan jarak dan pembatasan jumlah tamu undangan.
                 </p>
                 <p className="info">
                   Maka dari itu, dengan segala kerendahan hati, kami mohon maaf jika belum bisa mengundang saudara/i

src/components/QRCard/index.js

@@ -9,8 +9,17 @@ function QRCard({ name, code, desc }) {
         <div className="qr__wrapper">
           <QRCode value={code} size={150} />
         </div>
-        <h3 className="title__name">{name}</h3>
-        <h4 className="title__code">{`(${desc})`}</h4>
+        {name ? (
+          <>
+            <h3 className="title__name">{name}</h3>
+            <h4 className="title__code">{`(${desc})`}</h4>
+          </>
+        ) : (
+          <>
+            <h3 className="title__name">{code}</h3>
+            <h4 className="title__code title__transaparent">{`(${desc})`}</h4>
+          </>
+        )}
       </div>
     </div>
   );

src/components/QRCard/styles.js

@@ -26,4 +26,8 @@ export const styWrapper = css`
     font-size: 10px;
     margin: 0 0 8px 0;
   }
+
+  .title__transaparent {
+    opacity: 0;
+  }
 `;

src/components/StorySection/stories-data.js

@@ -37,7 +37,7 @@ export const stories = [
     title: 'Kembali ke Indonesia',
     date: '3 Maret 2019',
     description:
-      'Periode belajar di Kroasia telah selesai. Akhirnya Dinda kembali ke Indonesia! Ada tanggung jawab yang harus Dinda selesaikan seusai dari Kroasia, yakni harus menyelesaikan skripsi dan mencapai target untuk wisuda di bulan Agustus 2019. Selain itu, kembalinya Dinda ke Indonesia menjadi momen yang tepat bagi Indra untuk menyampaikan niat ingin serius kepada orang tua Dinda. Hal itu disambut baik oleh kedua orang tuanya dan sepakat akan melaksanakan acara Ndodok Lawang usai Dinda wisuda. Sebelum wisuda, Dinda sudah harus meniti karir di Jakarta sebagai seorang Content Analyst di Ruangguru.',
+      'Periode belajar di Kroasia telah selesai. Akhirnya Dinda kembali ke Indonesia! Ada tanggung jawab yang harus Dinda selesaikan seusai dari Kroasia, yakni harus menyelesaikan skripsi dan mencapai target untuk wisuda di bulan Agustus 2019. Selain itu, kembalinya Dinda ke Indonesia menjadi momen yang tepat bagi Indra untuk menyampaikan niat ingin serius kepada orang tua Dinda. Hal itu disambut baik oleh kedua orang tua mereka  dan sepakat akan melaksanakan acara Ndodok Lawang usai Dinda wisuda. Sebelum wisuda, Dinda sudah harus meniti karir di Jakarta sebagai seorang Content Analyst di Ruangguru.',
     image: ImgKembaliKeIndonesia,
   },
   {

src/components/WishesSection/WishesContainer.js

@@ -2,16 +2,30 @@ import React, { useState, useEffect, useCallback } from 'react';
 
 import WishesItem from './WishesItem';
 import { wishlist } from './wishlist-data';
-import { styOwl } from './styles';
+import { styButtonWrapper } from './styles';
 
-const INTERVAL_SLIDE = 10000;
+const INTERVAL_SLIDE = 35000;
 
 function WishesContainer() {
   const [active, setActive] = useState(0);
   const [pauseSlide, setPauseSlide] = useState(false);
+  const totalWishes = wishlist.length || 0;
+
+  const handleSetActive = (isNext = true) => {
+    if (isNext) {
+      if (active === totalWishes - 1) {
+        setActive(0);
+      } else {
+        setActive(active + 1);
+      }
+    } else {
+      if (active === 0) {
+        setActive(totalWishes - 1);
+      } else {
+        setActive(active - 1);
+      }
+    }
 
-  const handleSetActive = (index) => {
-    setActive(index);
     setPauseSlide(true);
 
     setTimeout(() => {
@@ -31,19 +45,7 @@ function WishesContainer() {
     return wishlist.map((w, index) => <WishesItem key={index} {...w} isActive={index === active} />);
   };
 
-  const renderNavigation = () => {
-    return wishlist.map((w, index) => (
-      <div
-        className={`owl-dot ${index === active ? 'active' : ''}`}
-        key={index}
-        onClick={() => handleSetActive(index)}
-      />
-    ));
-  };
-
-  /**
-   * Side effect to autoscroll
-   */
+  /** Side effect to autoscroll */
   useEffect(() => {
     const interval = setInterval(() => {
       if (!pauseSlide) {
@@ -59,8 +61,9 @@ function WishesContainer() {
   return (
     <div className="wrap-testimony">
       {renderWishlist()}
-      <div css={styOwl}>
-        <div className="owl-dots">{renderNavigation()}</div>
+      <div css={styButtonWrapper}>
+        <button className="btn btn-sm button-nav" onClick={() => handleSetActive(false)}>{`< Sebelumnya`}</button>
+        <button className="btn btn-sm button-nav" onClick={() => handleSetActive(true)}>{`Selanjutnya >`}</button>
       </div>
     </div>
   );

src/components/WishesSection/WishesItem.js

@@ -10,7 +10,7 @@ function WishesItem({ image, name, infoName, description, isActive }) {
       <div className="item" css={styWrapperItem}>
         <div className={`testimony-slide text-center ${isActive ? 'active' : 'hide'}`}>
           <figure>
-            <img src={image} alt="user" loading="eager" />
+            <img src={image} alt="user" loading="lazy" />
           </figure>
           <h4>{name}</h4>
           <span className="infoName">{infoName}</span>

src/components/WishesSection/styles.js

@@ -1,29 +1,5 @@
 import { css, keyframes } from '@emotion/core';
 
-export const styOwl = css`
-  margin-top: 10px;
-  text-align: center;
-
-  .owl-dots {
-    display: flex;
-    justify-content: center;
-
-    .owl-dot {
-      width: 10px;
-      height: 10px;
-      margin: 0 4px;
-      border-radius: 50%;
-      background: #e6e6e6;
-      cursor: pointer;
-    }
-
-    .active {
-      background: transparent;
-      border: 2px solid #f14e95;
-    }
-  }
-`;
-
 const animation = keyframes`
   0% { right: -300px; opacity: 0;}
   50% { right: 50px; opacity: 0.5;}
@@ -38,7 +14,7 @@ const animationLeft = keyframes`
 
 export const styWithAnimation = (isActive) => css`
   position: relative;
-  animation: ${isActive ? animation : animationLeft} 1.2s;
+  animation: ${isActive ? animation : animationLeft} 1s;
 `;
 
 export const styWrapperItem = css`
@@ -49,6 +25,10 @@ export const styWrapperItem = css`
     margin: 0 0 4px 0;
   }
 
+  blockquote {
+    margin-top: 16px !important;
+  }
+
   .infoName {
     font-size: 12px;
     text-transform: capitalize;
@@ -64,9 +44,23 @@ export const styWrapperItem = css`
     diplay: block;
   }
 
+  .description {
+    font-size: 16px !important;
+  }
+
   @media screen and (max-width: 400px) {
     .description {
-      font-size: 16px !important;
+      font-size: 14px !important;
     }
   }
 `;
+
+export const styButtonWrapper = css`
+  display: flex;
+  justify-content: center;
+
+  .button-nav {
+    font-size: 14px;
+    padding: 5px 20px;
+  }
+`;

src/components/WishesSection/wishlist-data.js

@@ -1,4 +1,3 @@
-import Image from '@assets/images/couple-2.jpg';
 import Nita from '@assets/images/w-nita.jpg';
 import Zakiy from '@assets/images/w-zakiy.jpg';
 import Moletta from '@assets/images/w-moletta.jpg';
@@ -7,14 +6,23 @@ import dianara from '@assets/images/w-dianara.jpg';
 import rahma from '@assets/images/w-rahma.jpg';
 import vela from '@assets/images/w-vela.jpg';
 import iqmala from '@assets/images/w-iqmala.jpg';
+import man from './assets/user.png';
 import ihsan from './assets/w-ihsan.jpg';
 import fajar from './assets/w-fajar.jpg';
 import risa from './assets/w-risa.jpg';
+import puspita from './assets/w-puspita.jpg';
+import kamal from './assets/w-kamal.jpg';
+import ghea from './assets/w-ghea.jpg';
+import emsho from './assets/w-emsho.jpg';
+import alvia from './assets/w-alvia.jpg';
+import yunias from './assets/w-yunias.jpg';
+import yunita from './assets/w-yunita.jpg';
+import fitria from './assets/w-fitria.jpg';
 
 export const wishlist = [
   {
     name: 'Nita Syarifah',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMP Dinda',
     description: `selamat menempuh hidup baru dinda dan mas indra semoga menjadi pasangan teman hidup selamanya sesurga, enjoy your little family always be happy my sweet couple!🥰🤗 amin`,
     image: Nita,
   },
@@ -32,15 +40,15 @@ export const wishlist = [
   },
   {
     name: 'Risalatul Muawanah',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMP Dinda',
     description: `"Hey Din!  Finally ..... Happy Wedding!  Hopefully become a family that Sakinah Mawaddah Warohmah until HIS heaven later! 
     Become a blessed family and always be happy!  May your dreams always be achieved!  Always complement and support each other! 
     I will wait for 5 children yea! Hihi 😅😅😘"`,
     image: risa,
   },
   {
     name: 'Moleta Tiara Mahayanti',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMP Dinda',
     description: `"Happy Wedding untuk Dinda dan Mas Indra ❤
     Semoga menjadi keluarga yang Sakinah Mawardah wa Rahmah Amin.
     Selamat menempuh hidup yang baru kalian berdua.
@@ -53,24 +61,24 @@ export const wishlist = [
   },
   {
     name: 'Hapsari Anggraini',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMP Dinda',
     description: `"Selamat menempuh hidup baru Dinda dan mas Indra, semoga menjadi keluarga yg sakinah, mawaddah, warrahmah, yg bahagia, dan menjadi pasangan yg selalu ada dalam keadaan suka maupun duka aamiin.
     semoga kita cepet dapet ponakan ya, Dinn😂💙"`,
     image: hapsari,
   },
   {
-    name: 'Herza',
+    name: 'Herza I.M',
     infoName: 'Rekan Kerja Indra, Tokopedia',
     description: `"Untuk Indra dan Dinda, semoga lancar ya acara pernikahannya dan senantiasa aman dan kondusif meski keadaan seperti ini. 
     Salut dengan ketetapan untuk mengukuhkan ikatan meski sdg banyak rintangan.
     Pokoknya saya doain yg terbaik untuk kalian berdua, mulai dari hari h acara sampai seterusnya.
     Semoga jadi keluarga yg sakinah, mawadah, warahmah ya. Amiin.
     Selamat berbahagia, Indra & Dinda!"`,
-    image: Image,
+    image: man,
   },
   {
     name: 'Dhyanara NP',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Rekan Kerja Dinda, NET TV',
     description: `Semoga pernikahan ini membawa Dinda dan Indra dalam ketentraman (sakinah), cinta (mawaddah) dan welas asih (rohmah). Jika saja semakin tumbuhnya cinta itu tak muat masuk ke rongga dada, semoga Allah berikan kelapangan rasa. Semoga Allah mudahkan segala tujuan awal saat kalian berdua memutuskan bersama:)`,
     image: dianara,
   },
@@ -82,42 +90,80 @@ export const wishlist = [
   },
   {
     name: 'Pramudina Rahmawati',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMA Dinda',
     description: `Happy Wedding Dinda & Mas indra. Semoga menjadi pasangan yang samawa, dilimpahkan selalu rezeki dan kebahagiaan, dan langgeng sampai akhir hayat yah! 🖤`,
     image: rahma,
   },
   {
     name: 'Kamal',
-    infoName: 'Sahabat Dinda di Ruangguru',
+    infoName: 'Rekan Kerja Dinda, Ruangguru',
     description: `Congrats Dinda & Mas Indra for your marriage. You are a perfect pair. You are an inspiration to me. And have a blissful conjugal life!`,
-    image: Image,
+    image: kamal,
   },
   {
     name: 'Vela Hafira',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMA Dinda',
     description: `Happy Wedding Dinda & Mas Indra. Selamat menempuh perjalanan hidup yang baru. Semoga bertambahlah ketaatan kalian kepada Allah hingga surga menjadi dekat. Dan dilimpahkan rezeki, petunjuk, keberkahan, dan kebahagiaan lahir batin.  Barakallahu laka 💟💟💟`,
     image: vela,
   },
   {
     name: 'Iqmalifa Dwi Nursandhi',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Sahabat SMA Dinda',
     description: `"Im very happy for you dinda & mas indra..
     Sahabatku dinda.. ini adalah awal perjalanan cinta kalian yang sesungguhnya, membangun cinta dalam satu atap berdua mengarungi samudra kehidupan. Semoga dinda & mas indra menjadi keluarga yang Sakinnah, Mawaddah, & Warahmah.
     Semoga perjalanan kalian akan tetap indah kala bersama-sama membangun kehidupan yang baru, kehidupan yang mengikatkan janji suci berjanji sehidup semati. May your love continue to grow each and every year. Best wishes on your wedding, happily ever after!❤️"`,
     image: iqmala,
   },
   {
     name: 'Abdul Ghofar',
-    infoName: 'Sahabat Indra',
+    infoName: 'Sahabat Kuliah Indra',
     description: `Selamat menempuh hidup baru indra n dinda semoga menjadi keluarga sakinah mawaddah warrahmah `,
-    image: Image,
+    image: man,
   },
   {
     name: 'Puspita Dewi',
-    infoName: 'Sahabat Dinda',
+    infoName: 'Rekan Kerja Dinda, Ruangguru',
     description: `"Dear Dinda & Indra,
     Barakallahu lakuma wa jama’a baina kuma fii khair.
     Semoga pernikahan kalian bisa menjadi ladang ibadah dan pahala, dan menjadi pasangan sehidup sesurga. Sakinah, mawaddah wa rahmah selalu. Amiin"`,
-    image: Image,
+    image: puspita,
+  },
+  // NEW
+  {
+    name: 'Ghea Maurizka',
+    infoName: 'Sahabat Kuliah Dinda',
+    description: `Selamat menempuh satu langkah jenjang kehidupan yg baru❤️ semoga dilimpahkan kebahagiaan & keberkahan, serta menjadi keluarga yg sakinah, mawaddah, warahmah ❤️`,
+    image: ghea,
+  },
+  {
+    name: 'Emsho',
+    infoName: 'Rekan Kerja Dinda, NET TV',
+    description: `Indra. Sebuwah nama yang sayup sering tak denger saat ciwi ciwi ex net jateng pada rerumpian godain Dinda, kalo pas break syuting Hikayat Insani, medio 2018 lalu. Ada yang cengin, dia nya tersipu malu.. Eh, alhamdulillaah cinta mereka akhirnya berlabuh hingga ke tahap ini. Selamat buat Dinda & Indra. Bahagia selamanya yaa.. `,
+    image: emsho,
+  },
+  {
+    name: 'Alvia Tri',
+    infoName: 'Sahabat Kuliah Dinda',
+    description: `Wedding wishes for my dear friends. I hope your life together will be filled with joy, happiness and lots of love`,
+    image: alvia,
+  },
+  {
+    name: 'Yunias Belda',
+    infoName: 'Sahabat Kuliah Dinda',
+    description: `"Selamat Berbahagiaaa Dindaaa dan Mas Indraaa ❤️❤️❤️ 
+    Semoga samawaaa yaaa, cepet dpt momongan, jd keluarga kecil yanb bahagia 😘😘😘 luvluvvv"`,
+    image: yunias,
+  },
+  {
+    name: 'Linda Yunitasari',
+    infoName: 'Sahabat Kuliah Dinda',
+    description: `Selamat buat Dinda dan Mas Indra. lancar2 buat acaranyaa.. semoga kelak dijadikan keluarga yg sakinah, mawadah, warahmah.. segera diberikan dedek yg gumush dan pintar biar jadi mahmud❤️ Langgeng terus sampai kakek nenek ya dinds!❤️`,
+    image: yunita,
+  },
+  {
+    name: 'Fitria Ayunisa',
+    infoName: 'Sahabat Kuliah Dinda',
+    description: `Selamat menempuh hidup baru buat Dinda dan Mas Indra!❤️ Semoga samawa yaaa dan cepet dapet momongan :p amin! see you😘🌷`,
+    image: fitria,
   },
 ];

src/pages/generate-qr.js

@@ -8,10 +8,12 @@ import { styWrapper } from '@components/QRCard/styles';
 function GenerateQRPage() {
   const { data, loading } = useGuestData();
 
+  const finalData = data.filter((guest, index) => index >= 177);
+
   const renderContent = () => {
     if (loading) return <div>Menyiapkan data..</div>;
 
-    return data.map((guest) => {
+    return finalData.map((guest) => {
       return <QRCard name={guest.name} code={guest.code} desc={guest.desc} />;
     });
   };