]> git.ipfire.org Git - thirdparty/vuejs/pinia.git/commitdiff
projects / thirdparty / vuejs / pinia.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 859d094)
chore: add nasa example to playground
authorEduardo San Martin Morote <posva13@gmail.com>
Wed, 21 Jul 2021 16:39:03 +0000 (18:39 +0200)
committerEduardo San Martin Morote <posva13@gmail.com>
Wed, 21 Jul 2021 16:39:03 +0000 (18:39 +0200)
.gitignore patch | blob | blame | history
index.html patch | blob | blame | history
playground/src/api/jokes.ts [moved from playground/src/views/api/jokes.ts with 100% similarity] patch | blob | blame | history
playground/src/api/nasa.ts [moved from playground/src/views/api/nasa.ts with 100% similarity] patch | blob | blame | history
playground/src/stores/jokes-swrv.ts patch | blob | blame | history
playground/src/stores/jokes.ts patch | blob | blame | history
playground/src/stores/jokesUsePromised.ts patch | blob | blame | history
playground/src/stores/nasa.ts [new file with mode: 0644] patch | blob
playground/src/views/NasaPOD-swrv.vue [new file with mode: 0644] patch | blob

diff --git a/.gitignore b/.gitignore
index ec02ec75847b6694e38b469de5462b45aa9c3fb4..410c9921a78c9b12cdfb2f7905e5ae3e0b183b0a 100644 (file)
--- 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 5d58b5e6affe92848020410a2deee1be19c5ca3f..3d7f1bbc03d0b9afcaf6f714a591fd3d04e63899 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,6 +10,29 @@
       href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css"
     />
     <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
+    <style>
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .spinner:before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 30px;
+        height: 30px;
+        margin-top: -15px;
+        margin-left: -15px;
+        border-radius: 50%;
+        border: 1px solid #ccc;
+        border-top-color: #07d;
+        animation: spinner 0.6s linear infinite;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>
diff --git a/playground/src/stores/jokes-swrv.ts b/playground/src/stores/jokes-swrv.ts
index 376bdb54ea00b05d9b9cbe098408521717c3c5c5..3656bfbcf96f511b954458d8028e0a3f249837de 100644 (file)
--- 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 8c13f16a2eca689a7a887ac3f4e11fba01fcaefc..a1911c1f47739c961c44450c0fb162a3aa19c24a 100644 (file)
--- 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 dfcaf96f05af5c7447f36954ca8223813e184e98..d3648e38da19b64b05af2c1b37f15994dab72f9a 100644 (file)
--- 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 (file)
index 0000000..8225a44
--- /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<string>({
+  //   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 (file)
index 0000000..ba01afd
--- /dev/null
+++ b/playground/src/views/NasaPOD-swrv.vue
@@ -0,0 +1,76 @@
+<template>
+  <section>
+    <h2>Nasa Picture of the day</h2>
+
+    <section class="py-4 text-center date-selector">
+      <button @click="decrementDay(currentDate)">Previous Day</button>
+      <p class="inline-block mx-2">
+        <input type="date" v-model="currentDate" />
+      </p>
+      <button
+        @click="incrementDay(currentDate)"
+        :disabled="currentDate >= today"
+      >
+        Next Day
+      </button>
+    </section>
+
+    <template v-if="error">
+      <p>
+        ❌ Error:
+        <br />
+        {{ error }}
+      </p>
+    </template>
+
+    <template v-else-if="isValidating">
+      <div class="spinner"></div>
+    </template>
+
+    <template v-else-if="image">
+      <h3 class="mb-4 text-center">{{ image.title }}</h3>
+
+      <figure class="mb-0">
+        <img
+          class="max-w-full m-auto max-h-[75vh]"
+          :src="image.url"
+          :key="image.url"
+          :alt="image.title"
+        />
+        <figcaption class="mt-2">{{ image.explanation }}</figcaption>
+      </figure>
+    </template>
+
+    <template v-else-if="isValidating">
+      <div class="spinner"></div>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useNasaStore } from '../stores/nasa'
+
+const nasa = useNasaStore()
+
+const today = new Date().toISOString().slice(0, 10)
+
+const { image, error, currentDate, isValidating } = toRefs(nasa.$state)
+const { incrementDay, decrementDay } = nasa
+</script>
+
+<style scoped>
+.date-selector {
+  padding: 1rem 0;
+  text-align: center;
+}
+
+.date-selector > p {
+  display: inline-block;
+  margin: 0 0.4rem;
+}
+
+button {
+  margin: 0;
+}
+</style>
Mirror of https://github.com/vuejs/pinia.git