nav: re-enable some features from prev CRA version

mimecuvalo · Nov 4, 2023 · ea335d6 · ea335d6
1 parent cd773f8
commit ea335d6
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 167 deletions.
diff --git a/components/ContentLink.tsx b/components/ContentLink.tsx
@@ -1,40 +1,46 @@
-import { PropsWithChildren, useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 
 import { Content } from 'data/graphql-generated';
 import { Link } from 'components';
 import { LinkProps } from '@mui/material';
 import UserContext from 'app/UserContext';
 import { contentUrl } from 'util/url-factory';
 
-const ContentLink: React.FC<
-  PropsWithChildren<{
-    item: Pick<Content, 'title' | 'forceRefresh' | 'hidden' | 'username' | 'section' | 'album' | 'name'>;
-    currentContent?: Content;
-    rel?: string;
-    url?: string;
-    className?: string;
-    sx?: LinkProps['sx'];
-  }>
-> = (props) => {
-  const { user } = useContext(UserContext);
+const ContentLink = forwardRef(
+  (
+    props: {
+      children: JSX.Element;
+      item: Pick<Content, 'title' | 'forceRefresh' | 'hidden' | 'username' | 'section' | 'album' | 'name'>;
+      currentContent?: Content;
+      rel?: string;
+      url?: string;
+      className?: string;
+      sx?: LinkProps['sx'];
+    },
+    ref
+  ) => {
+    const { user } = useContext(UserContext);
 
-  const item = props.item;
-  const currentContent = props.currentContent || { forceRefresh: false };
-  const isOwnerViewing = user?.username === item.username;
-  const { rel, url } = props;
+    const item = props.item;
+    const currentContent = props.currentContent || { forceRefresh: false };
+    const isOwnerViewing = user?.username === item.username;
+    const { rel, url } = props;
 
-  return (
-    <Link
-      href={url || contentUrl(item)}
-      title={item.title}
-      className={props.className}
-      target={item.forceRefresh || currentContent.forceRefresh ? '_self' : ''}
-      rel={rel}
-      sx={{ fontStyle: isOwnerViewing && item.hidden ? 'italic' : 'normal', ...props.sx }}
-    >
-      {props.children}
-    </Link>
-  );
-};
+    return (
+      <Link
+        href={url || contentUrl(item)}
+        title={item.title}
+        className={props.className}
+        target={item.forceRefresh || currentContent.forceRefresh ? '_self' : ''}
+        ref={ref}
+        rel={rel}
+        sx={{ fontStyle: isOwnerViewing && item.hidden ? 'italic' : 'normal', ...props.sx }}
+      >
+        {props.children}
+      </Link>
+    );
+  }
+);
+ContentLink.displayName = 'ContentLink';
 
 export default ContentLink;
diff --git a/components/ItemWrapper.tsx b/components/ItemWrapper.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
 import { styled } from '@mui/material/styles';
 
 const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
@@ -86,8 +86,14 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
   }
 `;
 
-const ItemWrapper: React.FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
-  return <StyledItemWrapper className={className}>{children}</StyledItemWrapper>;
-};
+const ItemWrapper = forwardRef(({ children, className }: { children: JSX.Element; className?: string }, ref) => {
+  // @ts-ignore this is fine.
+  return (
+    <StyledItemWrapper ref={ref} className={className}>
+      {children}
+    </StyledItemWrapper>
+  );
+});
+ItemWrapper.displayName = 'ItemWrapper';
 
 export default ItemWrapper;
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -2,13 +2,22 @@ import { ForwardedRef, forwardRef } from 'react';
 import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
 import NextLink, { LinkProps } from 'next/link';
 
-const BaseLink: React.FC<MuiLinkProps & LinkProps> = ({ children, as, href, shallow, target, ...props }) => (
-  <NextLink href={href || ''} as={as} shallow={shallow} passHref legacyBehavior>
-    <MuiLink underline="hover" target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined} {...props}>
-      {children}
-    </MuiLink>
-  </NextLink>
+const BaseLink: React.FC<MuiLinkProps & LinkProps> = forwardRef(
+  ({ children, as, href, shallow, target, ...props }, ref) => (
+    <NextLink href={href || ''} as={as} shallow={shallow} passHref legacyBehavior>
+      <MuiLink
+        underline="hover"
+        target={target}
+        rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </MuiLink>
+    </NextLink>
+  )
 );
+BaseLink.displayName = 'BaseLink';
 
 // @ts-ignore
 const Link = forwardRef(function ForwardedLink(props: MuiLinkProps & LinkProps, ref: ForwardedRef<typeof Link>) {

diff --git a/components/content/Item.tsx b/components/content/Item.tsx
@@ -9,7 +9,8 @@ import Footer from './Footer';
 import Header from './Header';
 import Latest from './templates/Latest';
 import Simple from './templates/Simple';
-//import { animated, useTransition } from 'react-spring';
+import { forwardRef } from 'react';
+import { animated, useTransition } from 'react-spring';
 
 const StyledItem = styled('article', { label: 'Item' })`
   display: flex;
