Skip to content

Commit

Permalink
feat(front): add an option to fetch more notifications (#119)
Browse files Browse the repository at this point in the history
* feat(front): add an option to fetch more notifications

* fix

* fix
  • Loading branch information
colinlienard authored Jul 3, 2023
1 parent 36b1f50 commit 7df257b
Show file tree
Hide file tree
Showing 10 changed files with 93 additions and 42 deletions.
5 changes: 3 additions & 2 deletions src/lib/components/common/InlineSelect.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script lang="ts">
type T = $$Generic<string | number>;
export let label: string;
export let options: string[];
export let value: string;
export let options: T[];
export let value: T;
const width = 100 / options.length;
$: index = options.findIndex((option) => option === value);
Expand Down
8 changes: 5 additions & 3 deletions src/lib/components/dashboard/sidebar/TypeFilters.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
import { githubNotifications, loading, settings, typeFilters } from '~/lib/stores';
import { storage } from '~/lib/helpers';
import { Switch } from '~/lib/components';
import { browser } from '$app/environment';
import SidebarSection from './SidebarSection.svelte';
let mounted = false;
// Save type filters to storage
$: if (browser && !$loading) {
$: if (mounted && !$loading) {
storage.set(
'type-filters',
$typeFilters.map((filter) => filter.active)
Expand All @@ -30,13 +31,14 @@
};
}
onMount(async () => {
onMount(() => {
// Get type filters from storage
const savedTypeFilters = storage.get('type-filters');
$typeFilters = $typeFilters.map((filter, index) => ({
...filter,
active: savedTypeFilters ? savedTypeFilters[index] : true
}));
mounted = true;
});
</script>

Expand Down
20 changes: 9 additions & 11 deletions src/lib/components/settings/GithubSettings.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,10 @@
to <strong>Notify me: on GitHub</strong>.
</p>
<span />
<h3>Private repositories</h3>
<p class="text">
To access data in private repositories, you need to grant access to GitLight. You can do so by
creating a Personal Access Token (PAT) on GitHub.
</p>
<Button small on:click={() => ($settingsTab = 2)}>How to use PATs for GitLight</Button>
<span />
<h3>Organization access</h3>
<p class="text">
For private repositories, the GitHub organization that owns these repositories must create a
Personal Access Token (see above), and grant GitLight access to notifications:
For private repositories, the GitHub organization that owns these repositories must grant GitLight
access to notifications:
</p>
<Button
href="/~https://github.com/settings/connections/applications/3db3813c5828d8bbe530"
Expand All @@ -47,6 +40,13 @@
<ExternalLinkIcon />
Organization access
</Button>
<span />
<h3>Private repositories</h3>
<p class="text">
To access data in private repositories, you need to create fine-grained Personal Access Tokens
(PAT) on GitHub.
</p>
<Button small on:click={() => ($settingsTab = 2)}>How to use PATs for GitLight</Button>

<style lang="scss">
.text,
Expand All @@ -56,14 +56,12 @@
}
.list-item {
list-style: disc;
padding-left: 1rem;
position: relative;
&::before {
content: '-';
position: absolute;
top: 0.5rem;
left: 0;
}
Expand Down
14 changes: 12 additions & 2 deletions src/lib/components/settings/Preferences.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
import { settings } from '~/lib/stores';
import type { Settings } from '~/lib/types';
const options: Array<Settings['notificationAxis']> = ['Auto', 'Vertical', 'Horizontal'];
const axisOptions: Array<Settings['notificationAxis']> = ['Auto', 'Vertical', 'Horizontal'];
const numberOptions: Array<Settings['notificationNumber']> = [25, 50, 75, 100];
</script>

<h3>General</h3>
Expand All @@ -17,7 +18,16 @@
/>
<Switch label="Mark an event as read when pinned" bind:active={$settings.readWhenPin} />
<Switch label="Hide closed PRs and issues" bind:active={$settings.showOnlyOpen} />
<InlineSelect
label="Notification number"
options={numberOptions}
bind:value={$settings.notificationNumber}
/>
<span />
<h3>Interface</h3>
<Switch label="Hide sidebar" bind:active={$settings.sidebarHidden} />
<InlineSelect label="Notification axis" {options} bind:value={$settings.notificationAxis} />
<InlineSelect
label="Notification axis"
options={axisOptions}
bind:value={$settings.notificationAxis}
/>
6 changes: 4 additions & 2 deletions src/lib/components/settings/Settings.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
{ name: 'GitHub settings', component: GithubSettings },
{ name: 'Permissions', component: Permissions },
{ name: 'Accounts', component: Accounts },
{ name: 'Update', indicator: !!$updateAvailable, component: Update }
...(browser && window.__TAURI__
? [{ name: 'Update', indicator: !!$updateAvailable, component: Update }]
: [])
] satisfies Array<{ name: string; indicator?: boolean; component: ComponentType }>;
const user = $page.data.session?.user;
Expand Down Expand Up @@ -67,7 +69,7 @@
if (!window.__TAURI__) return;
const release = await fetchGithub<GithubRelease>(
'https://api.github.com/repos/colinlienard/gitlight/releases/latest'
'repos/colinlienard/gitlight/releases/latest'
);
const latest = release.tag_name.split('v')[1];
if (latest !== getAppVersion()) {
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/settings/permissions/PatItem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<div class="pat-wrapper">
{#if editing}
<div class="content">
<p class="text">Repository owner: <strong>{pat.owner}</strong></p>
<p class="text">Resource owner: <strong>{pat.owner}</strong></p>
<p class="text">
Personal Access Token:
{#if showToken}
Expand All @@ -60,7 +60,7 @@
{:else}
<form class="inputs-container" on:submit|preventDefault={handleSave}>
<Input
label="Repositories owner"
label="Resource owner"
placeholder="The user or organization login"
bind:value={pat.owner}
bind:this={firstInput}
Expand Down
35 changes: 21 additions & 14 deletions src/lib/components/settings/permissions/Permissions.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,6 @@
repositories...). <strong>GitLight will only read data in your private repositories</strong>. It
will never write or modify anything.
</p>
<p class="text">
If you are the owner of the private repositories for which you wish to receive notifications,
please follow the steps below.
</p>
<p class="text">If not, you must ask the owner to follow the next steps and give you a token.</p>
<span />
<ShrinkableWrapper shrinked>
<h3 slot="header">Fow those who where using GitLight before version 0.9.0</h3>
Expand All @@ -39,19 +34,25 @@
<p class="list-item">
<strong>Resource owner</strong>: choose the owner of the private repos you want to get
notifications from.
<strong>
The owner might have to <a
href="https://docs.github.com/en/organizations/managing-programmatic-access-to-your-organization/setting-a-personal-access-token-policy-for-your-organization#enforcing-an-approval-policy-for-fine-grained-personal-access-tokens"
target="_blank"
>
approve your token
</a> in order for it to work.
</strong>
</p>
<p class="list-item">
<strong>Repository access</strong>: choose all repos or select some.
<strong>Repository access</strong>: choose all repos or select some. You don't need a PAT for
public repositories.
</p>
<p class="list-item">
<strong>Permissions</strong>: set <strong>Contents</strong>, <strong>Issues</strong>,
<strong>Repository permissions</strong>: set <strong>Contents</strong>, <strong>Issues</strong>,
<strong>Metadata</strong>
and <strong>Pull requests</strong> to <strong>Access: read-only</strong>.
</p>
<p class="list-item">
Generate the token. If you want others to get notifications from your private repos, share this
token.
</p>
<p class="list-item">Generate the token.</p>
<p class="list-item">Finally, add the token below. You can add as many tokens as you want.</p>
<span />
<h3>Use PATs in GitLight</h3>
Expand All @@ -75,15 +76,21 @@
}
.list-item {
list-style: disc;
padding-left: 1rem;
position: relative;
&::before {
content: '-';
position: absolute;
top: 0.5rem;
left: 0;
left: 0rem;
}
a {
color: variables.$blue-3;
&:hover {
text-decoration: underline;
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/lib/stores/stores.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ export const loading = writable<boolean>(true);

export const settings = writable<Settings>({
activateNotifications: true,
readWhenOpenInBrowser: true,
readWhenOpenInBrowser: false,
readWhenPin: false,
notificationNumber: 50,
notificationAxis: 'Auto',
sidebarHidden: false,
showOnlyOpen: false,
Expand Down
1 change: 1 addition & 0 deletions src/lib/types/common-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export type Settings = {
activateNotifications: boolean;
readWhenOpenInBrowser: boolean;
readWhenPin: boolean;
notificationNumber: number;
notificationAxis: 'Auto' | 'Vertical' | 'Horizontal';
sidebarHidden: boolean;
showOnlyOpen: boolean;
Expand Down
39 changes: 34 additions & 5 deletions src/routes/dashboard/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,49 @@
let synced = false;
let mounted = false;
let fetched = false;
const interval = setInterval(() => {
let interval = setInterval(() => {
setNotifications();
}, 60000);
// Clear notifications and refetch when notification number changes
$: notificationNumber = $settings.notificationNumber;
$: if (mounted) {
notificationNumber;
if (!fetched) {
fetched = true;
} else {
$githubNotifications = [];
setNotifications();
clearInterval(interval);
interval = setInterval(() => {
setNotifications();
}, 60000);
}
}
async function setNotifications() {
synced = false;
let newNotifications: NotificationData[] = [];
try {
let notifications = await fetchGithub<GithubNotification[]>('notifications?all=true', {
noCache: true
});
// Fetch notifications from Github with multiple pages
const { notificationNumber } = $settings;
const exceed: number | false = notificationNumber > 50 ? notificationNumber - 50 : false;
let [notifications, page2] = await Promise.all([
fetchGithub<GithubNotification[]>(
`notifications?all=true&page=1&per_page=${Math.min(notificationNumber, 50)}`,
{ noCache: true }
),
exceed
? fetchGithub<GithubNotification[]>(`notifications?all=true&page=2`, { noCache: true })
: undefined
]);
if (page2 && exceed) {
notifications.push(...page2.slice(0, exceed));
}
// Keep only new or modified notifications
if ($githubNotifications.length) {
Expand Down Expand Up @@ -166,7 +195,7 @@
mounted = true;
await setNotifications();
loading.set(false);
$loading = false;
});
onDestroy(() => {
Expand Down

1 comment on commit 7df257b

@vercel
Copy link

@vercel vercel bot commented on 7df257b Jul 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.