updated lists index to use typescript and composition api

This commit is contained in:
Edward Tirado Jr 2025-04-06 17:30:14 -05:00
parent e335601ab8
commit d339424e7a
3 changed files with 34 additions and 29 deletions

9
.idea/workspace.xml generated
View file

@ -6,11 +6,7 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment=""> <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nuxt.config.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/tsconfig.json" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -25,6 +21,7 @@
<list> <list>
<option value="CSS File" /> <option value="CSS File" />
<option value="Vue Single File Component" /> <option value="Vue Single File Component" />
<option value="TypeScript File" />
</list> </list>
</option> </option>
</component> </component>
@ -130,7 +127,7 @@
<workItem from="1673397538637" duration="47416000" /> <workItem from="1673397538637" duration="47416000" />
<workItem from="1673508732689" duration="1316000" /> <workItem from="1673508732689" duration="1316000" />
<workItem from="1673547794038" duration="2346000" /> <workItem from="1673547794038" duration="2346000" />
<workItem from="1743904898331" duration="4240000" /> <workItem from="1743904898331" duration="10658000" />
</task> </task>
<servers /> <servers />
</component> </component>

View file

@ -13,30 +13,32 @@
</div> </div>
</template> </template>
<script> <script lang="ts" setup>
export default { import type { MovieList } from "~/types/movielist";
name: "index",
data: () => ({ const lists = defineModel<MovieList[]>("movie_list", { default: [] });
lists: [], const updateLists = async function () {
}), let config = useRuntimeConfig();
methods: { const { data, status, error } = await useFetch<MovieList[]>(
getLists: function () { `${config.public.apiURL}/lists`,
let config = useRuntimeConfig(); {
fetch(`${config.public.apiURL}/lists`, { method: "GET",
method: "GET", headers: { "Content-type": "application/json" },
headers: {"Content-type": "application/json"}
})
.then(response => response.json())
.then(json => this.lists = json)
.catch(err => console.log(err))
}, },
}, );
mounted() {
this.getLists() if (error) {
if (error.value?.statusCode === 401) {
console.log("unauthorized");
}
} else {
lists.value = data.value || [];
} }
} };
onMounted(() => {
updateLists();
});
</script> </script>
<style scoped> <style scoped></style>
</style>

6
src/types/movielist.ts Normal file
View file

@ -0,0 +1,6 @@
export type MovieList = {
id: number;
name: string;
public: boolean;
movie_count: number;
};