feat: setup

NativeScript · Aug 4, 2024 · 4576d00 · 4576d00
1 parent 031210f
commit 4576d00
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ npm run clean
 
 ## Try TanStack Query
 
-<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/2048px-Angular_full_color_logo.svg.png" width="60"/>
+<img src="https://logosandtypes.com/wp-content/uploads/2024/01/angular.svg" width="60"/>
 
 ```bash
 npx nx run nativescript-query-ng:ios

diff --git a/apps/nativescript-query-ng/src/features/post/components/post.component.html b/apps/nativescript-query-ng/src/features/post/components/post.component.html
@@ -1,20 +1,24 @@
 <ActionBar [title]="'Post ' + postId()"> </ActionBar>
 <GridLayout rows="auto,auto,*,auto" class="p-6">
   @if (postQuery.status() === 'pending') {
-  <Label class="text-black italic text-lg m-2">Loading...</Label>
+
+    <Label class="text-black italic text-lg m-2">Loading...</Label>
+
   } @else if (postQuery.status() === 'error') {
-  <Label class="text-red-500 font-bold text-lg m-2"
-    >Error: {{ postQuery.error()?.message }}</Label
-  >
+
+    <Label class="text-red-500 font-bold text-lg m-2">
+      Error: {{ postQuery.error()?.message }}
+    </Label>
+
   } @if (postQuery.data(); as post) {
-  <Label row="1" class="text-black text-2xl leading-3" textWrap="true">{{
-    post.title
-  }}</Label>
-  <GridLayout row="2" class="mt-6">
-    <Label class="text-black/75 text-lg leading-3 align-top" textWrap="true">{{
-      post.body
+    <Label row="1" class="text-black text-2xl leading-3" textWrap="true">{{
+      post.title
     }}</Label>
-  </GridLayout>
+    <GridLayout row="2" class="mt-6">
+      <Label class="text-black/75 text-lg leading-3 align-top" textWrap="true">{{
+        post.body
+      }}</Label>
+    </GridLayout>
   @if (postQuery.isFetching()) {
 
   <Label row="3" class="text-black/50 italic m-2">Background Updating...</Label>

diff --git a/apps/nativescript-query-ng/src/features/posts/components/posts.component.html b/apps/nativescript-query-ng/src/features/posts/components/posts.component.html
@@ -1,6 +1,8 @@
 <ActionBar title="Tanstack Query"> </ActionBar>
 <GridLayout>
-  <ListView [items]="postsQuery.data()" (itemTap)="viewDetail($event)">
+  <ListView 
+    [items]="postsQuery.data()" 
+    (itemTap)="viewDetail($event)">
     <ng-template let-post="item">
       <StackLayout class="p-4">
         <Label

diff --git a/apps/nativescript-query-ng/src/features/posts/components/posts.component.ts b/apps/nativescript-query-ng/src/features/posts/components/posts.component.ts
@@ -5,9 +5,9 @@ import {
   injectQuery,
   injectQueryClient,
 } from '@tanstack/angular-query-experimental';
+import { stateDidVisit, stateVisitedLinks } from '@org/state';
 import { lastValueFrom, map } from 'rxjs';
 import { PostsService } from '../../../core/services/posts.service';
-import { stateDidVisit, stateVisitedLinks } from '@org/state';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/apps/nativescript-query-vue/src/app.ts b/apps/nativescript-query-vue/src/app.ts
@@ -3,9 +3,9 @@ import { createApp } from 'nativescript-vue';
 import { VueQueryPlugin } from '@tanstack/vue-query'
 import { init } from '@org/nativescript-utils';
 
-import App from './components/App.vue';
+import Posts from './components/Posts.vue';
 
 // init settings
 init();
 
-createApp(App).use(VueQueryPlugin).start();
+createApp(Posts).use(VueQueryPlugin).start();
diff --git a/apps/nativescript-query-vue/src/components/Post.vue b/apps/nativescript-query-vue/src/components/Post.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ref, computed } from 'nativescript-vue';
-import { useQuery } from '@tanstack/vue-query';
 import { apiDetailUrl, Post } from '@org/state';
+import { computed } from 'nativescript-vue';
+import { useQuery } from '@tanstack/vue-query';
 
 const props = defineProps<{
   post: Post;

diff --git a/...vescript-query-vue/src/components/App.vue → ...script-query-vue/src/components/Posts.vue b/...vescript-query-vue/src/components/App.vue → ...script-query-vue/src/components/Posts.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { EventData, ItemEventData, ListView, Page } from '@nativescript/core';
+import { apiUrl, Post, stateDidVisit, stateVisitedLinks } from '@org/state';
 import { computed, $navigateTo } from 'nativescript-vue';
 import { useQuery } from '@tanstack/vue-query';
-import { apiUrl, Post, stateDidVisit, stateVisitedLinks } from '@org/state';
 import PostDetail from './Post.vue';
 
 const fetcher = async (): Promise<Post[]> =>
@@ -14,6 +14,7 @@ const { data, refetch } = useQuery({
 });
 
 const items = computed(() => {
+  console.log('posts updated!', data)
   return (data.value || []).map(stateDidVisit);
 });
 
@@ -44,16 +45,8 @@ function navigatedTo() {
     // only when links have been visited
     // for demonstration purposes, allows list to highlight visited posts green
     refetch();
-    if (list) {
-      list.refresh();
-    }
   }
 }
-
-let list: ListView;
-function loadedList(args) {
-  list = args.object as ListView;
-}
 </script>
 
 <template>
@@ -62,11 +55,7 @@ function loadedList(args) {
       <ActionBar title="Tanstack Query"> </ActionBar>
 
       <GridLayout>
-        <ListView
-          :items="items"
-          @itemTap="navigateToDetails"
-          @loaded="loadedList"
-        >
+        <ListView :items="items" @itemTap="navigateToDetails">
           <template #default="{ item }">
             <StackLayout class="p-4">
               <Label