Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add pretty URL slugs to listing pages (#233)
* Added url helper to listing service to make url slugs from listing * Minor version bump on typescript-eslint plugin to get fixes from typescript-eslint/typescript-eslint#1736 * Added routing with url slug for listings + a redirect from the id path
- Loading branch information
1 parent
9e06447
commit 6d4a204
Showing
10 changed files
with
126 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from "react" | ||
| import { NextPage } from "next" | ||
| import Head from "next/head" | ||
|
|
||
| interface RedirectProps { | ||
| to: string | ||
| } | ||
|
|
||
| const Redirect: NextPage<RedirectProps> = ({ to }) => ( | ||
| <Head> | ||
| <meta http-equiv="refresh" content={`0; url=${to}`} /> | ||
| </Head> | ||
| ) | ||
|
|
||
| Redirect.getInitialProps = ({ query: { to } }) => Promise.resolve({ to: to as string }) | ||
|
|
||
| export default Redirect |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { formatUrlSlug, listingUrlSlug } from "../../src/lib/url_helper" | ||
| import { Listing } from "@bloom-housing/core" | ||
| import triton from "../../listings/triton.json" | ||
|
|
||
| describe("formatUrlSlug", () => { | ||
| test("reformats strings properly", () => { | ||
| expect(formatUrlSlug("snake_case")).toEqual("snake_case") | ||
| expect(formatUrlSlug("SnakeCase")).toEqual("snake_case") | ||
| expect(formatUrlSlug("Mix of spaces_and-hyphens")).toEqual("mix_of_spaces_and_hyphens") | ||
| expect(formatUrlSlug("Lots@of&weird spaces&^&!@^*&AND OTHER_CHARS")).toEqual( | ||
| "lots_of_weird_spaces_and_other_chars" | ||
| ) | ||
| }) | ||
|
|
||
| test("with an empty string", () => { | ||
| expect(formatUrlSlug("")).toEqual("") | ||
| }) | ||
| }) | ||
|
|
||
| describe("listingUrlSlug", () => { | ||
| // Force cast to listing - should we add a dependency to `listingsLoader` instead? | ||
| const listing = (triton as unknown) as Listing | ||
|
|
||
| test("Generates a URL slug for a Listing", () => { | ||
| const slug = listingUrlSlug(listing) | ||
| expect(slug).toEqual("the_triton_55_triton_park_lane_foster_city_ca") | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * Formats the input string as a URL slug. | ||
| * This includes the following transformations: | ||
| * - All lowercase | ||
| * - Remove special characters | ||
| * - snake_case | ||
| * @param input | ||
| */ | ||
| import { Listing } from "@bloom-housing/core" | ||
|
|
||
| export const formatUrlSlug = (input: string): string => { | ||
| return ( | ||
| ( | ||
| (input || "") | ||
| // Divide into words based on upper case letters followed by lower case letters | ||
| .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]+|[0-9]+/g) || [] | ||
| ) | ||
|
|
||
| .join("_") | ||
| .toLowerCase() | ||
| ) | ||
| } | ||
|
|
||
| export const listingUrlSlug = (listing: Listing): string => { | ||
| const { | ||
| name, | ||
| buildingAddress: { city, street, state } | ||
| } = listing | ||
| return formatUrlSlug([name, street, city, state].join(" ")) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters