added slug for creation as well

rh-abir · Aug 6, 2022 · 435023d · 435023d
1 parent 0fe87f7
commit 435023d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/src/common/playlists/PlayList.jsx b/src/common/playlists/PlayList.jsx
@@ -8,6 +8,7 @@ import { useParams } from "react-router-dom";
 import useGetPlays from 'common/hooks/useGetPlays'
 
 import "./playlist.css";
+import { toSanitized } from "common/services/string";
 
 const PlayList = () => {
  const [loading, error, plays] = useGetPlays();
@@ -37,7 +38,7 @@ const PlayList = () => {
 
  <React.Fragment key={index}>
  {
- all_plays[play.component ? play.component : play.title_name] && <PlayThumbnail key={play.id} play={play}/>
+ all_plays[play.component ? play.component : toSanitized(play.title_name)] && <PlayThumbnail key={play.id} play={play}/>
  }
  </React.Fragment>
 

diff --git a/src/common/playlists/PlayMeta.jsx b/src/common/playlists/PlayMeta.jsx
@@ -4,7 +4,7 @@ import * as plays from "plays";
 import { useParams } from "react-router-dom";
 import { submit } from "common/services/request";
 import Loader from "common/spinner/spinner";
-import { toTitleCase } from "common/services/string";
+import { toSanitized, toTitleCase, toTitleCaseTrimmed } from "common/services/string";
 import { FetchPlaysBySlugAndUser } from "common/services/request/query/fetch-plays";
 import { PageNotFound } from "common";
 
@@ -19,6 +19,7 @@ function PlayMeta() {
  submit(FetchPlaysBySlugAndUser(decodeURI(playname), decodeURI(username)))
  .then((res) => {
  const play_obj = res[0];
+ play_obj.title_name = toTitleCaseTrimmed(play_obj.name);
  setPlay(play_obj);
  setMetaImage(play_obj.cover);
  setLoading(false);
@@ -38,7 +39,7 @@ function PlayMeta() {
 
  const renderPlayComponent = () => {
  const Comp =
- plays[play.component || toTitleCase(play.name).replace(/ /g, "")];
+ plays[play.component || toSanitized(play.title_name)] ;
  return <Comp {...play} />;
  };
 

diff --git a/src/common/playlists/PlayThumbnail.jsx b/src/common/playlists/PlayThumbnail.jsx
@@ -71,7 +71,7 @@ const PlayThumbnail = ({ play }) => {
  return (
  <li key={play.id}>
  <Link
- to={`/plays/${encodeURI(play.github.toLowerCase())}/${encodeURI(play.slug)}`}
+ to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}
  state={{ id: play.id }}
  >
  <div className='play-thumb'>

diff --git a/src/common/services/plays.js b/src/common/services/plays.js
@@ -4,7 +4,7 @@ import {
  associatePlayWithTagQuery,
  createPlayQuery,
 } from "./request/query/play";
-import { toKebabCase } from "./string";
+import { toKebabCase, toSlug } from "./string";
 import { Tags } from "./tags";
 
 // Create a play
@@ -25,6 +25,9 @@ const createPlay = (playObject) => {
  ? objectToSubmit.style.value
  : "css";
 
+ // Prepare slug
+ objectToSubmit.slug = toSlug(objectToSubmit.name);
+
  // Prepare level
  objectToSubmit.level_id = objectToSubmit.level.value;
  delete objectToSubmit.level;

diff --git a/src/common/services/string.js b/src/common/services/string.js
@@ -35,3 +35,17 @@ export const toTitleCaseTrimmed = (str) => {
  const titleCse = toTitleCase(str);
  return titleCse.replace(/\s/g, "");
 };
+
+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;
+};