refactor pages/user/index.photos.vue to compositon API

packages/client/src/pages/user/index.photos.vue

@@ -17,32 +17,23 @@
 </MkContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
 import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
-	components: {
-		MkContainer,
-		ImgWithBlurhash,
-	},
-	props: {
-		user: {
-			type: Object,
-			required: true
-		},
-	},
-	data() {
-		return {
-			fetching: true,
-			images: [],
-		};
-	},
-	mounted() {
+const props = defineProps<{
+	user: Record<string, any>;
+}>();
+
+let fetching = $ref(true);
+let images = $ref([]);
+
+onMounted(() => {
 	const image = [
 		'image/jpeg',
 		'image/png',
@@ -51,31 +42,28 @@ export default defineComponent({
 		'image/vnd.mozilla.apng',
 	];
 	os.api('users/notes', {
-			userId: this.user.id,
+		userId: props.user.id,
 		fileType: image,
-			excludeNsfw: this.$store.state.nsfw !== 'ignore',
+		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
 		limit: 10,
 	}).then(notes => {
 		for (const note of notes) {
 			for (const file of note.files) {
-					this.images.push({
+				images.push({
 					note,
 					file
 				});
 			}
 		}
-			this.fetching = false;
+		fetching = false;
 	});
-	},
-	methods: {
-		thumbnail(image: any): string {
-			return this.$store.state.disableShowingAnimatedImages
+});
+
+function thumbnail(image: any): string {
+	return defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(image.thumbnailUrl)
 		: image.thumbnailUrl;
-		},
-		notePage
-	},
-});
+}
 </script>
 
 <style lang="scss" scoped>