Make sure URLs are always slugified

vtex-apps · Sep 3, 2019 · e5a29a0 · e5a29a0
1 parent c0c608f
commit e5a29a0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/react/ComponentsGrid.tsx b/react/ComponentsGrid.tsx
@@ -102,7 +102,7 @@ const ComponentsGrid: FC<OuterProps> = ({ ComponentsListQuery }) => {
                     link={`/docs/components/${params.category}/${
                       component.appName
                     }/${(component.file &&
-                      removeFileExtension(component.file)) ||
+                      slug(removeFileExtension(component.file))) ||
                       ''}`}
                   />
                 </div>

diff --git a/react/hooks/useApp.tsx b/react/hooks/useApp.tsx
@@ -8,9 +8,18 @@ export function useApp() {
 
   const { file } = params
   const { appName, major } = useAppVersionState()
-  const fileName = file || 'README'
+  const fileName = file ? slugToPascal(file) : 'README'
 
   const finalAppName = `${appName}@${major}`
 
   return { appName: finalAppName, fileName }
 }
+
+function slugToPascal(slug: string) {
+  const result = slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
+
+  return result
+}