Fix lint (again)

theseus_gui/src/components/GridDisplay.vue

@@ -1,13 +1,25 @@
 <script setup>
-import {ChevronLeftIcon, ChevronRightIcon} from 'omorphia'
+import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
 import Instance from '@/components/ui/Instance.vue'
-import News from '@/components/ui/News.vue'
-import {onMounted, onUnmounted, ref} from 'vue'
+import { 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,
 })
 const allowPagination = ref(false)
@@ -16,9 +28,6 @@ const newsRow = ref(null)
 // Remove after state is populated with real data
 const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
 const shouldRenderNews = props.news && props.news?.length !== 0
-onUnmounted(() => {
-  if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
-})
 const handleLeftPage = () => {
   if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
   else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
@@ -32,10 +41,10 @@ const handleRightPage = () => {
   <div class="row">
     <div class="header">
       <p>{{ props.label }}</p>
-      <hr>
+      <hr />
       <div v-if="allowPagination" class="pagination">
-        <ChevronLeftIcon @click="handleLeftPage"/>
-        <ChevronRightIcon @click="handleRightPage"/>
+        <ChevronLeftIcon @click="handleLeftPage" />
+        <ChevronRightIcon @click="handleRightPage" />
       </div>
     </div>
     <section ref="modsRow" class="instances">
@@ -129,4 +138,4 @@ const handleRightPage = () => {
     }
   }
 }
-</style>
+</style>

theseus_gui/src/components/RowDisplay.vue

@@ -1,8 +1,8 @@
 <script setup>
-import {ChevronLeftIcon, ChevronRightIcon} from 'omorphia'
+import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
 import Instance from '@/components/ui/Instance.vue'
 import News from '@/components/ui/News.vue'
-import {onMounted, onUnmounted, ref} from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
   instances: {
@@ -61,23 +61,23 @@ const handleRightPage = () => {
   <div class="row">
     <div class="header">
       <p>{{ props.label }}</p>
-      <hr aria-hidden="true"/>
+      <hr aria-hidden="true" />
       <div v-if="allowPagination" class="pagination">
-        <ChevronLeftIcon @click="handleLeftPage"/>
-        <ChevronRightIcon @click="handleRightPage"/>
+        <ChevronLeftIcon @click="handleLeftPage" />
+        <ChevronRightIcon @click="handleRightPage" />
       </div>
     </div>
     <section v-if="shouldRenderNormalInstances" ref="modsRow" class="instances">
       <Instance
-          v-for="instance in props.instances"
-          :key="instance.id"
-          display="card"
-          :instance="instance"
-          class="row-instance"
+        v-for="instance in props.instances"
+        :key="instance.id"
+        display="card"
+        :instance="instance"
+        class="row-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="actualNews in props.news" :key="actualNews.id" :news="actualNews" />
     </section>
   </div>
 </template>
@@ -184,4 +184,4 @@ const handleRightPage = () => {
   min-width: 12rem;
   max-width: 12rem;
 }
-</style>
+</style>

theseus_gui/src/components/ui/Instance.vue

@@ -18,10 +18,17 @@ const props = defineProps({
 
 <template>
   <div>
-    <RouterLink v-if="display === 'list'" class="instance-list-item" :to="`/instance/${props.instance.id}`">{{
-        props.instance.name
-      }}</RouterLink>
-    <Card class="instance-card-item" v-else-if="display === 'card'" @click="this.$router.push(`/instance/${props.instance.id}`)">
+    <RouterLink
+      v-if="display === 'list'"
+      class="instance-list-item"
+      :to="`/instance/${props.instance.id}`"
+      >{{ props.instance.name }}</RouterLink
+    >
+    <Card
+      v-else-if="display === 'card'"
+      class="instance-card-item"
+      @click="$router.push(`/instance/${props.instance.id}`)"
+    >
       <img :src="props.instance.img" alt="Trending mod card" />
       <div class="project-info">
         <p class="title">{{ props.instance.name }}</p>
@@ -121,4 +128,4 @@ const props = defineProps({
     color: #000;
   }
 }
-</style>
+</style>

theseus_gui/src/components/ui/News.vue

@@ -88,4 +88,4 @@ const props = defineProps({
     }
   }
 }
-</style>
+</style>