Merge pull request #20 from reactplay/Issue-19-use-sanitized-and-slug-data-for-path

Issue-19 Use sanitized and slug data for path

Author: koustov

_templates/component_js.tmpl

@@ -2,7 +2,7 @@ import PlayHeader from 'common/playlists/PlayHeader';
 import './styles.%PLAY_STYLE%';
 
 // WARNING: Do not change the entry componenet name
-function %PLAY_TITLE_NAME%(props) {
+function %PLAY_TITLE_NAME_SANITIZED%(props) {
 
   // Your Code Start below.
 
@@ -28,4 +28,4 @@ function %PLAY_TITLE_NAME%(props) {
   );
 }
 
-export default %PLAY_TITLE_NAME%;
+export default %PLAY_TITLE_NAME_SANITIZED%;

_templates/component_ts.tmpl

@@ -2,7 +2,7 @@ import React from 'react';
 import PlayHeader from 'common/playlists/PlayHeader';
 import './styles.{{style}}';
 
-function %PLAY_TITLE_NAME%(props) {
+function %PLAY_TITLE_NAME_SANITIZED%(props) {
 
   // Your Code Start below.
 
@@ -28,4 +28,4 @@ function %PLAY_TITLE_NAME%(props) {
   );
 }
 
-export default %PLAY_TITLE_NAME%;
+export default %PLAY_TITLE_NAME_SANITIZED%;

lib/services/datasource/index.js

@@ -4,6 +4,8 @@ import { FETH_ALL_PLAYS } from "./query.js";
 import {
   toKebabCase,
   toPascalcase,
+  toSanitized,
+  toSlug,
   toTitleCase,
   toTitleCaseTrimmed,
 } from "../../../util/string.js";
@@ -73,10 +75,11 @@ export const loadAllPlaysAsync = () => {
 };
 
 const processPlayInformation = (play) => {
-  play.kebab_name = toKebabCase(play.name);
-  play.pascal_name = toPascalcase(play.name);
+  play.kebab_name = play.slug;
+  play.pascal_name = toPascalcase(toSanitized(play.name));
   play.title_string = toTitleCase(play.name);
   play.title_name = toTitleCaseTrimmed(play.name);
+  play.title_name_sanitized = toSanitized(play.title_name);
   play.level = play.level.name;
   return play;
 };

lib/services/datasource/query.js

@@ -15,6 +15,7 @@ export const FETH_ALL_PLAYS = {
     "id",
     "dev_mode",
     "language",
+    "slug",
     { level: ["name"] },
     "name",
     "path",

lib/services/template/play_content.js

@@ -1,6 +1,6 @@
 import fs from "fs";
 import * as path from "path";
-import { replaceAll } from "../../../util/string.js";
+import { replaceAll, toSanitized, toSlug } from "../../../util/string.js";
 import { fileURLToPath } from "url";
 import { Log } from "../../../log/index.js";
 
@@ -23,7 +23,7 @@ export const processPlayContent = (play) => {
 };
 
 const createPlayDirectory = (play) => {
-  const play_directory = `${PLAY_LIST_DIRECTORY}/${play.kebab_name}`;
+  const play_directory = `${PLAY_LIST_DIRECTORY}/${toSlug(play.kebab_name)}`;
   if (!fs.existsSync(play_directory)) {
     fs.mkdirSync(play_directory, { recursive: true });
   }
@@ -50,7 +50,7 @@ const replaceTemplateVar = (play_data, filePath) => {
       );
     });
     fs.writeFile(filePath, updated_result, "utf8", function (err) {
-      if (err) return Log.log(err);
+      if (err) return Log.log(`Error: During file write: ${err}, ${play_data}`);
     });
   });
 };
@@ -80,7 +80,7 @@ const processTemplate = (play, template_type, play_path) => {
     if (template_type === "js" || template_type === "ts") {
       target_template_name = target_template_name.replace(
         "component",
-        play.title_name
+        toSanitized(play.title_name)
       );
     }
     const file_path = `${__filename}/${TEMPLATE_DIRECTORY}/${file_name}`;

lib/services/template/play_index.js

@@ -1,7 +1,7 @@
 import fs from "fs";
 import { Log } from "../../../log/index.js";
 import { DIRECTORIES } from "../../../util/const.js";
-import { isValidString } from "../../../util/string.js";
+import { isValidString, toSanitized, toSlug } from "../../../util/string.js";
 import { loadAllPlaysAsync } from "../datasource/index.js";
 
 const INDEX_FILE_PATH = `${DIRECTORIES.PLAY}/index.js`;
@@ -41,9 +41,11 @@ const writeFile = (plays, dirs) => {
       fs.appendFileSync(
         INDEX_FILE_PATH,
         `\n export { default as ${
-          isValidString(play.component) || play.title_name
+          isValidString(play.component) || toSanitized(play.title_name)
         } } from 'plays/${playPath}/${
-          isValidString(play.component) || play.title_name || play.kebab_name
+          isValidString(play.component) ||
+          toSanitized(play.title_name) ||
+          toSanitized(play.kebab_name)
         }';`
       );
     } else {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-play",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Boiler plate for creating a play within reactplay system",
   "main": "index.js",
   "bin": {

util/string.js

@@ -46,3 +46,17 @@ export const isValidString = (str) => {
   }
   return str;
 };
+
+export const toSlug = (str) => {
+  return toSanitized(str).toLowerCase();
+};
+
+export const toSanitized = (str) => {
+  //replace all special characters | symbols with a space
+  str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, " ");
+  // trim spaces at start and end of string
+  str = str.replace(/^\s+|\s+$/gm, "");
+  // replace space with dash/hyphen
+  str = str.replace(/\s+/g, "-");
+  return str;
+};