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 db958b7e..8d88e94a 100644 --- a/src/home/fetch-github/fetch-and-display-previews.ts +++ b/src/home/fetch-github/fetch-and-display-previews.ts @@ -23,8 +23,10 @@ export async function fetchAndDisplayPreviewsFromCache(sorting?: Sorting, option tasks: [], }; } - 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) { // load from network if there are no cached issues return fetchAndDisplayPreviewsFromNetwork(sorting, options); @@ -71,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, isNew: false, isModified }; + const task = { ...fetched, full: cachedFullIssue }; return task; } else { // no full issue in task @@ -82,8 +83,6 @@ export function verifyGitHubIssueState(cachedTasks: TaskMaybeFull[], fetchedPrev } return { preview: fetched.preview, - isNew: true, - isModified: false, } as TaskNoFull; }); } 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); + } } } 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 eac61fd5..527c011f 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; @@ -318,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 b1b34142..f77636a2 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; @@ -318,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;