thingtime_review/remix/app/components/Thingtime/ThingtimeURL.tsx

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, '.');

    console.log('nik path', path);

    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>
  );
};