feat: handle API calls and caching through Vue components

BREAKING CHANGE: API calls and cache no longer made in their respective composable
This commit is contained in:
2023-05-08 03:01:17 +02:00
parent 08825d870b
commit 0a1e9536cd
9 changed files with 176 additions and 134 deletions

View File

@@ -1,46 +0,0 @@
import { Observable, of } from 'rxjs';
const cacheAgeLimitInMilliseconds = 1000 * 60 * 60;
export function isDataOutdated(name: string): boolean {
const lastUpdated: number = +localStorage.getItem(name + '-timestamp');
const now: number = Date.now();
const elapsedTime: number = now - lastUpdated;
return elapsedTime > cacheAgeLimitInMilliseconds;
}
export function storeInCache<T>(
data: Observable<T>,
name: string
): Observable<T> {
data.subscribe({
next: (response: T) => {
localStorage.setItem(name, JSON.stringify(response));
localStorage.setItem(name + '-timestamp', `${Date.now()}`);
},
});
return data;
}
export function readFromCache<T>(
name: string,
callback: () => Observable<T>
): Observable<T> {
let data: Observable<T>;
if (isDataOutdated(name)) {
data = storeInCache<T>(callback(), name);
} else {
let dataFromCache = localStorage.getItem(name);
try {
data = of(JSON.parse(dataFromCache));
} catch (err) {
console.error(
`Could not parse ${JSON.stringify(
dataFromCache
)}: ${err}. Fetching again data from callback function.`
);
data = storeInCache<T>(callback(), name);
}
}
return data;
}

View File

@@ -1,6 +1,3 @@
import { Observable, switchMap, map } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
export interface GithubRepo {
id: number;
node_id: string;
@@ -48,9 +45,9 @@ export interface GithubRepo {
labels_url: string;
releases_url: string;
deployments_url: string;
created_at: Date;
updated_at: Date;
pushed_at: Date;
created_at: string;
updated_at: string;
pushed_at: string;
git_url: string;
ssh_url: string;
clone_url: string;
@@ -107,33 +104,3 @@ export interface GithubError {
message: string;
documentation_url: string;
}
export function getLatestRepositories(
user: string,
amount: number
): Observable<GithubRepo[]> {
return getRepositoriesOfUser(user).pipe(
map((repositories: GithubRepo[]) => {
return repositories
.sort(
(a: GithubRepo, b: GithubRepo) =>
+b.updated_at - +a.updated_at
)
.slice(0, amount);
})
);
}
export function getRepositoriesOfUser(user: string): Observable<GithubRepo[]> {
const fetchUrl = `https://api.github.com/users/${user}/repos`;
return fromFetch(fetchUrl).pipe(
switchMap((response: Response) => {
if (response.ok) {
return response.json();
} else {
console.error(`Error ${response.status}: ${JSON.stringify(response)}`);
return [];
}
}),
);
}