Merge pull request reactplay#457 from reactplay/Issue-456-add-slug-fo…

…r-url

Issue-456: Added slug for URL management

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>
 

src/common/playlists/PlayMeta.jsx

@@ -4,8 +4,8 @@ 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 { FetchPlaysByNameAndUser } from "common/services/request/query/fetch-plays";
+import { toSanitized, toTitleCase, toTitleCaseTrimmed } from "common/services/string";
+import { FetchPlaysBySlugAndUser } from "common/services/request/query/fetch-plays";
 import { PageNotFound } from "common";
 
 function PlayMeta() {
@@ -16,9 +16,10 @@ function PlayMeta() {
  const [metaImage, setMetaImage] = useState();
 
  useEffect(() => {
- submit(FetchPlaysByNameAndUser(decodeURI(playname), decodeURI(username)))
+ 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} />;
  };
 

src/common/playlists/PlayThumbnail.jsx

@@ -53,8 +53,7 @@ const PlayThumbnail = ({ play }) => {
  // if it is not passed as a meta data
  // check in the play folder for a cover image
  // with the name cover.png
- const playFolder = play.path.split("/")[2];
- import(`plays/${playFolder}/cover.png`)
+ import(`plays/${play.slug}/cover.png`)
  .then((Cover) => {
  setCover(Cover.default);
  })
@@ -72,7 +71,7 @@ const PlayThumbnail = ({ play }) => {
  return (
  <li key={play.id}>
  <Link
- to={`/plays/${encodeURI(play.github)}/${encodeURI(play.name)}`}
+ to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}
  state={{ id: play.id }}
  >
  <div className='play-thumb'>

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;

src/common/services/request/query/fetch-plays.js

@@ -1,9 +1,9 @@
 export function FetchPlaysSimple() {
- return {...BasiFetchParam}
+ return { ...BasiFetchParam };
 }
 
 export function FetchPlaysByID(id) {
- const payload = { ...BasiFetchParam };
+ const payload = { ...DetailedFetchParam };
 
  payload.where = {
  clause: {
@@ -19,17 +19,17 @@ export function FetchPlaysByID(id) {
  return payload;
 }
 
-export function FetchPlaysByNameAndUser(playname, username) {
- const payload = { ...BasiFetchParam };
+export function FetchPlaysBySlugAndUser(playslug, username) {
+ const payload = { ...DetailedFetchParam };
 
  payload.where = {
  clause: {
  operator: "and",
  conditions: [
  {
- field: "name",
+ field: "slug",
  operator: "ilike",
- value: playname,
+ value: playslug,
  type: "string",
  },
  {
@@ -50,23 +50,30 @@ const BasiFetchParam = {
  function: "plays",
  write: false,
  return: [
- "blog",
  "component",
  "cover",
- "created_at",
  "description",
  "featured",
  "dev_mode",
  "github",
- "id",
  "language",
  { play_like: ["liked", "play_id", "user_id"] },
- { level: ["name"] },
  "name",
- "path",
- { play_tags: { tag: ["name"] } },
- "updated_at",
+ "slug",
  { user: ["id", "displayName", "avatarUrl"] },
- "video",
  ],
 };
+
+const DetailedFetchParam = {
+ ...BasiFetchParam,
+ ...{
+ return: [
+ ...BasiFetchParam.return,
+ "blog",
+ "id",
+ { level: ["name"] },
+ "video",
+ { play_tags: { tag: ["name"] } },
+ ],
+ },
+};

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;
+};