|
import React from "react"
|
|
// import { Sticky, StickyContainer } from "react-sticky"
|
|
import Sticky from "react-sticky-el"
|
|
import { Box, 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])
|
|
|
|
const containerRef = React.useRef(null)
|
|
const editorRef = React.useRef(null)
|
|
|
|
React.useEffect(() => {
|
|
const scrollListener = () => {
|
|
if (containerRef?.current?.getBoundingClientRect) {
|
|
const { top } = containerRef?.current?.getBoundingClientRect()
|
|
|
|
editorRef.current.style.top = `${-top}px`
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", scrollListener)
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", scrollListener)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Flex
|
|
ref={containerRef}
|
|
// position="sticky"
|
|
position="relative"
|
|
alignItems={inEditorMode ? "flex-start" : "center"}
|
|
justifyContent="center"
|
|
// overflow="scroll"
|
|
// height="auto"
|
|
flexDirection={inEditorMode ? "row" : "column"}
|
|
maxWidth="100%"
|
|
// maxHeight="100vh"
|
|
>
|
|
{inEditorMode && (
|
|
<Box
|
|
ref={editorRef}
|
|
position="relative"
|
|
// position="sticky"
|
|
// top={200}
|
|
// alignSelf="flex-start"
|
|
overflow="scroll"
|
|
width="600px"
|
|
// width="100%"
|
|
maxHeight="100vh"
|
|
// paddingY={2}
|
|
>
|
|
<Thingtime
|
|
path={path}
|
|
thing={thing}
|
|
render
|
|
chakras={{ marginY: "200px" }}
|
|
// width="600px"
|
|
></Thingtime>
|
|
</Box>
|
|
)}
|
|
<Thingtime
|
|
edit={inEditMode}
|
|
path={path}
|
|
thing={thing}
|
|
chakras={{ marginY: "200px" }}
|
|
width="600px"
|
|
></Thingtime>
|
|
</Flex>
|
|
)
|
|
}
|