Make route links more readable

README.md

@@ -9,6 +9,12 @@ I chose to use the [The Grimoire](https://thebombzen.com/grimoire/) UI as a star
 
 ## Changelog
 
+#### April 21th 2019
+ - Version 1.0 complete.
+ - Added seach capability on landing page
+ - Hooked up anchor links on header navigation
+ - Added some styles to improve the look of the detail pages
+
 #### April 19th 2019
  - Initial commit of project
  - Fetching data from database and caching to local browser storage
@@ -19,13 +25,23 @@ I chose to use the [The Grimoire](https://thebombzen.com/grimoire/) UI as a star
 
  ## TODOs
   - Add mobile menu
-  - Add Category listing pages
   - Create tables for items
-  - Create list/card/table view modes
-  - Add styles for detailed views
+  - Convert deeps links to more human readable link (e.g.: `/item/boons/1` => `/item/boons/1/animation`)
+  - Create additional view modes for landing page
+    - list 
+    - card
+    - table (with additional stats and sorting)
+  - ~~Add styles for detailed views~~
   - Mobile-First support
   - Add search capability
+    - ~~titles~~
     - text
     - tags
+  - Add tooltips on hover for extra information
+  - Make header sticky
+  - Add sticky "Back to Top" link on landing page
+  - Integrate [Blueprint](https://blueprintjs.com) for new functionality
+    - revamp overall site styles to align more with Blueprint
+    - add light and dark theme mode toggle
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

src/components/ListItems.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { caseConverter } from '../utilities/utilities';
+import { caseConverter, convertStringToKebab } from '../utilities/utilities';
 
 const ListItems = (props) => (
   <section>
     <h2 id={caseConverter(props.section).toLowerCase()} className="post-list-head">{props.title}</h2>
     <ul className="post-list">
       {props.items && props.items.map((item, i) => {
         return (
-          <li key={i}><Link className="post-link" to={`/item/${props.section}/${i}`}>{item.name}</Link></li>
+          <li key={i}><Link className="post-link" to={`/item/${props.section}/${i}/${convertStringToKebab(item.name)}`}>{item.name}</Link></li>
         )
       })}
     </ul>

src/routers/AppRouter.js

@@ -16,7 +16,7 @@ export default () => (
       <ScrollMemory />
         <Switch>
           <Route path="/" component={LandingPage} exact={true} />
-          <Route path="/item/:section/:id" component={ItemDetails} />
+          <Route path="/item/:section/:id/:title" component={ItemDetails} />
           <Route component={NotFoundPage} />
         </Switch>
       </div>

src/utilities/utilities.js

@@ -4,7 +4,12 @@
  * @param {string} string - camel cased string to convert
  * @return {string}
  */
-export const convertToKebab = (string) => string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+export const convertCamelToKebab = (string) => string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+export const convertStringToKebab = (string) => {
+  let stringArray = string.match(/([a-zA-Z0-9]*)/gm);
+  return stringArray.filter(Boolean).join("-").toLowerCase();
+};
 
 /**
  * Convert hyphenated strings to camel case strings
@@ -13,7 +18,7 @@ export const convertToKebab = (string) => string.replace(/([a-z])([A-Z])/g, '$1-
  * @param {boolean} pascal - capitalize the first letter in the string
  * @return {string}
  */
-export const convertToCamel = (string, pascal = false) => {
+export const convertKebabToCamel = (string, pascal = false) => {
 	const converter = (matches) => matches[1].toUpperCase();
 	let result = string.replace(/(\-\w)/g, converter);
 
@@ -35,9 +40,9 @@ export const convertToCamel = (string, pascal = false) => {
  */
 export const caseConverter = (string, pascal = false) => {
 	if (string.match(/(\-\w)/)) {
-    return convertToCamel(string, pascal)
+    return convertKebabToCamel(string, pascal)
   } else if (string.match(/([a-z])([A-Z])/g)) {
-    return convertToKebab(string)
+    return convertCamelToKebab(string)
   } else {
     return string;
   }