redirect weights pages to canonical urls

src/website/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx

@@ -26,6 +26,7 @@ export default function useWeightFetch({
   const [status, statusSet] = useState(FetchStatus.ready);
   const [writeStatus, writeStatusSet] = useState(FetchStatus.paused);
   const [title, titleSet] = useState("");
+  const [maybeUrlSlug, maybeUrlSlugSet] = useState(undefined);
   const [visibility, visibilitySet] = useState("public");
   const [descriptionMD, descriptionMDSet] = useState("");
   const isLoading =
@@ -86,10 +87,12 @@ export default function useWeightFetch({
               creator_set_visibility,
               description_markdown,
               title: resTitle,
+              maybe_url_slug: resMaybeUrlSlug,
             } = res;
 
             statusSet(FetchStatus.success);
             titleSet(resTitle);
+            maybeUrlSlugSet(resMaybeUrlSlug);
             descriptionMDSet(description_markdown);
             visibilitySet(creator_set_visibility);
             onSuccess(res);
@@ -114,6 +117,7 @@ export default function useWeightFetch({
     remove,
     status,
     title,
+    maybeUrlSlug,
     update,
     visibility,
     writeStatus,

src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -388,7 +388,7 @@ class PageContainer extends React.Component<
                 </Route>
 
                 <Route
-                  path="/weight/:weight_token"
+                  path="/weight/:weight_token/:maybe_url_slug?"
                   render={props => (
                     <WeightPage
                       key={props.match.params.weight_token}

src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx

@@ -55,7 +55,8 @@ export default function WeightPage({
 }: WeightProps) {
   const { canEditTtsModel, canBanUsers, user } = useSession();
   const { search } = useLocation();
-  const { weight_token } = useParams<{ weight_token: string }>();
+  const { weight_token, maybe_url_slug } = useParams<{ weight_token: string, maybe_url_slug?: string}>();
+
   const source = search ? new URLSearchParams(search).get("source") : "";
   const history = useHistory();
   const bookmarks = useBookmarks();
@@ -68,6 +69,12 @@ export default function WeightPage({
     onSuccess: (res: any) => {
       bookmarks.gather({ res, key: "weight_token" }); // expand rather than replace for lazy loading
       ratings.gather({ res, key: "weight_token" });
+
+      if (!!res.maybe_url_slug && !!res.weight_token && res.maybe_url_slug !== maybe_url_slug) {
+        // Redirect to the canonical URL, which includes the SEO-friendly "URL slug".
+        const canonicalUrl = `/weight/${res.weight_token}/${res.maybe_url_slug}`;
+        window.history.replaceState({}, "", canonicalUrl)
+      }
     },
     token: weight_token,
   });