components/Sidebar/Backlinks.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import { LinksByNodeId, NodeById } from '../../pages/index'

import { GraphData, NodeObject, LinkObject } from 'force-graph'

import { normalizeLinkEnds } from '../../pages/index'
import { VStack, Box, Button, Heading, StackDivider } from '@chakra-ui/react'
import React from 'react'
import { ProcessedOrg } from '../../util/processOrg'

export interface BacklinksProps {
  previewNode: any
  setPreviewNode: any
  nodeById: NodeById
  linksByNodeId: LinksByNodeId
  getText: any
}

import { PreviewLink } from './Link'

export const Backlinks = (props: BacklinksProps) => {
  const { previewNode, setPreviewNode, nodeById, linksByNodeId, getText } = props
  const links = linksByNodeId[previewNode?.id] ?? []
  return (
    <Box>
      <Heading pt={4}>{'Backlinks (' + links.length + ')'}</Heading>
      <VStack
        pt={2}
        spacing={3}
        alignItems="start"
        divider={<StackDivider borderColor="gray.500" />}
        align="stretch"
        color="gray.800"
      >
        {previewNode?.id &&
          links.map((link: LinkObject, i: number) => {
            const [source, target] = normalizeLinkEnds(link)
            if (source === previewNode?.id) {
              return
            }
            return (
              <Box overflow="hidden" p={3} bg="gray.300" width="100%" key={source}>
                <PreviewLink
                  href={'id:' + source}
                  children={nodeById[source]?.title}
                  nodeById={nodeById}
                  setPreviewNode={setPreviewNode}
                  getText={getText}
                />
              </Box>
            )
          })}
      </VStack>
    </Box>
  )
}