Merge pull request #101 from xeptagondev/staging_release_6

Staging release 6

.github/workflows/deployment.yml

@@ -0,0 +1,46 @@
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - staging
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+          cache-dependency-path: ./ui/yarn.lock
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: ./ui
+
+      - name: Build Project
+        run: yarn build
+        working-directory: ./ui
+
+      - name: Export Project
+        run: yarn export
+        working-directory: ./ui
+
+      - name: Create .nojekyll File
+        run: touch ./out/.nojekyll
+        working-directory: ./ui
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: ./ui/out

ui/components/Layout.tsx

@@ -1,20 +1,21 @@
 import { NextSeo } from "next-seo";
 import { ReactNode } from "react";
-import Image from "next/image";
+//import Image from "next/image";
 // import { FaCreativeCommonsBy } from "react-icons/fa";
 // import { GoMarkGithub } from "react-icons/go";
 // import { GrCreativeCommons } from "react-icons/gr";
 import { Header } from "./header";
 // import Link from "next/link";
 import CookieConsent from "./cookie-consent";
-import LogoSVG from "../public/undp-white-logo.svg";
-import xTwitter from '../public/x-twitter-brands-solid.svg'
-import InstagramSVG from '../public/instagram-brands-solid.svg'
+//import LogoSVG from "../public/undp-white-logo.svg";
+//import xTwitter from '../public/x-twitter-brands-solid.svg'
+//import InstagramSVG from '../public/instagram-brands-solid.svg'
 import {
   FaFacebookF,
   FaLinkedinIn,
   FaYoutube,
 } from "react-icons/fa";
