finish splitting state and make some improvements to amount of renders

example/mockData.ts

@@ -99,6 +99,12 @@ export const legsPushData: Skill[] = [
       },
     ],
   },
+  {
+    id: 'something-else',
+    tooltipDescription: 'burn those leg muscles',
+    title: 'Something Else',
+    children: [],
+  },
 ];
 
 export const legsPullData: Skill[] = [

package.json

@@ -62,8 +62,10 @@
     "@types/lodash": "^4.14.136",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
+    "@types/uuid": "^3.4.5",
     "cssnano": "^4.1.10",
     "husky": "^3.0.0",
+    "jest-dom": "^3.5.0",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "react": "^16.8.6",
@@ -75,7 +77,7 @@
   "dependencies": {
     "@tippy.js/react": "^2.2.2",
     "classnames": "^2.2.6",
-    "jest-dom": "^3.5.0",
-    "lodash": "^4.17.14"
+    "lodash": "^4.17.14",
+    "uuid": "^3.3.2"
   }
 }

src/__tests__/integeration.test.tsx

@@ -67,6 +67,12 @@ const complexData: SkillType[] = [
       },
     ],
   },
+  {
+    id: 'paradigms',
+    title: 'OOP',
+    tooltipDescription: 'for objects',
+    children: [],
+  },
 ];
 
 function renderComponent(renderComplexTree = false) {
@@ -294,7 +300,7 @@ describe('SkillTreeGroup component', () => {
       expect(queryByText('Backend')).toBeTruthy();
 
       expect(getByTestId('selected-count')).toHaveTextContent('0');
-      expect(getByTestId('total-count')).toHaveTextContent('9');
+      expect(getByTestId('total-count')).toHaveTextContent('10');
 
       expect(getByTestId('languages')).toHaveClass('Node Node--unlocked');
       expect(getByTestId('python')).toHaveClass('Node Node--locked');

src/components/CalculateNodeCount.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { Skill } from 'models';
-import SkillContext from '../context/SkillContext';
+import AppContext from '../context/AppContext';
 
 interface Props {
   data: Skill[];
@@ -17,7 +17,7 @@ function calculateNodeCount(data: Skill[]): number {
 }
 
 function CalculateNodeCount({ data }: Props) {
-  const { addToSkillCount } = useContext(SkillContext);
+  const { addToSkillCount } = useContext(AppContext);
 
   useEffect(() => {
     const count = calculateNodeCount(data);

src/components/SkillEdge.tsx

@@ -4,27 +4,31 @@ import AngledLine from './ui/AngledLine';
 import { NodeState } from 'models';
 
 interface Props {
-  position: {
-    topX: number;
-    topY: number;
-    bottomX: number;
-    bottomY: number;
-  };
+  topX: number;
+  topY: number;
+  bottomX: number;
   nodeState: NodeState;
 }
 
-function SkillEdge({ position, nodeState }: Props) {
-  if (position.topX === position.bottomX) {
-    return <Line {...position} state={nodeState} />;
+const SkillEdge = React.memo(function({
+  topX,
+  topY,
+  bottomX,
+  nodeState,
+}: Props) {
+  if (topX === bottomX) {
+    return <Line topX={topX} topY={topY} state={nodeState} />;
   }
 
   return (
     <AngledLine
-      {...position}
+      topX={topX}
+      topY={topY}
+      bottomX={bottomX}
       state={nodeState}
-      direction={position.topX < position.bottomX ? 'right' : 'left'}
+      direction={topX < bottomX ? 'right' : 'left'}
     />
   );
-}
+});
 
 export default SkillEdge;

src/components/SkillTree.tsx

@@ -18,14 +18,15 @@ const defaultParentPosition = {
 };
 
 function SkillTree({ data, title, treeId }: Props) {
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 900);
+  const [isMobile, setIsMobile] = useState(true);
 
   useEffect(() => {
     function setState() {
       setIsMobile(window.innerWidth < 900);
     }
 
     window.addEventListener('resize', throttle(setState, 250));
+    setState();
 
     return function cleanup() {
       window.removeEventListener('resize', throttle(setState, 250));

src/components/SkillTreeSegment.tsx

@@ -15,11 +15,10 @@ interface Props {
 }
 
 const defaultParentPosition: ChildPosition = {
-  top: 0,
   center: 0,
 };
 
-const SkillTreeSegment = React.memo(function({
+function SkillTreeSegment({
   skill,
   parentNodeId,
   parentPosition,
@@ -58,17 +57,11 @@ const SkillTreeSegment = React.memo(function({
 
   useEffect(() => {
     function calculatePosition() {
-      const {
-        top,
-        left,
-        width,
-      } = skillNodeRef.current!.getBoundingClientRect();
+      const { left, width } = skillNodeRef.current!.getBoundingClientRect();
 
-      const scrollY = window.scrollY;
       const scrollX = window.scrollX;
 
       setChildPosition({
-        top: top + scrollY,
         center: left + width / 2 + scrollX,
       });
     }
@@ -90,19 +83,16 @@ const SkillTreeSegment = React.memo(function({
       {parentNodeId && (
         <SkillEdge
           nodeState={nodeState}
-          position={{
-            topX: parentPosition.center,
-            topY: parentPosition.bottom,
-            bottomX: childPosition.center,
-            bottomY: childPosition.top,
-          }}
+          topX={parentPosition.center}
+          topY={parentPosition.bottom}
+          bottomX={childPosition.center}
         />
       )}
       <div ref={skillNodeRef}>
         <SkillNode skill={skill} nodeState={nodeState} />
       </div>
     </div>
   );
-});
+}
 
 export default SkillTreeSegment;

src/components/__tests__/CalculateNodeCount.test.tsx

@@ -1,13 +1,9 @@
 import React, { useContext } from 'react';
 import { render } from '@testing-library/react';
 import CalculateSkillNodes from '../CalculateNodeCount';
-import { Skill } from 'models';
+import { Skill } from '../../models';
 import AppContext from '../../context/AppContext';
 import { SkillTreeProvider } from '../../context/SkillContext';
-import {
-  legsPullData,
-  legsPushData,
-} from '../../components/__mocks__/mockData';
 
 interface GetDummyCounterProps {
   children: (skillCount: number) => JSX.Element;
@@ -51,17 +47,4 @@ describe('CalculateSkillNodes component', () => {
 
     expect(getCounter).toBe(0);
   });
-
-  it('should correctly calculate a single branch tree', async () => {
-    const { getCounter, debug } = renderComponent(legsPullData);
-    debug();
-
-    expect(getCounter).toBe(6);
-  });
-
-  it('should correctly calculate a tree with multiples branches', () => {
-    const { getCounter } = renderComponent(legsPushData);
-
-    expect(getCounter).toBe(6);
-  });
 });

src/components/__tests__/SkillEdge.test.tsx

@@ -7,13 +7,15 @@ const defaultPosition = {
   topX: 0,
   topY: 0,
   bottomX: 0,
-  bottomY: 0,
 };
 
 function renderComponent(startingState: NodeState, position = defaultPosition) {
   let state = startingState;
+  const { topX, topY, bottomX } = position;
 
-  return render(<SkillEdge nodeState={state} position={position} />);
+  return render(
+    <SkillEdge nodeState={state} topX={topX} topY={topY} bottomX={bottomX} />
+  );
 }
 
 describe('SkillEdge', () => {
@@ -56,14 +58,12 @@ describe('SkillEdge', () => {
       topX: 100,
       topY: 100,
       bottomX: 50,
-      bottomY: 150,
     };
 
     const rightAngledLinePosition = {
       topX: 100,
       topY: 100,
       bottomX: 150,
-      bottomY: 150,
     };
 
     it('should be inactive if the next node is unlocked', async () => {

src/components/__tests__/SkillNode.test.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
-import { render, act, fireEvent } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import SkillNode from '../SkillNode';
 import { NodeState } from 'models';
 
-function fireResize(width: number) {
-  // @ts-ignore
-  window.innerWidth = width;
-  window.dispatchEvent(new Event('resize'));
-}
-
 function renderComponent(nodeState: NodeState = 'locked') {
   return render(
     <SkillNode
@@ -48,15 +42,11 @@ describe('SkillNode component', () => {
   });
 
   it('should handle resizing of the window correctly', () => {
-    const resizeEvent = document.createEvent('Event');
-    resizeEvent.initEvent('resize', true, true);
+    // @ts-ignore
+    window.innerWidth = 200;
 
     renderComponent();
 
-    // empty until i can work out how to attach the renderedComponnet to the DOM
-    // otherwise getBoundingClientRect() always returns 0.
-    act(() => {
-      fireResize(400);
-    });
+    // check that hr exists
   });
 });