diff --git a/README.md b/README.md index 4586560..9babfaa 100644 --- a/README.md +++ b/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). diff --git a/src/components/ListItems.js b/src/components/ListItems.js index 182914c..ca20e50 100644 --- a/src/components/ListItems.js +++ b/src/components/ListItems.js @@ -1,6 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { caseConverter } from '../utilities/utilities'; +import { caseConverter, convertStringToKebab } from '../utilities/utilities'; const ListItems = (props) => (
@@ -8,7 +8,7 @@ const ListItems = (props) => ( diff --git a/src/routers/AppRouter.js b/src/routers/AppRouter.js index f5cda66..75cd2c9 100644 --- a/src/routers/AppRouter.js +++ b/src/routers/AppRouter.js @@ -16,7 +16,7 @@ export default () => ( - + diff --git a/src/utilities/utilities.js b/src/utilities/utilities.js index 9d40f41..13cbf08 100644 --- a/src/utilities/utilities.js +++ b/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; }