feat: add device chooser

mazipan · Jan 2, 2021 · c90e0f2 · c90e0f2 · vercel · Jan 2, 2021
1 parent 43b6570
commit c90e0f2
Show file tree

Hide file tree

Showing 8 changed files with 3,049 additions and 2,994 deletions.
diff --git a/components/ChartTimeline.tsx b/components/ChartTimeline.tsx
@@ -1,14 +1,19 @@
 import React from 'react';
 import Chart from 'react-apexcharts';
+interface ChartProps {
+  data: any[];
+  title: string;
+  dataKey: string;
+}
 
-const ChartTimeline = ({ data, title, dataKey }): React.ReactElement => {
+const ChartTimeline = ({ data, title, dataKey }: ChartProps): React.ReactElement => {
   const series = [
     {
       name: 'Mobile',
       data: data.map((item) => {
         return {
           x: item.date,
-          y: parseInt((item.m[dataKey] * 100).toFixed(0), 10),
+          y: Math.round(item.m[dataKey] * 100),
         };
       }),
     },
@@ -17,7 +22,7 @@ const ChartTimeline = ({ data, title, dataKey }): React.ReactElement => {
       data: data.map((item) => {
         return {
           x: item.date,
-          y: parseInt((item.d[dataKey] * 100).toFixed(0), 10),
+          y: Math.round(item.d[dataKey] * 100),
         };
       }),
     },

diff --git a/components/DeviceChooser.tsx b/components/DeviceChooser.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import DesktopIcon from '../components/Icons/Desktop';
+import PhoneIcon from '../components/Icons/Phone';
+
+interface DeviceChooserProps {
+  activeDevice: string;
+  onChangeDevice: (newDevice: string) => void;
+}
+
+const DeviceChooser = ({ activeDevice, onChangeDevice }: DeviceChooserProps): React.ReactElement => {
+  const handleChangeDevice = (newDevice) => {
+    onChangeDevice(newDevice);
+  };
+
+  return (
+    <div className="mt-4 flex">
+      <div
+        className={`mr-2 p-2 flex bg-white overflow-hidden rounded-lg ${
+          activeDevice === 'desktop' ? 'text-green-400 border-green-400 border-2' : 'text-gray-600 border-2'
+        }`}
+        onClick={() => {
+          handleChangeDevice('desktop');
+        }}
+      >
+        <DesktopIcon />
+        <span className="ml-2">Desktop</span>
+      </div>
+
+      <div
+        className={`p-2 flex bg-white overflow-hidden rounded-lg ${
+          activeDevice === 'mobile' ? 'text-green-400 border-green-400 border-2' : 'text-gray-600 border-2'
+        }`}
+        onClick={() => {
+          handleChangeDevice('mobile');
+        }}
+      >
+        <PhoneIcon />
+        <span className="ml-2">Mobile</span>
+      </div>
+    </div>
+  );
+};
+
+export default DeviceChooser;
diff --git a/components/FooterSection.tsx b/components/FooterSection.tsx
@@ -12,7 +12,12 @@ const Footer = (): React.ReactElement => {
         </li>
 
         <li>
-          <a href="https://github.com/mazipan/webperf-ecommerce-id" target="_blank" rel="noopenner noreferrer" className="font-bold">
+          <a
+            href="https://github.com/mazipan/webperf-ecommerce-id"
+            target="_blank"
+            rel="noopenner noreferrer"
+            className="font-bold"
+          >
             GitHub
           </a>
         </li>

diff --git a/components/Gauge.tsx b/components/Gauge.tsx
@@ -38,7 +38,7 @@ const textPercentage = (size: string) => {
 
 const ScoreChart = ({ score = 0, variant = 'large' }): React.ReactElement => {
   const dashArray = Math.floor(BASE_DASH_ARRAY * score);
-  const scoreIndex = score * 100;
+  const scoreIndex = Math.round(score * 100);
 
   const getClassStrokeByScore = (scoreLocal) => {
     if (scoreLocal < 0.5) {

diff --git a/pages/[id].tsx b/pages/[id].tsx
@@ -2,9 +2,8 @@ import React, { useState } from 'react';
 import { GetStaticProps, GetStaticPaths } from 'next';
 
 import Layout from '../components/Layout';
-import DesktopIcon from '../components/Icons/Desktop';
-import PhoneIcon from '../components/Icons/Phone';
 import CardDetail from '../components/CardDetail';
+import DeviceChooser from '../components/DeviceChooser';
 
 import reports from '../reports/output';
 import dataEcommerce from '../constants/ecommerce';
@@ -23,30 +22,7 @@ const DetailPage = ({ data, allData, logo, lastUpdate }): React.ReactElement =>
       <h1 className="text-3xl font-bold capitalize">Web Performance Result</h1>
       <small className="text-gray-600 text-lg font-bold">Last update {lastUpdate}</small>
 
-      <div className="mt-4 flex">
-        <div
-          className={`mr-2 p-4 flex bg-white shadow overflow-hidden rounded-lg ${
-            showDevice === 'desktop' ? '' : 'text-gray-600'
-          }`}
-          onClick={() => {
-            handleChangeDevice('desktop');
-          }}
-        >
-          <DesktopIcon />
-          <span className="ml-2">Desktop</span>
-        </div>
-        <div
-          className={`p-4 flex bg-white shadow overflow-hidden rounded-lg ${
-            showDevice === 'mobile' ? '' : 'text-gray-600'
-          }`}
-          onClick={() => {
-            handleChangeDevice('mobile');
-          }}
-        >
-          <PhoneIcon />
-          <span className="ml-2">Mobile</span>
-        </div>
-      </div>
+      <DeviceChooser activeDevice={showDevice} onChangeDevice={handleChangeDevice} />
 
       <CardDetail data={showDevice === 'desktop' ? data.d : data.m} allData={allData} />
     </Layout>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,27 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { GetStaticProps } from 'next';
 import Link from 'next/link';
 
-import dataEcommerce from '../constants/ecommerce';
-import { EcommerceItem } from '../types';
-
 import HomeData from '../components/HomeData';
 import Layout from '../components/Layout';
+import DeviceChooser from '../components/DeviceChooser';
+
 import reports from '../reports/output';
+import dataEcommerce from '../constants/ecommerce';
+import { EcommerceItem } from '../types';
 
 const Home = ({ lastReport, lastUpdate }): React.ReactElement => {
+  const [showDevice, setShowDevice] = useState('desktop');
+  const [sortedReport, setSortedReport] = useState(lastReport);
+
+  const handleChangeDevice = (newDevice) => {
+    setShowDevice(newDevice);
+    const key = newDevice === 'desktop' ? 'd' : 'm';
+    const sorted = lastReport.length > 0 ? lastReport.sort((a, b) => b[key].perf - a[key].perf) : [];
+    setSortedReport(sorted);
+  };
+
   return (
     <Layout>
       <h3 className="text-gray-900 text-xl font-bold">Last update {lastUpdate}</h3>
 
-      {lastReport.map((item) => (
+      <DeviceChooser activeDevice={showDevice} onChangeDevice={handleChangeDevice} />
+
+      {sortedReport.map((item) => (
         <Link href={`/${item.n.toLowerCase()}`} key={item.n}>
           <a href={`/${item.n.toLowerCase()}`}>
             <div className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
               <img className="h-10 w-auto rounded" src={item.logo} alt={item.n} />
               <div className="flex justify-start">
-                <HomeData data={item} title="Desktop" keyNow="d" keyPrev="dPrev" />
-                <HomeData data={item} title="Mobile" keyNow="m" keyPrev="mPrev" />
+                {showDevice === 'desktop' ? (
+                  <HomeData data={item} title="Desktop" keyNow="d" keyPrev="dPrev" />
+                ) : (
+                  <HomeData data={item} title="Mobile" keyNow="m" keyPrev="mPrev" />
+                )}
               </div>
             </div>
           </a>