|
import React from "react"
|
|
import { Flex } from "@chakra-ui/react"
|
|
import { useLocation, useMatches } from "@remix-run/react"
|
|
|
|
import { Thingtime } from "./Thingtime"
|
|
import { useThingtime } from "./useThingtime"
|
|
|
|
export const ThingtimeURL = (props) => {
|
|
const { getThingtime } = useThingtime()
|
|
|
|
const { pathname } = useLocation()
|
|
|
|
const matches = useMatches()
|
|
const location = React.useMemo(() => {
|
|
return matches[matches.length - 1]
|
|
}, [matches])
|
|
|
|
const path = React.useMemo(() => {
|
|
console.log("ThingtimeURL location", location)
|
|
|
|
// const sanitisation = ["/things", "/edit", "/editor", "/code", "/coder"]
|
|
|
|
// // strip the leading /path1/path2 path1 section from the path
|
|
// let pathPartOne = location?.pathname?.split("/")[2]
|
|
|
|
// // remove all sanitsation strings from path
|
|
// sanitisation.forEach((sanitisationString) => {
|
|
// pathPartOne = pathPartOne?.replace(sanitisationString, "")
|
|
// })
|
|
|
|
// strip the leading /path1/path2 path1 section from the path
|
|
const pathPartOne = location?.pathname?.split("/")[2]
|
|
|
|
const path = pathPartOne?.replace(/\//g, ".")
|
|
|
|
return path || "thingtime"
|
|
}, [location])
|
|
|
|
const thing = React.useMemo(() => {
|
|
// remove /things/ from path
|
|
|
|
const ret = getThingtime(path)
|
|
|
|
return ret
|
|
}, [path, getThingtime])
|
|
|
|
const inEditorMode = React.useMemo(() => {
|
|
if (pathname.slice(0, 7) === "/editor") {
|
|
return true
|
|
}
|
|
return false
|
|
}, [pathname])
|
|
|
|
const inEditMode = React.useMemo(() => {
|
|
if (pathname.slice(0, 5) === "/edit") {
|
|
return true
|
|
}
|
|
return false
|
|
}, [pathname])
|
|
|
|
return (
|
|
<Flex
|
|
alignItems={inEditorMode ? "flex-start" : "center"}
|
|
justifyContent="center"
|
|
flexDirection={inEditorMode ? "row" : "column"}
|
|
maxWidth="100%"
|
|
>
|
|
{inEditorMode && (
|
|
<Thingtime
|
|
path={path}
|
|
thing={thing}
|
|
render
|
|
chakras={{ marginY: 200 }}
|
|
width="600px"
|
|
></Thingtime>
|
|
)}
|
|
<Thingtime
|
|
edit={inEditMode}
|
|
path={path}
|
|
thing={thing}
|
|
chakras={{ marginY: 200 }}
|
|
width="600px"
|
|
></Thingtime>
|
|
</Flex>
|
|
)
|
|
}
|