fix: fix conflicts

stakwork · Nov 15, 2023 · 12dcc02 · 12dcc02
2 parents 3c514ac + f114a3a
commit 12dcc02
Show file tree

Hide file tree

Showing 19 changed files with 821 additions and 198 deletions.
diff --git a/build/assets/index-1194f5b5.js → build/assets/index-d57b3dfa.js b/build/assets/index-1194f5b5.js → build/assets/index-d57b3dfa.js
diff --git a/build/index.html b/build/index.html
@@ -22,7 +22,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Second Brain</title>
-    <script type="module" crossorigin src="/assets/index-1194f5b5.js"></script>
+    <script type="module" crossorigin src="/assets/index-d57b3dfa.js"></script>
     <link rel="stylesheet" href="/assets/index-9a4cd8a9.css">
   </head>
   <body style="background: #000">

diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx
@@ -0,0 +1,34 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+import { BaseModal } from '~/components/Modal'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { useModal } from '~/stores/useModalStore'
+
+type Props = {
+  text: string
+  onClose: () => void
+}
+
+export const BriefDescription: FC<Props> = ({ text, onClose }) => {
+  const { close } = useModal('briefDescription')
+
+  const handleClose = () => {
+    onClose()
+    close()
+  }
+
+  return (
+    <BaseModal id="briefDescription" kind="regular" onClose={handleClose} preventOutsideClose>
+      <Flex py={16}>
+        <StyledText>{text}</StyledText>
+      </Flex>
+    </BaseModal>
+  )
+}
+
+const StyledText = styled(Text)`
+  font-size: 18px;
+  font-weight: 400;
+  font-family: 'Barlow';
+`
diff --git a/src/components/App/SideBar/Trending/index.tsx b/src/components/App/SideBar/Trending/index.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@mui/material'
+import { Button, Skeleton } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
@@ -7,8 +7,10 @@ import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
 import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/fetchGraphData'
 import { useDataStore } from '~/stores/useDataStore'
+import { useModal } from '~/stores/useModalStore'
 import { Trending as TrendingType } from '~/types'
 import { colors } from '~/utils/colors'
+import { BriefDescription } from './BriefDescriptionModal'
 
 const TRENDING_TOPICS = ['Drivechain', 'Ordinals', 'L402', 'Nostr', 'AI']
 
@@ -18,6 +20,8 @@ type Props = {
 
 export const Trending = ({ onSubmit }: Props) => {
   const [loading, setLoading] = useState(false)
+  const [briefDescription, setBriefDescription] = useState('')
+  const { open } = useModal('briefDescription')
 
   const [trendingTopics, setTrendingTopics] = useDataStore((s) => [s.trendingTopics, s.setTrendingTopics])
 
@@ -31,10 +35,10 @@ export const Trending = ({ onSubmit }: Props) => {
         const res = await getTrends()
 
         if (res.length) {
-          setTrendingTopics(res.map((i: TrendingType) => i.topic))
+          setTrendingTopics(res)
         }
       } catch (err) {
-        setTrendingTopics(TRENDING_TOPICS)
+        setTrendingTopics(TRENDING_TOPICS.map((i) => ({ topic: i, count: 0 })))
       } finally {
         setLoading(false)
       }
@@ -50,6 +54,15 @@ export const Trending = ({ onSubmit }: Props) => {
     onSubmit?.()
   }
 
+  const showModal = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, trending: TrendingType) => {
+    e.stopPropagation()
+
+    if (trending?.tldr) {
+      setBriefDescription(trending.tldr)
+      open()
+    }
+  }
+
   return (
     <Wrapper>
       <div className="heading">
@@ -70,13 +83,22 @@ export const Trending = ({ onSubmit }: Props) => {
         ) : (
           <>
             {trendingTopics.map((i) => (
-              <Flex key={i} className="list-item" onClick={() => selectTrending(i)}>
-                #{i}
+              <Flex
+                key={i.topic}
+                align="center"
+                className="list-item"
+                direction="row"
+                justify="space-between"
+                onClick={() => selectTrending(i.topic)}
+              >
+                <span>#{i.topic}</span>
+                {i.tldr && <Button onClick={(e) => showModal(e, i)}>TLDR</Button>}
               </Flex>
             ))}
           </>
         )}
       </ul>
+      <BriefDescription onClose={() => setBriefDescription('')} text={briefDescription} />
     </Wrapper>
   )
 }

diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx
@@ -1,6 +1,6 @@
 import { Slide } from '@mui/material'
 import clsx from 'clsx'
-import { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'

diff --git a/src/components/BaseTextInput/types/index.ts b/src/components/BaseTextInput/types/index.ts
@@ -1,4 +1,4 @@
-import { KeyboardEvent, MutableRefObject } from 'react'
+import { FocusEvent, KeyboardEvent, MutableRefObject } from 'react'
 import { ColorName } from '~/utils/colors'
 import { AutoComplete } from '../tokens/autoComplete'
 
@@ -25,7 +25,7 @@ export type BaseTextInputProps = {
   name: string
   onBlur?: () => void
   onChange?: (value: string) => void
-  onFocus?: () => void
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void
   onSubmitEditing?: (value: string) => void
   placeholder?: string

diff --git a/...ponents/SourcesTableModal/SourcesView/Topics/MergeTopicModal/Title/Autocomplete/index.tsx b/...ponents/SourcesTableModal/SourcesView/Topics/MergeTopicModal/Title/Autocomplete/index.tsx
@@ -0,0 +1,192 @@
+import { Divider, IconButton, InputBase, Paper, Popper } from '@mui/material'
+import clsx from 'clsx'
+import { debounce } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { ClipLoader } from 'react-spinners'
+import styled from 'styled-components'
+import ClearIcon from '~/components/Icons/ClearIcon'
+import SearchIcon from '~/components/Icons/SearchIcon'
+import { ALPHABETICALLY } from '~/components/SourcesTableModal/SourcesView/constants'
+import { Flex } from '~/components/common/Flex'
+import { getTopicsData } from '~/network/fetchSourcesData'
+import { FetchTopicResponse, Topic } from '~/types'
+import { colors } from '~/utils/colors'
+
+type Props = {
+  onSelect: (topic: Topic | null) => void
+  selectedTopic: Topic | null
+}
+
+export const DropdownSearch: React.FC<Props> = ({ onSelect, selectedTopic }) => {
+  const [isPopperOpen, setIsPopperOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [options, setOptions] = useState<Topic[]>([])
+  const [optionsIsLoading, setOptionsIsLoading] = useState(false)
+  const inputRef = useRef<HTMLFormElement>(null)
+
+  useEffect(() => () => setOptions([]), [setOptions])
+
+  const handleSearch = async (val: string) => {
+    const filters = {
+      muted: 'False',
+      sort_by: ALPHABETICALLY,
+      search: val,
+      skip: '0',
+      limit: '1000',
+    }
+
+    setOptionsIsLoading(true)
+
+    try {
+      const responseData: FetchTopicResponse = await getTopicsData(filters)
+
+      setOptions(responseData.data)
+    } catch (error) {
+      setOptions([])
+    } finally {
+      setOptionsIsLoading(false)
+    }
+  }
+
+  const debouncedSearch = useMemo(() => debounce(handleSearch, 300), [])
+
+  const handleSelectChange = (val: Topic) => {
+    onSelect(val)
+  }
+
+  const handleChange = (e: string) => {
+    setSearch(e)
+
+    if (!e) {
+      setOptions([])
+
+      return
+    }
+
+    if (e.length > 2) {
+      debouncedSearch(e)
+    }
+  }
+
+  return selectedTopic ? (
+    <SelectedValue>
+      <div className="value">{selectedTopic.topic}</div>
+      <Flex className="icon" onClick={() => onSelect(null)}>
+        <ClearIcon />
+      </Flex>
+    </SelectedValue>
+  ) : (
+    <>
+      <Paper
+        ref={inputRef}
+        component="form"
+        onSubmit={(e) => e.preventDefault()}
+        sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 200 }}
+      >
+        <InputBase
+          inputProps={{ 'aria-label': 'search topic' }}
+          onChange={(e) => handleChange(e.target.value)}
+          onFocus={() => setIsPopperOpen(true)}
+          placeholder="Search"
+          size="small"
+          sx={{ ml: 1, flex: 1 }}
+          value={search}
+        />
+        {search && (
+          <>
+            <StyledButton aria-label="search" onClick={() => handleChange('')} type="button">
+              <ClearIcon />
+            </StyledButton>
+            <Divider orientation="vertical" sx={{ height: 28, m: 0.5 }} />
+          </>
+        )}
+        <StyledButton aria-label="search" type="button">
+          {optionsIsLoading ? <ClipLoader color={colors.white} size={24} /> : <SearchIcon />}
+        </StyledButton>
+      </Paper>
+      {inputRef.current && options.length ? (
+        <StyledPopover anchorEl={inputRef.current} open={isPopperOpen} placement="bottom">
+          <>
+            {options.map((option) => (
+              <MenuItem
+                key="option"
+                className={clsx({ active: selectedTopic === option.ref_id })}
+                onClick={() => handleSelectChange(option)}
+              >
+                {option.topic}
+              </MenuItem>
+            ))}
+          </>
+        </StyledPopover>
+      ) : null}
+    </>
+  )
+}
+
+const MenuItem = styled(Flex).attrs({
+  direction: 'row',
+  align: 'center',
+})`
+  font-family: Barlow;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  overflow: hidden;
+  width: 200px;
+  color: ${colors.GRAY3};
+  margin-bottom: 4px;
+  cursor: pointer;
+  &.active {
+    color: ${colors.white};
+  }
+  &:hover {
+    color: ${colors.white};
+  }
+
+  .icon {
+    margin-right: 8px;
+    width: 9px;
+    font-size: 10px;
+  }
+`
+
+const StyledPopover = styled(Popper)`
+  && {
+    z-index: 99999;
+    background: ${colors.BUTTON1};
+    min-width: 200px;
+    padding: 16px;
+    color: ${colors.GRAY3};
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+    max-height: 200px;
+    overflow: auto;
+  }
+`
+
+const SelectedValue = styled(Flex).attrs({
+  direction: 'row',
+  justify: 'flex-start',
+  align: 'center',
+})`
+  .value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .icon {
+    margin-left: 8px;
+    width: 20px;
+    height: 20px;
+    color: ${colors.white};
+    background: ${colors.primaryBlue};
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+`
+
+const StyledButton = styled(IconButton)`
+  font-size: 24px;
+`
diff --git a/src/components/SourcesTableModal/SourcesView/Topics/MergeTopicModal/Title/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/MergeTopicModal/Title/index.tsx
@@ -0,0 +1,58 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { Topic } from '~/types'
+import { colors } from '~/utils/colors'
+import { DropdownSearch } from './Autocomplete'
+
+type Props = {
+  from: string
+  onSelect: (topic: Topic | null) => void
+  selectedTopic: Topic | null
+}
+
+export const TitleEditor: FC<Props> = ({ from, onSelect, selectedTopic }) => (
+  <Flex>
+    <Flex align="center" direction="row" justify="space-between" mb={18}>
+      <Flex align="center" direction="row">
+        <StyledText>Merge topic</StyledText>
+      </Flex>
+    </Flex>
+
+    <Content mb={12}>
+      <SectionWrapper>
+        <div className="label">From</div>
+        <div>{from}</div>
+      </SectionWrapper>
+      <SectionWrapper ml={24}>
+        <div className="label">To</div>
+        <DropdownSearch onSelect={onSelect} selectedTopic={selectedTopic} />
+      </SectionWrapper>
+    </Content>
+  </Flex>
+)
+
+const StyledText = styled(Text)`
+  font-size: 22px;
+  font-weight: 600;
+  font-family: 'Barlow';
+`
+
+const Content = styled(Flex).attrs({
+  align: 'flex-start',
+  direction: 'row',
+  justify: 'flex-start',
+})`
+  color: ${colors.white};
+  .label {
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 14px;
+    color: ${colors.GRAY3};
+  }
+`
+
+const SectionWrapper = styled(Flex)`
+  flex: 1 1 100%;
+`