From ed00e4a052ff0c13f451d6fc7cec67d3218ae830 Mon Sep 17 00:00:00 2001 From: Keyrxng <106303466+Keyrxng@users.noreply.github.com> Date: Sun, 3 Mar 2024 19:18:16 +0000 Subject: [PATCH 1/3] chore: fetch personal pp and add 3 day new issue notifi --- .../fetch-and-display-previews.ts | 26 ++++++++++++------- src/home/fetch-github/fetch-avatar.ts | 16 ++++++++++++ 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/home/fetch-github/fetch-and-display-previews.ts b/src/home/fetch-github/fetch-and-display-previews.ts index db958b7e..23b1f659 100644 --- a/src/home/fetch-github/fetch-and-display-previews.ts +++ b/src/home/fetch-github/fetch-and-display-previews.ts @@ -14,6 +14,8 @@ export type Options = { ordering: "normal" | "reverse"; }; +const NOTIFICATION_EXPIRY_DAYS = 3; + export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, options = { ordering: "normal" }) { let _cachedTasks = getLocalStore(GITHUB_TASKS_STORAGE_KEY) as TaskStorageItems; // makes sure tasks have a timestamp to know how old the cache is, or refresh if older than 15 minutes @@ -22,15 +24,21 @@ export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, option timestamp: Date.now(), tasks: [], }; - } - const cachedTasks = _cachedTasks.tasks.map((task) => ({ ...task, isNew: false, isModified: false })) as TaskMaybeFull[]; - taskManager.syncTasks(cachedTasks); - if (!cachedTasks.length) { - // load from network if there are no cached issues - return fetchAndDisplayPreviewsFromNetwork(sorting, options); } else { - displayGitHubIssues(sorting, options); - return fetchAvatars(); + const cachedTasks = _cachedTasks.tasks.map((task) => ({ + ...task, + isNew: new Date(task.preview.created_at) > new Date(Date.now() - 1000 * 60 * 60 * 24 * NOTIFICATION_EXPIRY_DAYS), + isModified: false, + })) as TaskMaybeFull[]; + taskManager.syncTasks(cachedTasks); + + if (!cachedTasks.length) { + // load from network if there are no cached issues + return fetchAndDisplayPreviewsFromNetwork(sorting, options); + } else { + displayGitHubIssues(sorting, options); + return fetchAvatars(); + } } } @@ -72,7 +80,7 @@ export function verifyGitHubIssueState(cachedTasks: TaskMaybeFull[], fetchedPrev if (taskWithFullTest(cachedTask)) { const cachedFullIssue = cachedTask.full; const isModified = new Date(cachedFullIssue.updated_at) < new Date(fetched.preview.updated_at); - const task = { ...fetched, full: cachedFullIssue, isNew: false, isModified }; + const task = { ...fetched, full: cachedFullIssue, isModified }; return task; } else { // no full issue in task diff --git a/src/home/fetch-github/fetch-avatar.ts b/src/home/fetch-github/fetch-avatar.ts index 4e368ad7..591f7064 100644 --- a/src/home/fetch-github/fetch-avatar.ts +++ b/src/home/fetch-github/fetch-avatar.ts @@ -39,5 +39,21 @@ export async function fetchAvatar(orgName: string) { } } catch (error) { console.error(`Failed to fetch avatar for organization ${orgName}: ${error}`); + const { + data: { avatar_url: avatarUrl }, + } = await octokit.rest.users.getByUsername({ username: orgName }); + if (avatarUrl) { + // Fetch the image as a Blob and save it to IndexedDB + const response = await fetch(avatarUrl); + const blob = await response.blob(); + await saveImageToCache({ + dbName: "GitHubAvatars", + storeName: "ImageStore", + keyName: "name", + orgName: `avatarUrl-${orgName}`, + avatarBlob: blob, + }); + organizationImageCache.set(orgName, blob); + } } } From e766f33b55e7d33733e81474f57442c475f0f814 Mon Sep 17 00:00:00 2001 From: Keyrxng <106303466+Keyrxng@users.noreply.github.com> Date: Mon, 4 Mar 2024 10:09:10 +0000 Subject: [PATCH 2/3] fix: labels and cache --- README.md | 1 - .../fetch-and-display-previews.ts | 26 +++++++------------ static/style/inverted-style.css | 3 +++ static/style/style.css | 3 +++ 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index ffda3f7f..06dd8b1c 100644 --- a/README.md +++ b/README.md @@ -36,4 +36,3 @@ open http://localhost:8080 #### Mobile ![screenshot 2](https://github.com/ubiquity/devpool-directory-ui/assets/4975670/b7861ce7-1f1f-49a9-b8e2-ebb20724ee67) - diff --git a/src/home/fetch-github/fetch-and-display-previews.ts b/src/home/fetch-github/fetch-and-display-previews.ts index 23b1f659..1ef32553 100644 --- a/src/home/fetch-github/fetch-and-display-previews.ts +++ b/src/home/fetch-github/fetch-and-display-previews.ts @@ -14,8 +14,6 @@ export type Options = { ordering: "normal" | "reverse"; }; -const NOTIFICATION_EXPIRY_DAYS = 3; - export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, options = { ordering: "normal" }) { let _cachedTasks = getLocalStore(GITHUB_TASKS_STORAGE_KEY) as TaskStorageItems; // makes sure tasks have a timestamp to know how old the cache is, or refresh if older than 15 minutes @@ -24,21 +22,17 @@ export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, option timestamp: Date.now(), tasks: [], }; - } else { - const cachedTasks = _cachedTasks.tasks.map((task) => ({ - ...task, - isNew: new Date(task.preview.created_at) > new Date(Date.now() - 1000 * 60 * 60 * 24 * NOTIFICATION_EXPIRY_DAYS), - isModified: false, - })) as TaskMaybeFull[]; - taskManager.syncTasks(cachedTasks); + } - if (!cachedTasks.length) { - // load from network if there are no cached issues - return fetchAndDisplayPreviewsFromNetwork(sorting, options); - } else { - displayGitHubIssues(sorting, options); - return fetchAvatars(); - } + const cachedTasks = _cachedTasks.tasks.map((task) => ({ ...task, isNew: false, isModified: false })) as TaskMaybeFull[]; + taskManager.syncTasks(cachedTasks); + + if (!cachedTasks.length) { + // load from network if there are no cached issues + return fetchAndDisplayPreviewsFromNetwork(sorting, options); + } else { + displayGitHubIssues(sorting, options); + return fetchAvatars(); } } diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index eac61fd5..3955f922 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -180,6 +180,9 @@ display: flex; align-items: center; height: 16px; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; } input[type="radio"] { background-color: unset; diff --git a/static/style/style.css b/static/style/style.css index b1b34142..00191628 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -180,6 +180,9 @@ display: flex; align-items: center; height: 16px; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; } input[type="radio"] { background-color: unset; From aec6f8a4e5bd40432855f575bbac6d86829f418a Mon Sep 17 00:00:00 2001 From: Keyrxng <106303466+Keyrxng@users.noreply.github.com> Date: Tue, 5 Mar 2024 20:13:09 +0000 Subject: [PATCH 3/3] chore: remove css and ts for isnew and modified --- .../fetch-github/fetch-and-display-previews.ts | 7 ++----- src/home/getters/get-local-store.ts | 13 +------------ src/home/rendering/render-github-issues.ts | 7 ------- static/style/inverted-style.css | 17 ----------------- static/style/style.css | 17 ----------------- 5 files changed, 3 insertions(+), 58 deletions(-) diff --git a/src/home/fetch-github/fetch-and-display-previews.ts b/src/home/fetch-github/fetch-and-display-previews.ts index 1ef32553..8d88e94a 100644 --- a/src/home/fetch-github/fetch-and-display-previews.ts +++ b/src/home/fetch-github/fetch-and-display-previews.ts @@ -24,7 +24,7 @@ export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, option }; } - const cachedTasks = _cachedTasks.tasks.map((task) => ({ ...task, isNew: false, isModified: false })) as TaskMaybeFull[]; + const cachedTasks = _cachedTasks.tasks as TaskMaybeFull[]; taskManager.syncTasks(cachedTasks); if (!cachedTasks.length) { @@ -73,8 +73,7 @@ export function verifyGitHubIssueState(cachedTasks: TaskMaybeFull[], fetchedPrev if (cachedTask) { if (taskWithFullTest(cachedTask)) { const cachedFullIssue = cachedTask.full; - const isModified = new Date(cachedFullIssue.updated_at) < new Date(fetched.preview.updated_at); - const task = { ...fetched, full: cachedFullIssue, isModified }; + const task = { ...fetched, full: cachedFullIssue }; return task; } else { // no full issue in task @@ -84,8 +83,6 @@ export function verifyGitHubIssueState(cachedTasks: TaskMaybeFull[], fetchedPrev } return { preview: fetched.preview, - isNew: true, - isModified: false, } as TaskNoFull; }); } diff --git a/src/home/getters/get-local-store.ts b/src/home/getters/get-local-store.ts index 530d743c..61a65509 100644 --- a/src/home/getters/get-local-store.ts +++ b/src/home/getters/get-local-store.ts @@ -17,16 +17,5 @@ export function getLocalStore(key: string): TaskStorageItems | OAuthToken | null export function setLocalStore(key: string, value: TaskStorageItems | OAuthToken) { // remove state from issues before saving to local storage - if ("tasks" in value && value.tasks.length && "isNew" in value.tasks[0] && "isModified" in value.tasks[0]) { - const tasksWithoutState = value.tasks.map(({ preview, full }) => ({ - preview, - full, - })); - localStorage[key] = JSON.stringify({ - ...value, - tasks: tasksWithoutState, - }); - } else { - localStorage[key] = JSON.stringify(value); - } + localStorage[key] = JSON.stringify(value); } diff --git a/src/home/rendering/render-github-issues.ts b/src/home/rendering/render-github-issues.ts index de1584b4..d5ef76fb 100644 --- a/src/home/rendering/render-github-issues.ts +++ b/src/home/rendering/render-github-issues.ts @@ -37,13 +37,6 @@ function everyNewIssue({ taskPreview, container }: { taskPreview: TaskMaybeFull; issueElement.setAttribute("data-preview-id", taskPreview.preview.id.toString()); issueElement.classList.add("issue-element-inner"); - if (taskPreview.isNew) { - issueWrapper.classList.add("new-task"); - } - if (taskPreview.isModified) { - issueWrapper.classList.add("modified-task"); - } - const urlPattern = /https:\/\/github\.com\/([^/]+)\/([^/]+)\//; const match = taskPreview.preview.body.match(urlPattern); const organizationName = match?.[1]; diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 3955f922..527c011f 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -321,23 +321,6 @@ .full { display: unset !important; } - .new-task, - .modified-task { - position: relative; - } - .new-task::before, - .modified-task::before { - content: ""; - display: inline-block; - position: absolute; - height: 100%; - width: 4px; - left: 0; - background-color: #00ffff; - } - .modified-task::before { - background-color: #ffff00; - } @media screen and (max-width: 804px) { .mid { display: none !important; diff --git a/static/style/style.css b/static/style/style.css index 00191628..f77636a2 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -321,23 +321,6 @@ .full { display: unset !important; } - .new-task, - .modified-task { - position: relative; - } - .new-task::before, - .modified-task::before { - content: ""; - display: inline-block; - position: absolute; - height: 100%; - width: 4px; - left: 0; - background-color: #0ff; - } - .modified-task::before { - background-color: #ff0; - } @media screen and (max-width: 804px) { .mid { display: none !important;