refactored component errors

src/components/node/ImageSwitcher/index.tsx

@@ -19,7 +19,10 @@ const ImageSwitcher: FC<IProps> = ({ total, current, onChange, loaded }) => {
       <div className={styles.switcher}>
         {range(0, total).map(item => (
           <div
-            className={classNames({ is_active: item === current, is_loaded: loaded[item] })}
+            className={classNames({
+              is_active: item === current,
+              is_loaded: loaded && loaded[item],
+            })}
             key={item}
             onClick={() => onChange(item)}
           />

src/components/node/NodeComments/index.tsx

@@ -14,7 +14,7 @@ import { modalShowPhotoswipe } from '~/redux/modal/actions';
 import { useDispatch } from 'react-redux';
 
 interface IProps {
-  comments?: IComment[];
+  comments: IComment[];
   count: INodeState['comment_count'];
   user: IUser;
   order?: 'ASC' | 'DESC';

src/components/node/NodeImageSlideBlock/index.tsx

@@ -36,8 +36,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
   const [is_dragging, setIsDragging] = useState(false);
   const [drag_start, setDragStart] = useState(0);
 
-  const slide = useRef<HTMLDivElement>();
-  const wrap = useRef<HTMLDivElement>();
+  const slide = useRef<HTMLDivElement>(null);
+  const wrap = useRef<HTMLDivElement>(null);
 
   const setHeightThrottled = useCallback(throttle(100, setHeight), [setHeight]);
 
@@ -221,6 +221,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
 
   const changeCurrent = useCallback(
     (item: number) => {
+      if (!wrap.current) return;
+
       const { width } = wrap.current.getBoundingClientRect();
       setOffset(-1 * item * width);
     },
@@ -266,10 +268,10 @@ const NodeImageSlideBlock: FC<IProps> = ({
                   [styles.is_active]: index === current,
                 })}
                 ref={setRef(index)}
-                key={node.updated_at + file.id}
+                key={`${node?.updated_at || ''} + ${file?.id || ''} + ${index}`}
               >
                 <svg
-                  viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
+                  viewBox={`0 0 ${file?.metadata?.width || 0} ${file?.metadata?.height || 0}`}
                   className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
                   style={{
                     maxHeight: max_height,

src/components/node/NodePanel/index.tsx

@@ -24,11 +24,11 @@ const NodePanel: FC<IProps> = memo(
   ({ node, layout, can_edit, can_like, can_star, is_loading, onEdit, onLike, onStar, onLock }) => {
     const [stack, setStack] = useState(false);
 
-    const ref = useRef(null);
+    const ref = useRef<HTMLDivElement>(null);
     const getPlace = useCallback(() => {
       if (!ref.current) return;
 
-      const { bottom } = ref.current.getBoundingClientRect();
+      const { bottom } = ref.current!.getBoundingClientRect();
 
       setStack(bottom > window.innerHeight);
     }, [ref]);
@@ -75,7 +75,7 @@ const NodePanel: FC<IProps> = memo(
           can_edit={can_edit}
           can_like={can_like}
           can_star={can_star}
-          is_loading={is_loading}
+          is_loading={!!is_loading}
         />
       </div>
     );

src/components/node/NodePanelInner/index.tsx

@@ -96,7 +96,9 @@ const NodePanelInner: FC<IProps> = memo(
                   <Icon icon="heart" size={24} onClick={onLike} />
                 )}
 
-                {like_count > 0 && <div className={styles.like_count}>{like_count}</div>}
+                {!!like_count && like_count > 0 && (
+                  <div className={styles.like_count}>{like_count}</div>
+                )}
               </div>
             )}
           </div>

src/components/node/NodeRelatedItem/index.tsx

@@ -1,16 +1,16 @@
-import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
-import { INode } from "~/redux/types";
-import { PRESETS, URLS } from "~/constants/urls";
-import { RouteComponentProps, withRouter } from "react-router";
-import { getURL, stringToColour } from "~/utils/dom";
+import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { INode } from '~/redux/types';
+import { PRESETS, URLS } from '~/constants/urls';
+import { RouteComponentProps, withRouter } from 'react-router';
+import { getURL, stringToColour } from '~/utils/dom';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;
 };
 
-type CellSize = 'small' | 'medium' | 'large'
+type CellSize = 'small' | 'medium' | 'large';
 
 const getTitleLetters = (title: string): string => {
   const words = (title && title.split(' ')) || [];
@@ -43,17 +43,21 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
 
   useEffect(() => {
     if (!ref.current) return;
-    const cb = () => setWidth(ref.current.getBoundingClientRect().width)
+
+    const cb = () => setWidth(ref.current!.getBoundingClientRect().width);
+
     window.addEventListener('resize', cb);
+
     cb();
+
     return () => window.removeEventListener('resize', cb);
-  }, [ref.current])
+  }, [ref.current]);
 
   const size = useMemo<CellSize>(() => {
     if (width > 90) return 'large';
     if (width > 76) return 'medium';
     return 'small';
-  }, [width])
+  }, [width]);
 
   return (
     <div

src/components/node/NodeTextBlock/index.tsx

@@ -9,7 +9,7 @@ import markdown from '~/styles/common/markdown.module.scss';
 interface IProps extends INodeComponentProps {}
 
 const NodeTextBlock: FC<IProps> = ({ node }) => {
-  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node)), [
+  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
     node.blocks,
   ]);
 

src/components/node/NodeVideoBlock/index.tsx

@@ -7,7 +7,7 @@ interface IProps extends INodeComponentProps {}
 
 const NodeVideoBlock: FC<IProps> = ({ node }) => {
   const video = useMemo(() => {
-    const url: string = path(['blocks', 0, 'url'], node);
+    const url: string = path(['blocks', 0, 'url'], node) || '';
     const match =
       url &&
       url.match(