measure-sh · anupcowkur · Dec 4, 2023 · Dec 4, 2023
diff --git a/measure-web-app/app/[teamId]/anrs/page.tsx b/measure-web-app/app/[teamId]/anrs/page.tsx
@@ -2,10 +2,10 @@ export default function ANRs({ params }: { params: { teamId: string } }) {
   return (
     <main className="flex flex-col items-center justify-between selection:bg-yellow-200/75">
       <div className="flex flex-col items-center md:w-4/5 2xl:w-3/5 px-16">
-        <div className="py-24"/>
+        <div className="py-24" />
         <p className="text-black">ANRs</p>
-        <div className="py-24"/>
-      </div>  
+        <div className="py-24" />
+      </div>
     </main>
   )
 }
diff --git a/measure-web-app/app/[teamId]/apps/page.tsx b/measure-web-app/app/[teamId]/apps/page.tsx
@@ -1,15 +1,14 @@
 "use client"
 
 import CreateApp from "@/app/components/create_app";
-import Dropdown from "@/app/components/dropdown";
 import { getAccessTokenOrRedirectToAuth, logoutIfAuthError } from "@/app/utils/auth_utils";
 import { useRouter } from 'next/navigation';
 import React, { useState, useEffect } from 'react';
 
 
 export default function Apps({ params }: { params: { teamId: string } }) {
   const router = useRouter()
-  
+
   enum AppsApiStatus {
     Loading,
     Success,
@@ -22,10 +21,10 @@ export default function Apps({ params }: { params: { teamId: string } }) {
     "team_id": "",
     "name": "",
     "api_key": {
-        "created_at": "",
-        "key": "",
-        "last_seen": null,
-        "revoked": false
+      "created_at": "",
+      "key": "",
+      "last_seen": null,
+      "revoked": false
     },
     "onboarded": false,
     "created_at": "",
@@ -38,7 +37,7 @@ export default function Apps({ params }: { params: { teamId: string } }) {
   const [apps, setApps] = useState([] as typeof emptyApp[]);
   const [appsApiStatus, setAppsApiStatus] = useState(AppsApiStatus.Loading);
 
-  const getApps = async (teamId:string, ) => {
+  const getApps = async (teamId: string,) => {
     setAppsApiStatus(AppsApiStatus.Loading)
 
     const authToken = await getAccessTokenOrRedirectToAuth(router)
@@ -50,17 +49,17 @@ export default function Apps({ params }: { params: { teamId: string } }) {
     };
 
     const res = await fetch(`${origin}/teams/${teamId}/apps`, opts);
-    
-    if(!res.ok && res.status == 404) {
+
+    if (!res.ok && res.status == 404) {
       setAppsApiStatus(AppsApiStatus.NoApps)
       return
-    } 
+    }
 
-    if(!res.ok) {
+    if (!res.ok) {
       setAppsApiStatus(AppsApiStatus.Error)
       logoutIfAuthError(router, res)
       return
-    } 
+    }
 
     const data = await res.json()
 
@@ -74,48 +73,48 @@ export default function Apps({ params }: { params: { teamId: string } }) {
 
   return (
     <div className="flex flex-col selection:bg-yellow-200/75 items-start p-24 pt-8">
-      <div className="py-4"/>
+      <div className="py-4" />
       <p className="font-display font-regular text-black text-4xl max-w-6xl text-center">Apps</p>
-      <div className="py-4"/>
+      <div className="py-4" />
       {/* Loading message for apps */}
       {appsApiStatus === AppsApiStatus.Loading && <p className="text-lg font-display">Updating Apps...</p>}
 
       {/* Error message for apps fetch error */}
       {appsApiStatus === AppsApiStatus.Error && <p className="text-lg font-display">Error fetching apps, please refresh page to try again</p>}
 
       {/* Show list of apps if app fetch succeeds */}
-      {appsApiStatus === AppsApiStatus.Success && 
+      {appsApiStatus === AppsApiStatus.Success &&
         <div>
-          {apps.map(({id, name, unique_identifier, platform, api_key, created_at}) => (
+          {apps.map(({ id, name, unique_identifier, platform, api_key, created_at }) => (
             <div key={id + 'app-details'} className="font-sans">
               <div className="flex flex-col">
                 <p className="text-xl font-semibold">{name}</p>
-                <div className="py-1"/>
+                <div className="py-1" />
                 <p>Package name: {unique_identifier}</p>
-                <div className="py-1"/>
+                <div className="py-1" />
                 <p>Platform: {platform}</p>
-                <div className="py-1"/>
+                <div className="py-1" />
                 <p>Created at: {created_at}</p>
               </div>
               <div key={id + 'app-api-key'} className="flex flex-row items-center">
                 <p>API key</p>
-                <div className="px-2"/>
-                <input id="api-key-input" type="text" value={api_key.key} className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400"/>
+                <div className="px-2" />
+                <input id="api-key-input" type="text" value={api_key.key} className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400" />
                 <button className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display text-black transition-colors duration-100 py-2 px-4" onClick={() => navigator.clipboard.writeText(api_key.key)}>Copy</button>
               </div>
-              <div className="py-8"/>
+              <div className="py-8" />
             </div>
           ))}
-          <div className="w-full border border-black h-0"/>
-          <div className="py-4"/>
-      </div>
+          <div className="w-full border border-black h-0" />
+          <div className="py-4" />
+        </div>
       }
-        
+
       {/* Show no apps message when no apps exist */}
       {appsApiStatus === AppsApiStatus.NoApps && <p className="text-lg font-display">Looks like you don&apos;t have any apps yet. Get started by creating your first app!</p>}
-      
-      <div className="py-4"/>
-      <CreateApp teamId={params.teamId}/>
+
+      <div className="py-4" />
+      <CreateApp teamId={params.teamId} />
     </div>
   )
 }
diff --git a/measure-web-app/app/[teamId]/crashes/[crashId]/page.tsx b/measure-web-app/app/[teamId]/crashes/[crashId]/page.tsx
@@ -180,7 +180,7 @@ const stackTraces = [
   },
 ]
 
-export default function CrashDetails({ params }: { params: { teamId:string, crashId: string } }) {
+export default function CrashDetails({ params }: { params: { teamId: string, crashId: string } }) {
   var apps = ['Readly prod', 'Readly alpha', 'Readly debug'];
   const [selectedApp, setSelectedApp] = useState(apps[0]);
 
@@ -190,19 +190,19 @@ export default function CrashDetails({ params }: { params: { teamId:string, cras
   var countries = ['India', 'China', 'USA'];
   const [selectedCountries, setSelectedCountries] = useState(new Array<string>());
 
-  var networkProviders = ['Airtel', 'Jio','Vodafone'];
+  var networkProviders = ['Airtel', 'Jio', 'Vodafone'];
   const [selectedNetworkProviders, setSelectedNetworkProviders] = useState(new Array<string>());
 
-  var networkTypes = ['Wifi', '5G','4G', '3G', '2G', 'Edge'];
+  var networkTypes = ['Wifi', '5G', '4G', '3G', '2G', 'Edge'];
   const [selectedNetworkTypes, setSelectedNetworkTypes] = useState(new Array<string>());
 
-  var locales = ['en-in', 'en-us','en-uk'];
+  var locales = ['en-in', 'en-us', 'en-uk'];
   const [selectedLocales, setSelectedLocales] = useState(new Array<string>());
 
-  var deviceManufacturers = ['Samsung', 'Huawei','Motorola'];
+  var deviceManufacturers = ['Samsung', 'Huawei', 'Motorola'];
   const [selectedDeviceManufacturers, setSelectedDeviceManufacturers] = useState(new Array<string>());
 
-  var deviceNames = ['Samsung Galaxy Note 2', 'Motorola Razor V2','Huawei P30 Pro']
+  var deviceNames = ['Samsung Galaxy Note 2', 'Motorola Razor V2', 'Huawei P30 Pro']
   const [selectedDeviceNames, setSelectedDeviceNames] = useState(new Array<string>());
 
   const today = new Date();
@@ -222,64 +222,64 @@ export default function CrashDetails({ params }: { params: { teamId:string, cras
 
   return (
     <div className="flex flex-col selection:bg-yellow-200/75 items-start p-24 pt-8">
-      <div className="py-4"/>
+      <div className="py-4" />
       <p className="font-display font-regular text-black text-4xl max-w-6xl text-center">NullPointerException.java</p>
-      <div className="py-4"/>
+      <div className="py-4" />
       <div className="flex flex-wrap gap-8 items-center w-5/6">
         <Dropdown items={apps} onChangeSelectedItem={(item) => setSelectedApp(item)} />
         <div className="flex flex-row items-center">
           <input type="date" defaultValue={startDate} max={endDate} className="font-display text-black border border-black rounded-md p-2" onChange={(e) => setStartDate(e.target.value)} />
           <p className="text-black font-display px-2">to</p>
           <input type="date" defaultValue={endDate} min={startDate} className="font-display text-black border border-black rounded-md p-2" onChange={(e) => setEndDate(e.target.value)} />
         </div>
-        <CheckboxDropdown title="App versions" items={versions} onChangeSelectedItems={(items) => setSelectedVersions(items)}/>
-        <CheckboxDropdown title="Country" items={countries} onChangeSelectedItems={(items) => setSelectedCountries(items)}/>
-        <CheckboxDropdown title="Network Provider" items={networkProviders} onChangeSelectedItems={(items) => setSelectedNetworkProviders(items)}/>
-        <CheckboxDropdown title="Network type" items={networkTypes} onChangeSelectedItems={(items) => setSelectedNetworkTypes(items)}/>
-        <CheckboxDropdown title="Locale" items={locales} onChangeSelectedItems={(items) => setSelectedLocales(items)}/>
-        <CheckboxDropdown title="Device Manufacturer" items={deviceManufacturers} onChangeSelectedItems={(items) => setSelectedDeviceManufacturers(items)}/>
-        <CheckboxDropdown title="Device Name" items={deviceNames} onChangeSelectedItems={(items) => setSelectedDeviceNames(items)}/>
+        <CheckboxDropdown title="App versions" items={versions} onChangeSelectedItems={(items) => setSelectedVersions(items)} />
+        <CheckboxDropdown title="Country" items={countries} onChangeSelectedItems={(items) => setSelectedCountries(items)} />
+        <CheckboxDropdown title="Network Provider" items={networkProviders} onChangeSelectedItems={(items) => setSelectedNetworkProviders(items)} />
+        <CheckboxDropdown title="Network type" items={networkTypes} onChangeSelectedItems={(items) => setSelectedNetworkTypes(items)} />
+        <CheckboxDropdown title="Locale" items={locales} onChangeSelectedItems={(items) => setSelectedLocales(items)} />
+        <CheckboxDropdown title="Device Manufacturer" items={deviceManufacturers} onChangeSelectedItems={(items) => setSelectedDeviceManufacturers(items)} />
+        <CheckboxDropdown title="Device Name" items={deviceNames} onChangeSelectedItems={(items) => setSelectedDeviceNames(items)} />
         <div className="w-full">
           <p className="font-sans text-black">Filter by any field such as userId, device name etc</p>
-          <div className="py-1"/>
-          <input id="search-string" type="text" placeholder="userId: abcde123, deviceName: Samsung Galaxy" className="w-full border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400"/>
+          <div className="py-1" />
+          <input id="search-string" type="text" placeholder="userId: abcde123, deviceName: Samsung Galaxy" className="w-full border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400" />
         </div>
       </div>
-      <div className="py-4"/>
+      <div className="py-4" />
       <div className="flex flex-wrap gap-2 items-center w-5/6">
         <FilterPill title={selectedApp} />
         <FilterPill title={`${formattedStartDate} to ${formattedEndDate}`} />
-        {selectedVersions.length > 0 && <FilterPill title={Array.from(selectedVersions).join(', ')}/>}
-        {selectedCountries.length > 0 && <FilterPill title={Array.from(selectedCountries).join(', ')}/>}
-        {selectedNetworkProviders.length > 0 && <FilterPill title={Array.from(selectedNetworkProviders).join(', ')}/>}
-        {selectedNetworkTypes.length > 0 && <FilterPill title={Array.from(selectedNetworkTypes).join(', ')}/>}
-        {selectedLocales.length > 0 && <FilterPill title={Array.from(selectedLocales).join(', ')}/>}
-        {selectedDeviceManufacturers.length > 0 && <FilterPill title={Array.from(selectedDeviceManufacturers).join(', ')}/>}
-        {selectedDeviceNames.length > 0 && <FilterPill title={Array.from(selectedDeviceNames).join(', ')}/>}
+        {selectedVersions.length > 0 && <FilterPill title={Array.from(selectedVersions).join(', ')} />}
+        {selectedCountries.length > 0 && <FilterPill title={Array.from(selectedCountries).join(', ')} />}
+        {selectedNetworkProviders.length > 0 && <FilterPill title={Array.from(selectedNetworkProviders).join(', ')} />}
+        {selectedNetworkTypes.length > 0 && <FilterPill title={Array.from(selectedNetworkTypes).join(', ')} />}
+        {selectedLocales.length > 0 && <FilterPill title={Array.from(selectedLocales).join(', ')} />}
+        {selectedDeviceManufacturers.length > 0 && <FilterPill title={Array.from(selectedDeviceManufacturers).join(', ')} />}
+        {selectedDeviceNames.length > 0 && <FilterPill title={Array.from(selectedDeviceNames).join(', ')} />}
       </div>
-      <div className="py-6"/>
+      <div className="py-6" />
       <div className="flex flex-col md:flex-row w-full">
         <div className="border border-black text-black font-sans text-sm w-full h-[24rem]">
-          <ExceptionCountChart/>
+          <ExceptionCountChart />
         </div>
-        <div className="p-2"/>
+        <div className="p-2" />
         <div className="border border-black text-black font-sans text-sm w-full h-[24rem]">
-          <UserFlowCrashDetails/>
+          <UserFlowCrashDetails />
         </div>
       </div>
-      <div className="py-8"/>
+      <div className="py-8" />
       <p className="text-black font-display text-3xl"> Stack trace</p>
-      <div className="py-2"/>
+      <div className="py-2" />
       <div>
-          {stackTraces.map((stackTrace, index) => (
-            <Accordion key={index} title={stackTrace.title} id={`stackTraces-${index}`} active={stackTrace.active}>
-              {stackTrace.text}
-            </Accordion>
-          ))}
+        {stackTraces.map((stackTrace, index) => (
+          <Accordion key={index} title={stackTrace.title} id={`stackTraces-${index}`} active={stackTrace.active}>
+            {stackTrace.text}
+          </Accordion>
+        ))}
       </div>
-      <div className="py-8"/>
+      <div className="py-8" />
       <p className="text-black font-display text-3xl"> Latest Sessions with NullpointerException.java</p>
-      <div className="py-4"/>
+      <div className="py-4" />
       <div className="table text-black font-sans border border-black w-full">
         <div className="table-header-group border border-black">
           <div className="table-row">
@@ -289,12 +289,12 @@ export default function CrashDetails({ params }: { params: { teamId:string, cras
           </div>
         </div>
         <div className="table-row-group">
-          {sessions.map(({id, userId, dateTime }) => (
-              <Link key={id} href={`/${params.teamId}/sessions/${id}`} className="table-row hover:bg-yellow-200 active:bg-yellow-300">
-                <div className="table-cell border border-black p-2 text-center">{id}</div>
-                <div className="table-cell border border-black p-2 text-center">{userId}</div>
-                <div className="table-cell border border-black p-2 text-center">{dateTime}</div>
-              </Link>
+          {sessions.map(({ id, userId, dateTime }) => (
+            <Link key={id} href={`/${params.teamId}/sessions/${id}`} className="table-row hover:bg-yellow-200 active:bg-yellow-300">
+              <div className="table-cell border border-black p-2 text-center">{id}</div>
+              <div className="table-cell border border-black p-2 text-center">{userId}</div>
+              <div className="table-cell border border-black p-2 text-center">{dateTime}</div>
+            </Link>
           ))}
         </div>
       </div>