Add linter

theseus_gui/src/App.vue

@@ -48,7 +48,12 @@ watch(theme, (newState) => {
         </div>
         <div class="instance-list">
           <p>Instances</p>
-          <Instance v-for="instance in instances.instances" display="list" :instance="instance" />
+          <Instance
+            v-for="instance in instances.instances"
+            :key="instance.id"
+            display="list"
+            :instance="instance"
+          />
         </div>
         <Button class="add-instance-btn">
           <PlusIcon />

theseus_gui/src/components/RowDisplay.vue

@@ -5,9 +5,22 @@ import News from '@/components/ui/News.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
-  instances: Array,
-  news: Array,
-  label: String,
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  news: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
   canPaginate: Boolean,
 })
 
@@ -66,7 +79,7 @@ const handleRightPage = () => {
         <ChevronRightIcon @click="handleRightPage" />
       </div>
     </div>
-    <section ref="modsRow" class="instances" v-if="shouldRenderNormalInstances">
+    <section v-if="shouldRenderNormalInstances" ref="modsRow" class="instances">
       <Instance
         v-for="instance in props.instances"
         :key="instance.id"
@@ -74,8 +87,8 @@ const handleRightPage = () => {
         :instance="instance"
       />
     </section>
-    <section ref="newsRow" class="news" v-else-if="shouldRenderNews">
-      <News v-for="news in props.news" :key="news.id" :news="news" />
+    <section v-else-if="shouldRenderNews" ref="newsRow" class="news">
+      <News v-for="newsValue in props.news" :key="newsValue.id" :news="newsValue" />
     </section>
   </div>
 </template>

theseus_gui/src/components/ui/Instance.vue

@@ -3,8 +3,16 @@ import { RouterLink } from 'vue-router'
 import { Card, PlusIcon } from 'omorphia'
 
 const props = defineProps({
-  display: String,
-  instance: Object,
+  display: {
+    type: String,
+    default: '',
+  },
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
 })
 </script>
 
@@ -13,7 +21,7 @@ const props = defineProps({
     <RouterLink v-if="display === 'list'" class="instance-list-item" :to="`${props.instance.id}`">{{
       props.instance.name
     }}</RouterLink>
-    <Card class="instance-card-item" v-else-if="display === 'card'">
+    <Card v-else-if="display === 'card'" class="instance-card-item">
       <img :src="props.instance.img" alt="Trending mod card" />
       <div class="project-info">
         <p class="title">{{ props.instance.name }}</p>

theseus_gui/src/components/ui/News.vue

@@ -2,7 +2,12 @@
 import { Card, ChevronRightIcon } from 'omorphia'
 
 const props = defineProps({
-  news: Object,
+  news: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
 })
 </script>
 

theseus_gui/src/pages/Index.vue

@@ -14,9 +14,9 @@ const popularInstances = instances.instances.filter((i) => i.downloads > 50 || i
 
 <template>
   <div class="page-container">
-    <RowDisplay label="Jump back in" :instances="recentInstances" :canPaginate="false" />
-    <RowDisplay label="Popular packs" :instances="popularInstances" :canPaginate="true" />
-    <RowDisplay label="News & updates" :news="news.news" :canPaginate="true" />
+    <RowDisplay label="Jump back in" :instances="recentInstances" :can-paginate="false" />
+    <RowDisplay label="Popular packs" :instances="popularInstances" :can-paginate="true" />
+    <RowDisplay label="News & updates" :news="news.news" :can-paginate="true" />
   </div>
 </template>