Fix more typing issues (#928)

* Fix or comment several ts-ignores

* Fix typing related to BaseOverflowButton

* Remove unused functionality of useCookbooks, fix usage bug

* Fix more typing, add some comments

* Only allow ts-ignore if it has a comment

frontend/composables/recipes/use-recipe-meta.ts

@@ -2,13 +2,12 @@ import { Ref } from "@nuxtjs/composition-api";
 // import { useStaticRoutes } from "../api";
 import { Recipe } from "~/types/api-types/recipe";
 
-export const useRecipeMeta = (recipe: Ref<Recipe>) => {
+export const useRecipeMeta = (recipe: Ref<Recipe | null>) => {
   // const { recipeImage } = useStaticRoutes();
   return () => {
     const imageURL = "";
     return {
       title: recipe?.value?.name,
-      // @ts-ignore
       mainImage: imageURL,
       meta: [
         { hid: "og:title", property: "og:title", content: recipe?.value?.name || "Recipe" },

frontend/composables/recipes/use-recipes.ts

@@ -1,11 +1,10 @@
 import { useAsync, ref } from "@nuxtjs/composition-api";
-import { set } from "@vueuse/core";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
 import { Recipe } from "~/types/api-types/recipe";
 
-export const allRecipes = ref<Recipe[] | null>([]);
-export const recentRecipes = ref<Recipe[] | null>([]);
+export const allRecipes = ref<Recipe[]>([]);
+export const recentRecipes = ref<Recipe[]>([]);
 
 const rand = (n: number) => Math.floor(Math.random() * n);
 
@@ -60,7 +59,7 @@ export const useSorter = () => {
 export const useLazyRecipes = function () {
   const api = useUserApi();
 
-  const recipes = ref<Recipe[] | null>([]);
+  const recipes = ref<Recipe[]>([]);
 
   async function fetchMore(start: number, limit: number) {
     const { data } = await api.recipes.getAll(start, limit);
@@ -100,8 +99,7 @@ export const useRecipes = (all = false, fetchRecipes = true) => {
   async function refreshRecipes() {
     const { data } = await api.recipes.getAll(start, end);
     if (data) {
-      // @ts-ignore
-      set(recipes, data);
+      recipes.value = data;
     }
   }
 

frontend/composables/use-backups.ts

@@ -1,5 +1,4 @@
 import { useAsync, ref, reactive } from "@nuxtjs/composition-api";
-import { set } from "@vueuse/core";
 import { toastLoading, loader } from "./use-toast";
 import { AllBackups, ImportBackup } from "~/api/class-interfaces/backups";
 import { useUserApi } from "~/composables/api";
@@ -11,8 +10,7 @@ const backups = ref<AllBackups>({
 
 function setBackups(newBackups: AllBackups | null) {
   if (newBackups) {
-    // @ts-ignore
-    set(backups, newBackups);
+    backups.value = newBackups;
   }
 }
 

frontend/composables/use-group-cookbooks.ts

@@ -1,4 +1,4 @@
-import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
+import { useAsync, ref, Ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "./use-utils";
 import { useUserApi } from "~/composables/api";
 import { CookBook } from "~/api/class-interfaces/group-cookbooks";
@@ -24,16 +24,6 @@ export const useCookbook = function () {
 export const useCookbooks = function () {
   const api = useUserApi();
   const loading = ref(false);
-  const deleteTargetId = ref(0);
-  const validForm = ref(true);
-
-  //  @ts-ignore
-  const workingCookbookData: CookBook = reactive({
-    id: 0,
-    name: "",
-    position: 1,
-    categories: [],
-  });
 
   const actions = {
     getAll() {
@@ -68,7 +58,6 @@ export const useCookbooks = function () {
         this.refreshAll();
       }
 
-      this.resetWorking();
       loading.value = false;
     },
     async updateOne(updateData: CookBook) {
@@ -110,18 +99,6 @@ export const useCookbooks = function () {
         this.refreshAll();
       }
     },
-    resetWorking() {
-      workingCookbookData.id = 0;
-      workingCookbookData.name = "";
-      workingCookbookData.position = 0;
-      workingCookbookData.categories = [];
-    },
-    setWorking(item: CookBook) {
-      workingCookbookData.id = item.id;
-      workingCookbookData.name = item.name;
-      workingCookbookData.position = item.position;
-      workingCookbookData.categories = item.categories;
-    },
     flushStore() {
       cookbookStore = null;
     },
@@ -131,5 +108,5 @@ export const useCookbooks = function () {
     cookbookStore = actions.getAll();
   }
 
-  return { cookbooks: cookbookStore, workingCookbookData, deleteTargetId, actions, validForm };
+  return { cookbooks: cookbookStore, actions };
 };

frontend/composables/use-group-mealplan.ts

@@ -31,7 +31,7 @@ export const useMealplans = function (range: Ref<DateRange>) {
           start: format(range.value.start, "yyyy-MM-dd"),
           limit: format(range.value.end, "yyyy-MM-dd"),
         };
-        // @ts-ignore
+        // @ts-ignore TODO Modify typing to allow for string start+limit for mealplans
         const { data } = await api.mealplans.getAll(query.start, query.limit);
 
         return data;
@@ -46,7 +46,7 @@ export const useMealplans = function (range: Ref<DateRange>) {
         start: format(range.value.start, "yyyy-MM-dd"),
         limit: format(range.value.end, "yyyy-MM-dd"),
       };
-      // @ts-ignore
+      // @ts-ignore TODO Modify typing to allow for string start+limit for mealplans
       const { data } = await api.mealplans.getAll(query.start, query.limit);
 
       if (data) {
@@ -71,7 +71,7 @@ export const useMealplans = function (range: Ref<DateRange>) {
       }
 
       loading.value = true;
-      // @ts-ignore
+      // @ts-ignore TODO Modify mealpan types to be from auto-generated files
       const { data } = await api.mealplans.updateOne(updateData.id, updateData);
       if (data) {
         this.refreshAll();

frontend/composables/use-router.ts

@@ -7,7 +7,7 @@ export function useRouterQuery(query: string) {
   const param: WritableComputedRef<string> = computed({
     get(): string {
       console.log("Get Query Change");
-      // @ts-ignore
+      // @ts-ignore For some reason, this could also return an array
       return router.value?.query[query] || "";
     },
     set(v: string): void {
@@ -30,7 +30,6 @@ export function useRouteQuery<T extends string | string[]>(name: string, default
     },
     set(v) {
       nextTick(() => {
-        // @ts-ignore
         router.replace({ query: { ...route.value.query, [name]: v } });
       });
     },

frontend/composables/use-utils.ts

@@ -13,11 +13,11 @@ export function detectServerBaseUrl(req?: IncomingMessage | null) {
     return `${url.protocol}//${url.host}`;
   } else if (req.headers.host) {
     // TODO Socket.encrypted doesn't exist. What is needed here?
-    // @ts-ignore
+    // @ts-ignore See above
     const protocol = req.socket.encrypted ? "https:" : "http:";
     return `${protocol}//${req.headers.host}`;
   } else if (req.socket.remoteAddress) {
-    // @ts-ignore
+    // @ts-ignore See above
     const protocol = req.socket.encrypted ? "https:" : "http:";
     return `${protocol}//${req.socket.localAddress || ""}:${req.socket.localPort || ""}`;
   }
@@ -60,7 +60,7 @@ export function deepCopy<T>(obj: T): T {
             // Some other kind of object, deep-copy its
             // properties into a new object
             rv = Object.keys(obj).reduce(function (prev, key) {
-              // @ts-ignore
+              // @ts-ignore This is hard to make type-safe
               prev[key] = deepCopy(obj[key]);
               return prev;
             }, {});