From 64e5c956d4fb3f172aaa605aa9accb3e3e442cde Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 8 Jun 2021 10:50:48 +1000
Subject: [PATCH] LinkBlocks: add component

---
 .../src/views/apps/links/components/LinkBlocks.tsx  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx b/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
index 5277981f8..fca533ac9 100644
--- a/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
@@ -1,11 +1,12 @@
 import { Col, Row, Text } from '@tlon/indigo-react';
 import { Association, Graph } from '@urbit/api';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import _ from 'lodash';
 import { useResize } from '~/logic/lib/useResize';
 import { LinkBlockItem } from './LinkBlockItem';
 import { LinkBlockInput } from './LinkBlockInput';
 import GlobalApi from '~/logic/api/global';
+import useLocalState from '~/logic/state/local';
 
 export interface LinkBlocksProps {
   graph: Graph;
@@ -16,15 +17,18 @@ export function LinkBlocks(props: LinkBlocksProps) {
   const { association, api } = props;
   const [linkSize, setLinkSize] = useState(250);
   const linkSizePx = `${linkSize}px`;
+
+  const isMobile = useLocalState(s => s.mobile);
+  const colCount = useMemo(() => isMobile ? 2 : 5, [isMobile]);
   const bind = useResize<HTMLDivElement>(
     useCallback((entry) => {
-      setLinkSize((entry.borderBoxSize[0].inlineSize - 16) / 5 - 8);
-    }, [])
+      setLinkSize((entry.borderBoxSize[0].inlineSize - 16) / colCount - 8);
+    }, [colCount])
   );
 
   const nodes = [null, ...Array.from(props.graph)];
 
-  const chunks = _.chunk(nodes, 5);
+  const chunks = _.chunk(nodes, colCount);
 
   return (
     <Col overflowY="auto" width="100%" height="100%" {...bind}>
@@ -56,6 +60,7 @@ export function LinkBlocks(props: LinkBlocksProps) {
                 key={i.toString()}
                 size={linkSizePx}
                 node={node}
+                api={api}
                 summary
               />
             );