From 17471632c03d890c39a6e1c5fa5a314b2b6b2f5a Mon Sep 17 00:00:00 2001
From: "Lucian I. Last"
Date: Mon, 24 Jul 2023 13:52:26 +0200
Subject: [PATCH] Fix generate open source page loading time
---
app/.prettierignore | 3 +-
app/generate-open-source-page.js | 56 ++++++++++++---------
app/src/api.ts | 11 ++++
app/src/pages/OpenSource.tsx | 86 +++++++++++++++++++++++++++-----
4 files changed, 119 insertions(+), 37 deletions(-)
diff --git a/app/.prettierignore b/app/.prettierignore
index d58eb17eb..2120acc98 100644
--- a/app/.prettierignore
+++ b/app/.prettierignore
@@ -3,4 +3,5 @@
/.vscode
/build
/.idea
-/ios
\ No newline at end of file
+/ios
+/public/open_source_licenses.json
\ No newline at end of file
diff --git a/app/generate-open-source-page.js b/app/generate-open-source-page.js
index 64c51fe3b..bc2fe4ec0 100644
--- a/app/generate-open-source-page.js
+++ b/app/generate-open-source-page.js
@@ -1,26 +1,36 @@
-import pkg from 'nlf';
+import pkg from "nlf";
import * as fs from "fs";
-pkg.find({directory: './', reach: 1}, function (err, data) {
- let result = {};
- data.forEach(d => {
- d?.licenseSources.package.sources.forEach(ls => {
- if (result[ls.license] === undefined) {
- result[ls.license] = new Set;
- }
- result[ls.license].add(d?.name);
- })
- })
- for (let ls in result) {
- result[ls] = [...result[ls]];
- }
- fs.writeFile(
- "public/open_source_licenses.json",
- JSON.stringify(result, null, 4),
- {flag: "w"},
- function (err) {
- if (err) {
- return console.log(err);
- }
- });
+pkg.find({ directory: "./", reach: 1 }, function (err, data) {
+ let result = {};
+ data.forEach((d) => {
+ d?.licenseSources.package.sources.forEach((ls) => {
+ if (result[ls.license] === undefined) {
+ result[ls.license] = new Set();
+ }
+ result[ls.license].add(d?.name);
+ });
+ });
+ for (let ls in result) {
+ result[ls] = [...result[ls]];
+ }
+
+ let licenses = [];
+ for (const license in result) {
+ licenses.push({
+ name: license,
+ modules: result[license],
+ });
+ }
+
+ fs.writeFile(
+ "public/open_source_licenses.json",
+ JSON.stringify(licenses, null, 4),
+ { flag: "w" },
+ function (err) {
+ if (err) {
+ return console.log(err);
+ }
+ },
+ );
});
diff --git a/app/src/api.ts b/app/src/api.ts
index 8a08cd548..64238cc78 100644
--- a/app/src/api.ts
+++ b/app/src/api.ts
@@ -228,3 +228,14 @@ export function uploadImage(
thumb: string;
}>("/v2/image", image64, { params });
}
+
+export interface OpenSourceLicense {
+ name: string;
+ modules: Array;
+}
+
+export function getOpenSouceLicenses() {
+ return window.axios.get("/open_source_licenses.json", {
+ baseURL: "",
+ });
+}
diff --git a/app/src/pages/OpenSource.tsx b/app/src/pages/OpenSource.tsx
index 13144be3b..aefd50a92 100644
--- a/app/src/pages/OpenSource.tsx
+++ b/app/src/pages/OpenSource.tsx
@@ -4,11 +4,15 @@ import {
IonContent,
IonHeader,
IonIcon,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
IonItem,
IonItemDivider,
IonItemGroup,
IonList,
+ IonLoading,
IonPage,
+ IonSkeletonText,
IonText,
IonTitle,
IonToolbar,
@@ -16,15 +20,11 @@ import {
import { useTranslation } from "react-i18next";
import OpenSourceLicenses from "../../public/open_source_licenses.json";
import { openOutline } from "ionicons/icons";
-
-export interface OpenSourceLicense {
- name: string;
- modules: Array;
-}
+import { useEffect, useMemo, useState } from "react";
+import { OpenSourceLicense, getOpenSouceLicenses } from "../api";
function ReadLicenses(): Array {
let licenses: Array = [];
- console.log(OpenSourceLicenses);
for (const license in OpenSourceLicenses) {
licenses.push({
name: license,
@@ -36,6 +36,45 @@ function ReadLicenses(): Array {
export default function OpenSource() {
const { t } = useTranslation();
+ const [readLicenses, setReadLicenses] = useState([]);
+ const [page, setPage] = useState(50);
+
+ useEffect(() => {
+ getOpenSouceLicenses().then((licenses) => {
+ setReadLicenses(licenses.data);
+ });
+ }, []);
+
+ const shownLicenses = useMemo(() => {
+ let result: OpenSourceLicense[] = [];
+ let licenseIndex = 0;
+ for (let j = 0; j < page; j++) {
+ let currentLicense = readLicenses[licenseIndex];
+ if (!currentLicense) break;
+ let moduleIndex = 0;
+ let shownModules: string[] = [];
+ while (j < page) {
+ let currentModule = currentLicense.modules[moduleIndex];
+ if (!currentModule) {
+ j++;
+ break;
+ }
+ shownModules.push(currentModule);
+
+ moduleIndex++;
+ j++;
+ }
+ result.push({
+ name: currentLicense.name,
+ modules: shownModules,
+ });
+
+ licenseIndex++;
+ j++;
+ }
+ return result;
+ }, [page, readLicenses]);
+
return (
@@ -53,11 +92,30 @@ export default function OpenSource() {
-
- {ReadLicenses().map((license) => (
-
- ))}
-
+ {shownLicenses.length ? (
+
+ {shownLicenses.map((license) => (
+
+ ))}
+
+ ) : (
+
+
+
+
+
+ )}
+
+ {
+ console.log("run onInfiniteScroll");
+
+ setPage((s) => s + 200);
+ setTimeout(() => e.target.complete(), 300);
+ }}
+ >
+
+
@@ -65,12 +123,14 @@ export default function OpenSource() {
}
function LicenseItem(props: { licenseItem: OpenSourceLicense }) {
+ let items = props.licenseItem.modules;
+
return (
{props.licenseItem.name}
- {props.licenseItem.modules.map((module) => (
-
+ {items.map((module) => (
+
{module}