add sponsor page, gather town logic, lazy import for picrew and sponsor

src/components/GaleriComponents/Accordion.jsx

@@ -43,8 +43,10 @@ const Accordion = (props) => {
   return (
     <div className="accordionSection">
       <motion.button className={`btn ${isActive}`} onClick={toggleAccordion}>
-        {props.image && (
+        {props.image ? (
           <img src={props.image} alt="" className="accordionImage" />
+        ) : (
+          <div />
         )}
         <h4 className="accordionTitle">{props.title}</h4>
 

src/components/LandingComponents/Games/GatherTown.jsx

@@ -2,10 +2,9 @@ import React from "react";
 import Accordion from "../../GaleriComponents/Accordion";
 import "./GatherTown.scss";
 
-const himpunan = (name, link, available = true) => ({
+const himpunan = (name, link) => ({
   himpunan: name,
   link,
-  available,
 });
 const fakultas = (name, himpunan) => ({ name, himpunan });
 
@@ -19,7 +18,7 @@ const DAFTAR_LINK = [
   ]),
   fakultas("SITH-S", [
     himpunan("HIMABIO", "bit.ly/GThimabio"),
-    himpunan("HIMAMIKRO", "bit.ly", false),
+    himpunan("HIMAMIKRO", "bit.ly/GThimamikro"),
   ]),
   fakultas("SITH-R", [
     himpunan("HMRH", "bit.ly/GThmrh"),
@@ -53,31 +52,22 @@ const DAFTAR_LINK = [
     himpunan("KMIL", "bit.ly/GT_kmil"),
   ]),
   fakultas("FTI", [
-    himpunan("HIMATEK", "bit.ly", false),
-    himpunan("HMFT", "bit.ly", false),
-    himpunan("MTI", "bit.ly", false),
+    himpunan("HIMATEK", "bit.ly/GThimatek"),
+    himpunan("HMFT", "bit.ly/GT_HMFT"),
+    himpunan("MTI", "bit.ly/GT_mti"),
     himpunan("HMTB", "bit.ly/GT_HMTB"),
     himpunan("HMPG", "bit.ly/GTHMPG"),
   ]),
-  fakultas("FSRD", [
-    himpunan("VASA", "bit.ly", false),
-    himpunan("TERIKAT", "bit.ly", false),
-    himpunan("IPPDIG", "bit.ly", false),
-    himpunan("INDDES", "bit.ly", false),
-    himpunan("IMDI", "bit.ly", false),
-  ]),
+  fakultas("FSRD", [himpunan("KMSR", "bit.ly/GT_KMSR")]),
   fakultas("FTMD", [
     himpunan("HMM", "bit.ly/GT_hmm"),
-    himpunan("KMPN", "bit.ly", false),
+    himpunan("KMPN", "bit.ly/GT-KMPN"),
     himpunan("MTM", "bit.ly/GTmtm"),
   ]),
-  fakultas("SBM", [
-    himpunan("IMK", "bit.ly", false),
-    himpunan("KMM", "bit.ly", false),
-  ]),
+  fakultas("SBM", [himpunan("SBM", "bit.ly/GTsbm")]),
   fakultas("SAPPK", [
-    himpunan("IMA-G", "bit.ly", false),
-    himpunan("HMP", "bit.ly", false),
+    himpunan("IMA-G", "bit.ly/GTima-g"),
+    himpunan("HMP", "bit.ly/GT-HMPPL"),
   ]),
 ];
 
@@ -89,11 +79,7 @@ const Table = ({ links }) => {
           <tr key={idx}>
             <td>{himpunan}</td>
             <td className="table-info">
-              {available ? (
-                <a href={"https://" + link}>{link}</a>
-              ) : (
-                <p>Belum ada</p>
-              )}
+              <a href={"https://" + link}>{link}</a>
             </td>
           </tr>
         ))}

src/components/LandingComponents/Games/Majalah.jsx

@@ -1,14 +1,22 @@
 import React from "react";
 import Button from "../../shared/Button";
 import "./Majalah.scss";
+import { sendAnalyticsAction, MAGAZINE_ACTION } from "../../../api/analytics";
 
 export const Majalah = () => {
   const fileID = "1a9otAi2QLHEPqkTIpwkRRt0LkgMGkn6J";
+  sendAnalyticsAction(MAGAZINE_ACTION, "Visit Mercusuar");
   return (
     <div className="majalah">
       <h3>MERCUSUAR: Majalah Wispril ITB 2021</h3>
       <iframe src={`https://drive.google.com/file/d/${fileID}/preview`} />
-      <a href={`https://drive.google.com/uc?export=download&id=${fileID}`}>
+      <br />
+      <a
+        href={`https://drive.google.com/uc?export=download&id=${fileID}`}
+        onClick={() =>
+          sendAnalyticsAction(MAGAZINE_ACTION, "Download Mercusuar")
+        }
+      >
         <Button>Download</Button>
       </a>
     </div>

src/components/LandingComponents/Games/Picrew.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { sendAnalyticsAction, PICREW_ACTION } from "../../../api/analytics";
 
 import "./Picrew.scss";
 
@@ -21,7 +22,7 @@ import { ReactComponent as Text } from "../../../icons/text.svg";
 
 const defaultText = "Ketik di sini";
 
-export const Picrew = () => {
+const Picrew = () => {
   let initialData = getLocalPicrewImages() || createDataTemplate();
   let initialText = getLocalPicrewText() || defaultText;
   const [data, setData] = useState(initialData);
@@ -47,6 +48,7 @@ export const Picrew = () => {
     setText(text);
     setLocalPicrewImages(images);
     setLocalPicrewText(text);
+    sendAnalyticsAction(PICREW_ACTION, "Reset Picrew");
   };
 
   const shufflePicrew = () => {
@@ -115,3 +117,5 @@ export const Picrew = () => {
     </div>
   );
 };
+
+export default Picrew;

src/components/LandingComponents/Games/picrewShuffle.js

@@ -1,4 +1,5 @@
 import { MENU_DB } from "./PicrewMenu";
+import { sendAnalyticsAction, PICREW_ACTION } from "../../../api/analytics";
 import { createDataTemplate } from "./picrewFunctions";
 
 // export const createDataTemplate = () => ({
@@ -155,5 +156,6 @@ export const shuffle = () => {
     accessories: { ...template.accessories, ...accessories },
   };
 
+  sendAnalyticsAction(PICREW_ACTION, "Shuffle Picrew");
   return template;
 };

src/components/TemplateComponents/Navbar.jsx

@@ -21,8 +21,9 @@ export const Navbar = () => {
   const [isMobile, setIsMobile] = useState(checkIsMobile());
   useEffect(() => {
     function handleResize() {
+      // alert(window.innerWidth);
       setIsMobile(checkIsMobile());
-      setOpen((prev) => !prev);
+      // setOpen((prev) => !prev);
     }
     window.addEventListener("resize", handleResize);
     return () => {
@@ -35,18 +36,22 @@ export const Navbar = () => {
     <nav className="navbar">
       <div
         className="navbar-close-overlay"
-        style={{ display: isOpen ? "block" : "none" }}
+        style={{ display: isMobile && isOpen ? "block" : "none" }}
         onClick={toogleOpen}
       />
       <Link to="/" className="navbar-logo">
         <img src={Logo} alt="navbar-logo" />
         <h4>WISPRIL 2021</h4>
       </Link>
       <NavbarLinks isOpen={isOpen} isMobile={isMobile} />
-      <div className="navbar-background" />
-      <div className="navbar-button" onClick={toogleOpen}>
-        <div className={`navbar-line ${isOpen && "navbar-line-active"}`} />
-      </div>
+      {isMobile && (
+        <>
+          <div className="navbar-background" />
+          <div className="navbar-button" onClick={toogleOpen}>
+            <div className={`navbar-line ${isOpen && "navbar-line-active"}`} />
+          </div>
+        </>
+      )}
     </nav>
   );
 };

src/components/TemplateComponents/Navbar.scss

@@ -15,10 +15,10 @@
   // box-shadow: $shadow-blur;
   filter: drop-shadow($shadow-blur);
   transition: $default-transition;
-  &-background,
-  &-button {
-    display: none;
-  }
+  // &-background,
+  // &-button {
+  //   display: none;
+  // }
   &-logo,
   &-links {
     transition: $default-transition;

src/components/TemplateComponents/NavbarLinks.jsx

@@ -36,7 +36,7 @@ export const NavbarLinks = ({ isOpen, isMobile }) => {
           {content}
         </div>
       )}
-      {isOpen && (
+      {isMobile && isOpen && (
         <motion.div
           key="2"
           initial={{ y: "-100%" }}

src/components/TemplateComponents/Sponsor.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import "./Sponsor.scss";
+import { MEDPARS, SPONSORS } from "../../images/orgz";
+
+const handleClassName = (size, className) => ({ size, className });
+const classNameList = {
+  XL: "logo-xl",
+  L: "logo-l",
+  M: "logo-m",
+  S: "logo-s",
+};
+
+const SponsorTemplate = ({ arr, alt }) => (
+  <div className="logo-container">
+    {arr.map(({ size, content }, idx) => (
+      <React.Fragment key={idx}>
+        {content.map((orgz, idx) => (
+          <img src={orgz} key={idx} className={classNameList[size]} alt={alt} />
+        ))}
+      </React.Fragment>
+    ))}
+  </div>
+);
+
+const Sponsor = () => {
+  return (
+    <div className="sponsor-medpar">
+      <h3>OUR SPONSORS</h3>
+      <SponsorTemplate arr={SPONSORS} alt="sponsor-logo" />
+      <h3>MEDIA PARTNERS</h3>
+      <SponsorTemplate arr={MEDPARS} alt="media-partner-logo" />
+    </div>
+  );
+};
+
+export default Sponsor;