import React from 'react' ; import { Redirect , useRouteMatch } from 'react-router-dom' ; import notification from 'antd/es/notification' ; import Space from 'antd/es/space' ; interface Props { modelIds : string [ ] ; children : React . ReactNode | JSX . Element ; } /**
 * Handles URLs that use the former permalink syntax by redirecting the user and displaying
 * a non-invasive warning.
 *
 * The user is redirected to the current demo with the first model in the provided list
 * selected.
 */ export const RedirectLegacyPermalinks = ( { modelIds , children } ) => { const match = useRouteMatch < { demo : string ; maybeModelId : string ; } > ( '/:demo/:maybeModelId' ) ; if ( ! match ) { return < > { children } < />; } const { maybeModelId } = match . params ; const validModelIds = new Set ( modelIds ) ; if ( validModelIds . has ( maybeModelId ) ) { return < > { children } < />; } let decoded ; try { decoded = parseInt ( atob ( maybeModelId ) ) ; } catch { } const isNotPermalink = decoded ? isNaN ( decoded ) : true ; if ( isNotPermalink ) { return < > { children } < />; } notification . warning ( { message : 'Legacy URL' , description : ( < Space direction = "vertical" > < span > Sorry , that URL doesn 't work anymore.</span> < span > If you arrived here by clicking a link on a website , please ask the webmaster to update the URL . < /span> < /Space>), } ) ; return < Redirect to = { `/${ match . params . demo }` } />; } ;