feat: Fetch reg.json data

src/components/Main/Main.tsx

@@ -46,6 +46,12 @@ const Content: React.FC<{ variant: RegVariant; entities: RegEntity[] }> = ({
   const notification = NotificationContainer.useContainer();
   const title = titles[variant];
 
+  const createLinkToDetail = useCallback((id: string) => {
+    const params = new URL(location.href).searchParams;
+    params.set('id', id);
+    return '?' + params.toString();
+  }, []);
+
   const handleCopy = useCallback(() => {
     notification.notify('Copied URL to clipboard');
   }, [notification]);
@@ -65,7 +71,7 @@ const Content: React.FC<{ variant: RegVariant; entities: RegEntity[] }> = ({
       >
         {({ item: entity }) => (
           <Card
-            href={`?id=${entity.id}`}
+            href={createLinkToDetail(entity.id)}
             entity={entity}
             menus={[]}
             onCopy={handleCopy}

src/index.tsx

@@ -4,19 +4,29 @@ import { hot } from 'react-hot-loader';
 import type { RegData } from './types/reg';
 import { App } from './App';
 import { WorkerClient } from './worker-client';
-
-const regData = (window as any)['__reg__'] as RegData;
-
-// x-img-diff
-const workerClient = new WorkerClient();
-const ximgdiffConfig = regData.ximgdiffConfig || { enabled: false };
-
-workerClient.start(ximgdiffConfig);
+import { fetchData } from './utils/fetchData';
 
 // Report App
 const HotApp = hot(module)(App);
 
-render(
-  <HotApp data={regData} worker={workerClient} />,
-  document.getElementById('app'),
-);
+async function bootstrap() {
+  const regData = (window as any)['__reg__'] as RegData;
+  const jsonUrlParam = new URL(location.href).searchParams.get('reg-json-uri');
+  if (jsonUrlParam) {
+    return await fetchData(decodeURIComponent(jsonUrlParam));
+  } else {
+    return regData;
+  }
+}
+
+bootstrap().then((regData) => {
+  // x-img-diff
+  const workerClient = new WorkerClient();
+  const ximgdiffConfig = regData.ximgdiffConfig || { enabled: false };
+
+  workerClient.start(ximgdiffConfig);
+  render(
+    <HotApp data={regData} worker={workerClient} />,
+    document.getElementById('app'),
+  );
+});

src/utils/fetchData.ts

@@ -0,0 +1,57 @@
+import type { RegData, RegItem } from '../types/reg';
+
+type RawRegJson = {
+  actualDir: string;
+  expectedDir: string;
+  diffDir: string;
+  failedItems: string[];
+  newItems: string[];
+  passedItems: string[];
+  deletedItems: string[];
+};
+
+const string2Entity = (raw: string): RegItem => ({
+  raw,
+  encoded: encodeURIComponent(raw),
+});
+
+function convertRawJson2RegData(rawData: RawRegJson) {
+  const regData: RegData = {
+    ...rawData,
+    deletedItems: rawData.deletedItems.map(string2Entity),
+    failedItems: rawData.failedItems.map(string2Entity),
+    newItems: rawData.newItems.map(string2Entity),
+    passedItems: rawData.passedItems.map(string2Entity),
+    hadPassed: rawData.passedItems.length > 0,
+    hasDeleted: rawData.deletedItems.length > 0,
+    hasFailed: rawData.failedItems.length > 0,
+    hasNew: rawData.newItems.length > 0,
+    links: [],
+    type:
+      rawData.deletedItems.length +
+        rawData.newItems.length +
+        rawData.failedItems.length ===
+      0
+        ? 'success'
+        : 'danger',
+    ximgdiffConfig: {
+      enabled: false,
+    },
+  };
+  return regData;
+}
+
+export async function fetchData(jsonUrl: string) {
+  const urlObj = new URL(jsonUrl);
+  urlObj.pathname = urlObj.pathname.replace(/\/[^/]+$/, '');
+  const baseUri = urlObj.toString();
+  const res = await fetch(jsonUrl);
+  const raw = (await res.json()) as RawRegJson;
+  const regData = convertRawJson2RegData(raw);
+  return {
+    ...regData,
+    expectedDir: baseUri + '/' + regData.expectedDir.replace(/^\.\//, ''),
+    actualDir: baseUri + '/' + regData.actualDir.replace(/^\.\//, ''),
+    diffDir: baseUri + '/' + regData.diffDir.replace(/^\.\//, ''),
+  } as RegData;
+}