refactor/breakup router

frontend/src/main.js

@@ -3,50 +3,16 @@ import App from "./App.vue";
 import vuetify from "./plugins/vuetify";
 import store from "./store";
 import VueRouter from "vue-router";
-import { routes } from "./routes";
+import { router } from "./routes";
 import i18n from "./i18n";
 import FlashMessage from "@smartweb/vue-flash-message";
 import "@mdi/font/css/materialdesignicons.css";
 import "typeface-roboto/index.css";
-import VueI18n from "@/i18n";
-import Vuetify from "@/plugins/vuetify";
 
 Vue.use(FlashMessage);
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
 
-const router = new VueRouter({
-  routes,
-  mode: process.env.NODE_ENV === "production" ? "history" : "hash",
-});
-
-const DEFAULT_TITLE = "Mealie";
-const TITLE_SEPARATOR = "🍴";
-const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE;
-router.afterEach(to => {
-  Vue.nextTick(async () => {
-    if (typeof to.meta.title === "function") {
-      const title = await to.meta.title(to);
-      document.title = title + TITLE_SUFFIX;
-    } else {
-      document.title = to.meta.title
-        ? to.meta.title + TITLE_SUFFIX
-        : DEFAULT_TITLE;
-    }
-  });
-});
-
-async function loadLocale() {
-  console.log("Router Lang", store.getters.getActiveLang);
-  VueI18n.locale = store.getters.getActiveLang;
-  Vuetify.framework.lang.current = store.getters.getActiveLang;
-}
-
-router.beforeEach((__, _, next) => {
-  loadLocale();
-  next();
-});
-
 const vueApp = new Vue({
   vuetify,
   store,
@@ -71,5 +37,4 @@ let titleCase = function(value) {
 Vue.filter("truncate", truncate);
 Vue.filter("titleCase", titleCase);
 
-export { vueApp };
+export { router, vueApp };
-export { router };

frontend/src/routes/admin.js

@@ -10,7 +10,7 @@ import About from "@/pages/Admin/About";
 import { store } from "../store";
 import i18n from '@/i18n.js';
 
-export default {
+export const adminRoutes =  {
   path: "/admin",
   component: Admin,
   beforeEnter: (to, _from, next) => {

frontend/src/routes/auth.js

@@ -0,0 +1,18 @@
+import LoginPage from "@/pages/LoginPage";
+import SignUpPage from "@/pages/SignUpPage";
+import { store } from "../store";
+
+export const authRoutes = [
+  {
+    path: "/logout",
+    beforeEnter: (_to, _from, next) => {
+      store.commit("setToken", "");
+      store.commit("setIsLoggedIn", false);
+      next("/");
+    },
+  },
+  { path: "/login", component: LoginPage },
+
+  { path: "/sign-up", redirect: "/" },
+  { path: "/sign-up/:token", component: SignUpPage },
+];

frontend/src/routes/general.js

@@ -0,0 +1,15 @@
+import i18n from "@/i18n.js";
+import SearchPage from "@/pages/SearchPage";
+import HomePage from "@/pages/HomePage";
+
+export const generalRoutes = [
+  { path: "/", name: "home", component: HomePage },
+  { path: "/mealie", component: HomePage },
+  {
+    path: "/search",
+    component: SearchPage,
+    meta: {
+      title: i18n.t("search.search"),
+    },
+  },
+];

frontend/src/routes/index.js

@@ -1,86 +1,55 @@
-import HomePage from "@/pages/HomePage";
 import Page404 from "@/pages/404Page";
-import SearchPage from "@/pages/SearchPage";
+import { adminRoutes } from "./admin";
-import ViewRecipe from "@/pages/Recipe/ViewRecipe";
+import { authRoutes } from "./auth";
-import NewRecipe from "@/pages/Recipe/NewRecipe";
+import { recipeRoutes } from "./recipes";
-import CustomPage from "@/pages/Recipes/CustomPage";
+import { mealRoutes } from "./meal";
-import AllRecipes from "@/pages/Recipes/AllRecipes";
+import { generalRoutes } from "./general";
-import CategoryPage from "@/pages/Recipes/CategoryPage";
-import TagPage from "@/pages/Recipes/TagPage";
-import Planner from "@/pages/MealPlan/Planner";
-import Debug from "@/pages/Debug";
-import LoginPage from "@/pages/LoginPage";
-import SignUpPage from "@/pages/SignUpPage";
-import ThisWeek from "@/pages/MealPlan/ThisWeek";
-import { api } from "@/api";
-import Admin from "./admin";
 import { store } from "../store";
-import i18n from "@/i18n.js";
+import VueRouter from "vue-router";
+import VueI18n from "@/i18n";
+import Vuetify from "@/plugins/vuetify";
+import Vue from "vue";
 
 export const routes = [
-  { path: "/", name: "home", component: HomePage },
+  ...generalRoutes,
-  {
+  adminRoutes,
-    path: "/logout",
+  ...authRoutes,
-    beforeEnter: (_to, _from, next) => {
+  ...mealRoutes,
-      store.commit("setToken", "");
+  ...recipeRoutes,
-      store.commit("setIsLoggedIn", false);
+
-      next("/");
-    },
-  },
-  { path: "/mealie", component: HomePage },
-  { path: "/login", component: LoginPage },
-  { path: "/sign-up", redirect: "/" },
-  { path: "/sign-up/:token", component: SignUpPage },
-  { path: "/debug", component: Debug },
-  {
-    path: "/search",
-    component: SearchPage,
-    meta: {
-      title: i18n.t("search.search"),
-    },
-  },
-  { path: "/recipes/all", component: AllRecipes },
-  { path: "/pages/:customPage", component: CustomPage },
-  { path: "/recipes/tag/:tag", component: TagPage },
-  { path: "/recipes/category/:category", component: CategoryPage },
-  {
-    path: "/recipe/:recipe",
-    component: ViewRecipe,
-    meta: {
-      title: async route => {
-        const recipe = await api.recipes.requestDetails(route.params.recipe);
-        return recipe.name;
-      },
-    },
-  },
-  { path: "/new/", component: NewRecipe },
-  {
-    path: "/meal-plan/planner",
-    component: Planner,
-    meta: {
-      title: i18n.t("meal-plan.meal-planner"),
-    },
-  },
-  {
-    path: "/meal-plan/this-week",
-    component: ThisWeek,
-    meta: {
-      title: i18n.t("meal-plan.dinner-this-week"),
-    },
-  },
-  Admin,
-  {
-    path: "/meal-plan/today",
-    beforeEnter: async (_to, _from, next) => {
-      await todaysMealRoute().then(redirect => {
-        next(redirect);
-      });
-    },
-  },
   { path: "*", component: Page404 },
 ];
 
-async function todaysMealRoute() {
+const router = new VueRouter({
-  const response = await api.mealPlans.today();
+  routes,
-  return "/recipe/" + response.data;
+  mode: process.env.NODE_ENV === "production" ? "history" : "hash",
+});
+
+const DEFAULT_TITLE = "Mealie";
+const TITLE_SEPARATOR = "🍴";
+const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE;
+router.afterEach(to => {
+  Vue.nextTick(async () => {
+    if (typeof to.meta.title === "function") {
+      const title = await to.meta.title(to);
+      document.title = title + TITLE_SUFFIX;
+    } else {
+      document.title = to.meta.title
+        ? to.meta.title + TITLE_SUFFIX
+        : DEFAULT_TITLE;
+    }
+  });
+});
+
+function loadLocale() {
+  console.log("Router Lang", store.getters.getActiveLang);
+  VueI18n.locale = store.getters.getActiveLang;
+  Vuetify.framework.lang.current = store.getters.getActiveLang;
 }
+
+router.beforeEach((__, _, next) => {
+  loadLocale();
+  next();
+});
+
+export { router };

frontend/src/routes/meal.js

@@ -0,0 +1,34 @@
+import Planner from "@/pages/MealPlan/Planner";
+import ThisWeek from "@/pages/MealPlan/ThisWeek";
+import i18n from "@/i18n.js";
+import { api } from "@/api";
+
+export const mealRoutes = [
+  {
+    path: "/meal-plan/planner",
+    component: Planner,
+    meta: {
+      title: i18n.t("meal-plan.meal-planner"),
+    },
+  },
+  {
+    path: "/meal-plan/this-week",
+    component: ThisWeek,
+    meta: {
+      title: i18n.t("meal-plan.dinner-this-week"),
+    },
+  },
+  {
+    path: "/meal-plan/today",
+    beforeEnter: async (_to, _from, next) => {
+      await todaysMealRoute().then(redirect => {
+        next(redirect);
+      });
+    },
+  },
+];
+
+async function todaysMealRoute() {
+  const response = await api.mealPlans.today();
+  return "/recipe/" + response.data;
+}

frontend/src/routes/recipes.js

@@ -0,0 +1,29 @@
+import ViewRecipe from "@/pages/Recipe/ViewRecipe";
+import NewRecipe from "@/pages/Recipe/NewRecipe";
+import CustomPage from "@/pages/Recipes/CustomPage";
+import AllRecipes from "@/pages/Recipes/AllRecipes";
+import CategoryPage from "@/pages/Recipes/CategoryPage";
+import TagPage from "@/pages/Recipes/TagPage";
+import { api } from "@/api";
+
+export const recipeRoutes = [
+  // Recipes
+  { path: "/recipes/all", component: AllRecipes },
+  { path: "/recipes/tag/:tag", component: TagPage },
+  { path: "/recipes/category/:category", component: CategoryPage },
+  // Misc
+  { path: "/new/", component: NewRecipe },
+  { path: "/pages/:customPage", component: CustomPage },
+
+  // Recipe Page
+  {
+    path: "/recipe/:recipe",
+    component: ViewRecipe,
+    meta: {
+      title: async route => {
+        const recipe = await api.recipes.requestDetails(route.params.recipe);
+        return recipe.name;
+      },
+    },
+  },
+];