improved wiki path handling

api/src/controllers/wiki.js

@@ -1,7 +1,16 @@
+import slugify from "slugify";
 import Wiki from "../schema/wiki";
 
 const slugRegex = /^\/([a-z0-9-_\/])*/i;
 
+const formatSlug = (slug) => {
+  if (!slug.startsWith("/")) slug = `/${slug}`;
+  if (slug.endsWith("/")) slug = slug.slice(0, -1);
+  const split = slug.split("/");
+  const slugified = split.map((token) => slugify(token, { lower: true }));
+  return slugified.join("/");
+};
+
 export const createWiki = async (req, res, next) => {
   if (req.body.slug && req.body.title && req.body.body) {
     try {
@@ -12,14 +21,17 @@ export const createWiki = async (req, res, next) => {
         return;
       }
 
-      const validSlug = slugRegex.test(req.body.slug);
+      let { slug } = req.body;
+      slug = formatSlug(slug);
+
+      const validSlug = slugRegex.test(slug);
 
       if (!validSlug) {
         res.status(400).send("That is not a valid path");
         return;
       }
 
-      const existing = await Wiki.findOne({ slug: req.body.slug }).lean();
+      const existing = await Wiki.findOne({ slug }).lean();
 
       if (existing) {
         res
@@ -31,15 +43,15 @@ export const createWiki = async (req, res, next) => {
       }
 
       const wiki = new Wiki({
-        slug: req.body.slug,
+        slug,
         title: req.body.title,
         body: req.body.body,
         createdBy: req.userId,
         created: Date.now(),
       });
 
       await wiki.save();
-      res.send(req.body.slug);
+      res.send(slug);
     } catch (e) {
       next(e);
     }
@@ -130,15 +142,18 @@ export const updateWiki = async (req, res, next) => {
         return;
       }
 
-      const validSlug = slugRegex.test(req.body.slug);
+      let { slug } = req.body;
+      slug = formatSlug(slug);
+
+      const validSlug = slugRegex.test(slug);
 
       if (!validSlug) {
         res.status(400).send("That is not a valid path");
         return;
       }
 
-      if (req.body.slug !== existing.slug) {
-        const existingSlug = await Wiki.findOne({ slug: req.body.slug }).lean();
+      if (slug !== existing.slug) {
+        const existingSlug = await Wiki.findOne({ slug }).lean();
 
         if (existingSlug) {
           res
@@ -154,7 +169,7 @@ export const updateWiki = async (req, res, next) => {
         { _id: req.params.wikiId },
         {
           $set: {
-            slug: req.body.slug,
+            slug,
             title: req.body.title,
             body: req.body.body,
             updated: Date.now(),

client/pages/wiki/new.js

@@ -2,6 +2,7 @@ import React, { useContext, useState } from "react";
 import getConfig from "next/config";
 import { useRouter } from "next/router";
 import jwt from "jsonwebtoken";
+import slugify from "slugify";
 import SEO from "../../components/SEO";
 import Text from "../../components/Text";
 import Input from "../../components/Input";
@@ -25,6 +26,16 @@ export const WikiFields = ({ values }) => {
         label="Path"
         value={slugValue}
         onChange={(e) => setSlugValue(e.target.value)}
+        onBlur={(e) => {
+          let { value } = e.target;
+          if (!value.startsWith("/")) value = `/${value}`;
+          if (value.endsWith("/")) value = value.slice(0, -1);
+          const split = value.split("/");
+          const slugified = split.map((token) =>
+            slugify(token, { lower: true })
+          );
+          setSlugValue(slugified.join("/"));
+        }}
         disabled={values?.slug === "/"}
         mb={2}
         required