feat: random sort option for front page (#2363)

* Add hook for random sorting

* Add random sorting to front page

* Add multiple tests for random sorting.

* Be extra sure that all recipes are returned.

* Too stable random. seed doesn't reach backend.

* add timestamp to useRecipeSearch

* Update randomization tests for timestamp seeding

* ruff cleanup

* pass timestamp separately in getAll

* remove debugging log items

* remove timestamp from address bar

* remove defaults from backend timestamps

* timestamp should be optional

* fix edge case: query without timestamp

* similar edge case: no timestamp in pagination

* ruff :/

* better edge case handling

* stabilize random search test w/more recipes

* better pagination seeding

* update pagination seed test

* remove redundant random/seed check

* Test for api routes to random sorting.

* please the typing gods

* hack to make query parameters throw correct exc

* ruff

* fix validator message typo

* black reformatting

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

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

@@ -31,6 +31,7 @@ export function useRecipeSearch(api: UserApi): UseRecipeSearchReturn {
       orderBy: "name",
       orderDirection: "asc",
       perPage: 20,
+      _searchSeed: Date.now().toString(),
     });
 
     if (error) {

frontend/composables/recipes/use-recipes.ts

@@ -1,8 +1,8 @@
 import { useAsync, ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
-import {Recipe} from "~/lib/api/types/recipe";
-import {RecipeSearchQuery} from "~/lib/api/user/recipes/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
+import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
 
 export const allRecipes = ref<Recipe[]>([]);
 export const recentRecipes = ref<Recipe[]>([]);
@@ -23,6 +23,8 @@ export const useLazyRecipes = function () {
     const { data } = await api.recipes.getAll(page, perPage, {
       orderBy,
       orderDirection,
+      paginationSeed: query?._searchSeed, // propagate searchSeed to stabilize random order pagination
+      searchSeed: query?._searchSeed, // unused, but pass it along for completeness of data
       search: query?.search,
       cookbook: query?.cookbook,
       categories: query?.categories,

frontend/lib/api/user/recipes/recipe.ts

@@ -78,6 +78,8 @@ export type RecipeSearchQuery = {
   page?: number;
   perPage?: number;
   orderBy?: string;
+
+  _searchSeed?: string;
 };
 
 export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {

frontend/pages/index.vue

@@ -212,7 +212,6 @@ export default defineComponent({
           foods: toIDArray(selectedFoods.value),
           tags: toIDArray(selectedTags.value),
           tools: toIDArray(selectedTools.value),
-
           // Only add the query param if it's or not default
           ...{
             auto: state.value.auto ? undefined : "false",
@@ -239,6 +238,7 @@ export default defineComponent({
         requireAllFoods: state.value.requireAllFoods,
         orderBy: state.value.orderBy,
         orderDirection: state.value.orderDirection,
+        _searchSeed: Date.now().toString()
       };
     }
 
@@ -303,6 +303,11 @@ export default defineComponent({
         name: i18n.tc("general.updated"),
         value: "update_at",
       },
+      {
+        icon: $globals.icons.diceMultiple,
+        name: i18n.tc("general.random"),
+        value: "random",
+      },
     ];
 
     onMounted(() => {