@@ -30,44 +31,58 @@ const COMPONENT_TYPE_MAP = {
   links: Album,
 };
 
-export default function Item(props: {
-  className?: string;
-  content: Content;
-  contentOwner: UserPublic;
-  comments?: Comment[];
-  favorites?: Favorite[];
-  isFeed?: boolean;
-}) {
-  // const transitions = useTransition(props.content, {
-  //   from: { opacity: 0 },
-  //   enter: { opacity: 1 },
-  //   leave: { display: 'none', opacity: 0 },
-  // });
+const Item = forwardRef(
+  (
+    props: {
+      className?: string;
+      content: Content;
+      contentOwner: UserPublic;
+      comments?: Comment[];
+      favorites?: Favorite[];
+      isFeed?: boolean;
+    },
+    ref
+  ) => {
+    const transitions = useTransition(props.content, {
+      from: { opacity: 0 },
+      enter: { opacity: 1 },
+      leave: { display: 'none', opacity: 0 },
+    });
 
-  // TODO
-  //const template = useRef(null);
+    // TODO
+    //const template = useRef(null);
 
-  // useImperativeHandle(ref, () => ({
-  //   getEditor: () => {
-  //     return template.current?.getEditor && template.current.getEditor();
-  //   },
-  // }));
+    // useImperativeHandle(ref, () => ({
+    //   getEditor: () => {
+    //     return template.current?.getEditor && template.current.getEditor();
+    //   },
+    // }));
 
-  const { className, content, contentOwner, comments, favorites, isFeed } = props;
-  /* @ts-ignore */
-  const TemplateComponent = COMPONENT_TYPE_MAP[content.template] || Simple;
-  const contentComponent = <TemplateComponent content={content} isFeed={isFeed} />;
+    const { className, content, contentOwner, comments, favorites, isFeed } = props;
+    /* @ts-ignore */
+    const TemplateComponent = COMPONENT_TYPE_MAP[content.template] || Simple;
+    const contentComponent = <TemplateComponent content={content} isFeed={isFeed} />;
 
-  return (
-    <ItemWrapper>
-      <StyledItem className={`hw-item h-entry ${className || ''}`}>
-        <Header content={content} />
-        {/* @ts-ignore */}
-        {COMPONENT_TYPE_MAP[content.template] ? contentComponent : <InnerView>{contentComponent}</InnerView>}
-        <Footer content={content} contentOwner={contentOwner} />
-        {!isFeed && comments?.length ? <Comments comments={comments} content={content} /> : null}
-        {!isFeed && favorites?.length ? <Favorites favorites={favorites} /> : null}
-      </StyledItem>
-    </ItemWrapper>
-  );
-}
+    return (
+      <ItemWrapper ref={ref}>
+        <StyledItem className={`hw-item h-entry ${className || ''}`}>
+          <Header content={content} />
+          {/* @ts-ignore */}
+          {COMPONENT_TYPE_MAP[content.template]
+            ? contentComponent
+            : transitions((style) => (
+                <animated.div style={style}>
+                  <InnerView>{contentComponent}</InnerView>
+                </animated.div>
+              ))}
+          <Footer content={content} contentOwner={contentOwner} />
+          {!isFeed && comments?.length ? <Comments comments={comments} content={content} /> : null}
+          {!isFeed && favorites?.length ? <Favorites favorites={favorites} /> : null}
+        </StyledItem>
+      </ItemWrapper>
+    );
+  }
+);
+Item.displayName = 'Item';
+
+export default Item;