From 75f1fe6aa4ef2629ae1c9840a2d4542ac6e62686 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 21 Jul 2021 18:39:03 +0200 Subject: [PATCH] chore: add nasa example to playground --- .gitignore | 1 + index.html | 23 +++++++ playground/src/{views => }/api/jokes.ts | 0 playground/src/{views => }/api/nasa.ts | 0 playground/src/stores/jokes-swrv.ts | 2 +- playground/src/stores/jokes.ts | 2 +- playground/src/stores/jokesUsePromised.ts | 2 +- playground/src/stores/nasa.ts | 57 +++++++++++++++++ playground/src/views/NasaPOD-swrv.vue | 76 +++++++++++++++++++++++ 9 files changed, 160 insertions(+), 3 deletions(-) rename playground/src/{views => }/api/jokes.ts (100%) rename playground/src/{views => }/api/nasa.ts (100%) create mode 100644 playground/src/stores/nasa.ts create mode 100644 playground/src/views/NasaPOD-swrv.vue diff --git a/.gitignore b/.gitignore index ec02ec75..410c9921 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ package-lock.json .DS_Store temp test-dts/tsconfig.tsbuildinfo +.env diff --git a/index.html b/index.html index 5d58b5e6..3d7f1bbc 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,29 @@ href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css" /> +
diff --git a/playground/src/views/api/jokes.ts b/playground/src/api/jokes.ts similarity index 100% rename from playground/src/views/api/jokes.ts rename to playground/src/api/jokes.ts diff --git a/playground/src/views/api/nasa.ts b/playground/src/api/nasa.ts similarity index 100% rename from playground/src/views/api/nasa.ts rename to playground/src/api/nasa.ts diff --git a/playground/src/stores/jokes-swrv.ts b/playground/src/stores/jokes-swrv.ts index 376bdb54..3656bfbc 100644 --- a/playground/src/stores/jokes-swrv.ts +++ b/playground/src/stores/jokes-swrv.ts @@ -1,6 +1,6 @@ import { ref, toRaw, unref, watch } from 'vue' import { acceptHMRUpdate, defineStore } from '../../../src' -import { getRandomJoke, Joke } from '../views/api/jokes' +import { getRandomJoke, Joke } from '../api/jokes' import useSWRV from 'swrv' export const useJokesSetup = defineStore('jokes-swrv-setup', () => { diff --git a/playground/src/stores/jokes.ts b/playground/src/stores/jokes.ts index 8c13f16a..a1911c1f 100644 --- a/playground/src/stores/jokes.ts +++ b/playground/src/stores/jokes.ts @@ -1,6 +1,6 @@ import { ref, unref } from 'vue' import { acceptHMRUpdate, defineStore } from '../../../src' -import { getRandomJoke, Joke } from '../views/api/jokes' +import { getRandomJoke, Joke } from '../api/jokes' export const useJokes = defineStore('jokes', { state: () => ({ diff --git a/playground/src/stores/jokesUsePromised.ts b/playground/src/stores/jokesUsePromised.ts index dfcaf96f..d3648e38 100644 --- a/playground/src/stores/jokesUsePromised.ts +++ b/playground/src/stores/jokesUsePromised.ts @@ -1,5 +1,5 @@ import { acceptHMRUpdate, defineStore } from '../../../src' -import { getRandomJoke, Joke } from '../views/api/jokes' +import { getRandomJoke, Joke } from '../api/jokes' import { usePromise } from 'vue-promised' import { ref, watch } from 'vue' diff --git a/playground/src/stores/nasa.ts b/playground/src/stores/nasa.ts new file mode 100644 index 00000000..8225a44d --- /dev/null +++ b/playground/src/stores/nasa.ts @@ -0,0 +1,57 @@ +import useSWRV from 'swrv' +import { computed, ref } from 'vue' +import { acceptHMRUpdate, defineStore } from '../../../src' +import { getNASAPOD } from '../api/nasa' + +import LocalStorageCache from 'swrv/dist/cache/adapters/localStorage' + +export const useNasaStore = defineStore('nasa-pod-swrv', () => { + // can't go past today + const today = new Date().toISOString().slice(0, 10) + + // const currentDate = computed({ + // get: () => image.value?.date || today, + // set: (date) => { + // // TODO: router push + // } + // }) + + const currentDate = ref(today) + + const { + data: image, + error, + isValidating, + } = useSWRV( + () => `nasa-pod-${currentDate.value}`, + () => getNASAPOD(currentDate.value), + { + refreshInterval: 0, + ttl: 0, + revalidateOnFocus: false, + cache: new LocalStorageCache(), + } + ) + + function incrementDay(date: string) { + const from = new Date(date).getTime() + + currentDate.value = new Date(from + 1000 * 60 * 60 * 24) + .toISOString() + .slice(0, 10) + } + + function decrementDay(date: string) { + const from = new Date(date).getTime() + + currentDate.value = new Date(from - 1000 * 60 * 60 * 24) + .toISOString() + .slice(0, 10) + } + + return { image, currentDate, incrementDay, decrementDay, error, isValidating } +}) + +if (import.meta.hot) { + import.meta.hot.accept(acceptHMRUpdate(useNasaStore, import.meta.hot)) +} diff --git a/playground/src/views/NasaPOD-swrv.vue b/playground/src/views/NasaPOD-swrv.vue new file mode 100644 index 00000000..ba01afd9 --- /dev/null +++ b/playground/src/views/NasaPOD-swrv.vue @@ -0,0 +1,76 @@ + + + + + -- 2.47.2