+import { prefix } from "lib/prefix";
 type Props = {
   children?: ReactNode;
   title?: string;
@@ -33,7 +34,8 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
           <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between pb-[32px] sm:pb-[32px] md:pb-[48px] lg:pb-[48px]">
             <div className="flex flex-row items-center space-x-0 mb-0 sm:mb-0 md:mb-4 lg:mb-0">
               <div className="w-[60px] flex-shrink-0 mb-0 sm:mb-0">
-                <Image src={LogoSVG} alt="UNDP Logo" />
+                <img src={`${prefix}/undp-white-logo.svg`} width={60}
+                 height={123} alt="UNDP Logo" />
               </div>
               <div className="text-xl sm:text-xl md:text-[25px] md:leading-[1.15] sm:pl-4 font-normal md:text-left lg:text-left">
                 <span>United Nations</span>
@@ -62,14 +64,14 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <Image height={20} width={20} src={InstagramSVG} alt="InstagramSVG" />
+                  <img height={20} width={20} src={`${prefix}/instagram-brands-solid.svg`} alt="InstagramSVG" />
                 </a>
                 <a
                   href="https://twitter.com/UNDP"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                    <Image height={20} width={20} src={xTwitter} alt="xTwitter" />
+                    <img height={20} width={20} src={`${prefix}/x-twitter-brands-solid.svg`} alt="xTwitter" />
                 </a>
                 <a
                   href="https://www.youtube.com/user/undp"
@@ -114,14 +116,14 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <Image height={20} width={20} src={InstagramSVG} alt="InstagramSVG" />
+                  <img height={20} width={20} src={`${prefix}/instagram-brands-solid.svg`} alt="InstagramSVG" />
                 </a>
                 <a
                   href="https://twitter.com/UNDP"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                    <Image height={20} width={20} src={xTwitter} alt="xTwitter" />
+                    <img height={20} width={20} src={`${prefix}/x-twitter-brands-solid.svg`} alt="xTwitter" />
                 </a>
               <a
                 href="https://www.youtube.com/user/undp"

ui/components/digital-right-indicator-list.tsx

@@ -1,11 +1,14 @@
 import { DigitalRightsPillar } from "database/ancillary";
 import { Score } from "database/processed/db";
+import { db } from "database";
 import { roundNumber } from "lib";
 import { useState } from "react";
 import useSWR from "swr";
-import ExternalDefault from "../public/external-default.svg";
-import ExternalDefaultHover from "../public/external-hover.svg";
-import Image from "next/image";
+//import ExternalDefault from "../public/external-default.svg";
+//import ExternalDefaultHover from "../public/external-hover.svg";
+//import Image from "next/image";
+import { uniqBy } from "lodash";
+import { prefix } from "lib/prefix";
 interface IndicatorListProps {
   country: string;
   pillar: DigitalRightsPillar;
@@ -15,13 +18,43 @@ interface IndicatorListProps {
   showSources: boolean;
 }
 
-const fetchIndicators = async (_: string, country: string, pillar: string) => {
-  let url = `/api/digital-right-indicators`;
-  let params = { country, pillar };
-  let stringifiedParams = new URLSearchParams(params).toString();
-  // @ts-ignore
-  const res = await fetch(`${url}?${stringifiedParams}`);
-  return await res.json();
+const fetchIndicators = async (_: string, country: string, pillar: string) => { 
+  // using ssr api
+  // let url = `/api/digital-right-indicators`;
+  // let params = { country, pillar };
+  // let stringifiedParams = new URLSearchParams(params).toString();
+  // // @ts-ignore
+  // const res = await fetch(`${url}?${stringifiedParams}`);
+  // return await res.json();
+
+  // direct query
+  if (!country || !pillar) { 
+    return;
+  }
+
+  let indices = db.digital_right_scores.filter((score) => {
+          return (
+            score["Country Name"] === country &&
+            score["Pillar"] === pillar &&
+            Boolean(score["Indicator"])
+          );
+
+  });
+
+  let indicesWithSources = indices.map((index) => {
+    return {
+      ...index,
+      sources: db.digital_right_scores.filter((score) => {
+        return (
+          score["Country Name"] === country &&
+          score["Pillar"] === pillar &&
+          score["Indicator"] === index["Indicator"] &&
+          score["Source Name"]
+        );
+      }),
+    };
+  });
+  return  indicesWithSources;
 };
 
 export function DigitalRightIndicatorList(props: IndicatorListProps) {
@@ -90,12 +123,26 @@ const fetchIndicatorsForPillar = async (
   country: string,
   pillar: string
 ) => {
-  let url = `/api/digital-right-indicators-for-pillar`;
-  let params = { country, pillar };
-  let stringifiedParams = new URLSearchParams(params).toString();
-  // @ts-ignore
-  const res = await fetch(`${url}?${stringifiedParams}`);
-  return await res.json();
+   // using ssr api
+
+  // let url = `/api/digital-right-indicators-for-pillar`;
+  // let params = { country, pillar };
+  // let stringifiedParams = new URLSearchParams(params).toString();
+  // // @ts-ignore
+  // const res = await fetch(`${url}?${stringifiedParams}`);
+  // return await res.json();
+
+  if (!country || !pillar) {
+    return;
+  }
+
+  const allIndicators = db.digital_right_scores.filter(
+    (score) =>
+      score["Pillar"] === pillar &&
+      Boolean(score["Indicator"])
+  );
+  const uniqueIndicators = uniqBy(allIndicators, "Indicator");
+  return uniqueIndicators;
 };
 const MissingIndicators = ({
   filledIndicators,
@@ -306,15 +353,15 @@ const Indicator = ({
                   onMouseLeave={() => setIconIsHovered(false)}
                 >
                   {isIconHovered ? (
-                    <Image
-                      src={ExternalDefaultHover}
+                    <img
+                    src={`${prefix}/external-hover.svg`}
                       height={12}
                       alt="ExternalDefaultHover"
                       className="mr-1 flex-none"
                     />
                   ) : (
-                    <Image
-                      src={ExternalDefault}
+                    <img
+                    src={`${prefix}/external-default.svg`}
                       height={12}
                       alt="ExternalDefault"
                       className="mr-1 flex-none"

ui/components/filter-badge.tsx

@@ -1,5 +1,8 @@
-import Times from "../public/times-red.svg";
-import Image from "next/image";
+// import Times from "../public/times-red.svg";
+
+import { prefix } from "lib/prefix";
+
+//import Image from "next/image";
 interface FilterBadgeProps {
   label: string;
   value: string;
@@ -45,8 +48,8 @@ className={`inline-flex py-0.6 pl-1 pr-0 text-[16px] sm:text-[16px]  md:text-[20
       className="ml-0.1 rounded-full inline-flex items-center justify-center focus:outline-none focus:text-white"
     >
       {/* <span className="sr-only">Remove {label}</span> */}
-      <Image
-        src={Times}
+      <img
+        src={`${prefix}/times-red.svg`}
         alt="Times"
         className="mr-[8px]"
         width={22}