Merge branch 'master' into implement-new-splash-screen

stakwork · Nov 30, 2023 · a35125e · a35125e
2 parents b3d6205 + 78432cb
commit a35125e
Show file tree

Hide file tree

Showing 14 changed files with 1,004 additions and 286 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,3 @@
-Connection to the ec2 instance with the sphinx-nav code (ask for the pem key)
-
-`ssh -i ./pemFiles/knowlege-graph-api.pem [email protected]`
-
 ## Available Scripts
 
 In the project directory, you can run:
@@ -70,3 +66,11 @@ build docker image
 run the image on localhost
 
 `docker run -p 3004:80 sphinx_nav_fiber`
+
+### Generate icons for latest layout
+
+Add svg icon to public/svg-icons with proper naming
+
+run `node ./svgLibBuilder.js`
+
+it will generate React Icon in src/components/Icons
diff --git a/build/assets/index-02bc9458.js → build/assets/index-2401314d.js b/build/assets/index-02bc9458.js → build/assets/index-2401314d.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-02bc9458.js"></script>
+    <script type="module" crossorigin src="/assets/index-2401314d.js"></script>
     <link rel="stylesheet" href="/assets/index-9a4cd8a9.css">
   </head>
   <body style="background: #000">

diff --git a/build/svg-icons/PlusIcon.svg b/build/svg-icons/PlusIcon.svg
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "react-input-mask": "3.0.0-alpha.2",
     "react-is": "^18.2.0",
     "react-lottie": "^1.2.3",
+    "react-markdown": "^9.0.1",
     "react-player": "^2.11.2",
     "react-spinners": "^0.13.3",
     "react-toastify": "^8.2.0",

diff --git a/public/svg-icons/PlusIcon.svg b/public/svg-icons/PlusIcon.svg
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -51,6 +51,7 @@ export type Props = {
   showTitle?: string
   text?: string
   link?: string
+  sourceLink?: string
   type?: string
   name?: string
   verified?: boolean
@@ -73,6 +74,7 @@ export const Episode = ({
   name,
   profilePicture,
   link,
+  sourceLink,
   verified = false,
   twitterHandle,
   className = 'episode-wrapper',
@@ -86,9 +88,9 @@ export const Episode = ({
 
   const defaultViewTypes = ['tweet', 'person', 'guest', 'topic']
 
-  return (
+  return type ? (
     <EpisodeWrapper className={className} isSelected={isSelected} onClick={onClick}>
-      {type && defaultViewTypes.includes(type) && (
+      {!defaultViewTypes.includes(type) ? (
         <Flex direction="row">
           {!isSelectedView && (
             <Flex align="center" pr={16}>
@@ -101,7 +103,7 @@ export const Episode = ({
               <Flex align="center" direction="row">
                 {type && <TypeBadge type={type} />}
               </Flex>
-              {type === 'youtube' && link ? (
+              {type === 'youtube' && sourceLink ? (
                 <StyledLink href={`${link}?open=system`} onClick={(e) => e.stopPropagation()}>
                   <LinkIcon />
                 </StyledLink>
@@ -120,28 +122,31 @@ export const Episode = ({
             </Flex>
           </Flex>
         </Flex>
-      )}
-      {type === 'topic' && (
-        <TypeTopic>
-          <HashtagIcon />
-          <p>{subtitle}</p>
-        </TypeTopic>
-      )}
-      {['person', 'guest'].includes(type as string) && (
-        <TypePerson imageUrl={imageUrl} name={name || ''} title={showTitle || ''} />
-      )}
-      {type === 'tweet' && (
-        <TypeTweet
-          date={date}
-          imageUrl={profilePicture}
-          name={name || ''}
-          text={text || ''}
-          twitterHandle={twitterHandle}
-          verified={verified}
-        />
+      ) : (
+        <>
+          {type === 'topic' && (
+            <TypeTopic>
+              <HashtagIcon />
+              <p>{subtitle}</p>
+            </TypeTopic>
+          )}
+          {['person', 'guest'].includes(type as string) && (
+            <TypePerson imageUrl={imageUrl} name={name || ''} title={showTitle || ''} />
+          )}
+          {type === 'tweet' && (
+            <TypeTweet
+              date={date}
+              imageUrl={profilePicture}
+              name={name || ''}
+              text={text || ''}
+              twitterHandle={twitterHandle}
+              verified={verified}
+            />
+          )}
+        </>
       )}
     </EpisodeWrapper>
-  )
+  ) : null
 }
 
 export const Description = styled(Flex)`

diff --git a/src/components/App/SideBar/Relevance/index.tsx b/src/components/App/SideBar/Relevance/index.tsx
@@ -66,6 +66,7 @@ export const Relevance = ({ isSearchResult }: Props) => {
             show_title: showTitle,
             node_type: nodeType,
             text,
+            source_link: sourceLink,
             link,
             name,
             profile_picture: profilePicture,
@@ -87,6 +88,7 @@ export const Relevance = ({ isSearchResult }: Props) => {
               onClick={() => handleNodeClick(n)}
               profilePicture={profilePicture}
               showTitle={formatDescription(showTitle)}
+              sourceLink={sourceLink}
               text={text || ''}
               twitterHandle={twitterHandle}
               type={nodeType || type}

diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx
@@ -1,4 +1,5 @@
-import { FC } from 'react'
+import { FC, useCallback, useEffect } from 'react'
+import Markdown from 'react-markdown'
 import styled from 'styled-components'
 import { BaseModal } from '~/components/Modal'
 import { Flex } from '~/components/common/Flex'
@@ -8,27 +9,55 @@ import { useModal } from '~/stores/useModalStore'
 type Props = {
   text: string
   onClose: () => void
+  topic: string
 }
 
-export const BriefDescription: FC<Props> = ({ text, onClose }) => {
+export const BriefDescription: FC<Props> = ({ text, onClose, topic }) => {
   const { close } = useModal('briefDescription')
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     onClose()
     close()
-  }
+  }, [onClose, close])
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleClose)
+
+    return () => {
+      window.removeEventListener('keydown', handleClose)
+    }
+  }, [handleClose])
 
   return (
-    <BaseModal id="briefDescription" kind="regular" onClose={handleClose} preventOutsideClose>
-      <Flex py={16}>
-        <StyledText>{text}</StyledText>
-      </Flex>
+    <BaseModal id="briefDescription" kind="regular" onClose={handleClose}>
+      <Title>{topic}</Title>
+      <ScrollableContent>
+        <Flex>
+          <StyledText>
+            <Markdown>{text}</Markdown>
+          </StyledText>
+        </Flex>
+      </ScrollableContent>
     </BaseModal>
   )
 }
 
+const ScrollableContent = styled.div`
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 8px 0;
+`
+
 const StyledText = styled(Text)`
   font-size: 18px;
   font-weight: 400;
   font-family: 'Barlow';
+  * {
+    all: revert;
+  }
+`
+
+const Title = styled(Text)`
+  font-weight: 600;
+  font-size: 20px;
 `
diff --git a/src/components/App/SideBar/Trending/index.tsx b/src/components/App/SideBar/Trending/index.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
-import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
+import PlusIcon from '~/components/Icons/PlusIcon'
 import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/fetchGraphData'
 import { useDataStore } from '~/stores/useDataStore'
@@ -19,8 +19,11 @@ type Props = {
 }
 
 export const Trending = ({ onSubmit }: Props) => {
+  const { open: openContentAddModal } = useModal('addContent')
   const [loading, setLoading] = useState(false)
   const [briefDescription, setBriefDescription] = useState('')
+  const [selectedTopic, setSelectedTopic] = useState('')
+
   const { open } = useModal('briefDescription')
 
   const [trendingTopics, setTrendingTopics] = useDataStore((s) => [s.trendingTopics, s.setTrendingTopics])
@@ -56,49 +59,71 @@ export const Trending = ({ onSubmit }: Props) => {
 
   const showModal = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, trending: TrendingType) => {
     e.stopPropagation()
+    e.currentTarget.blur()
 
     if (trending?.tldr) {
       setBriefDescription(trending.tldr)
+      setSelectedTopic(trending.topic)
       open()
     }
   }
 
+  const hideModal = () => {
+    setBriefDescription('')
+    setSelectedTopic('')
+  }
+
   return (
     <Wrapper>
-      <div className="heading">
-        <span className="heading__title">Trending Topics</span>
-        <span className="heading__icon">
-          {loading ? <ClipLoader color={colors.PRIMARY_BLUE} size={16} /> : <SentimentDataIcon />}
-        </span>
-      </div>
-      <ul className="list">
-        {loading ? (
-          <>
-            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
-            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
-            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
-            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
-            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
-          </>
+      <div>
+        {trendingTopics.length === 0 && !loading ? (
+          <div className="Trendingwrapper">
+            <Text>No new trending topics in the last 24 hours</Text>
+            <ButtonStyled
+              color="secondary"
+              onClick={openContentAddModal}
+              size="medium"
+              startIcon={<PlusIcon />}
+              sx={{ alignSelf: 'flex-end', m: '0 36px 16px 0' }}
+              variant="contained"
+            >
+              Add Content
+            </ButtonStyled>
+          </div>
         ) : (
-          <>
-            {trendingTopics.map((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 className="list">
+            {loading ? (
+              <div>
+                <ClipLoader color={colors.PRIMARY_BLUE} size={16} />
+                <>
+                  <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+                  <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+                  <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+                  <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+                  <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+                </>
+              </div>
+            ) : (
+              <>
+                {trendingTopics.map((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>
         )}
-      </ul>
-      <BriefDescription onClose={() => setBriefDescription('')} text={briefDescription} />
+      </div>
+      <BriefDescription onClose={hideModal} text={briefDescription} topic={selectedTopic} />
     </Wrapper>
   )
 }
@@ -122,6 +147,10 @@ const Wrapper = styled(Flex)`
       font-size: 24px;
     }
   }
+  .Trendingwrapper {
+    margin-left: 23px;
+    margin-top: 20px;
+  }
 
   .list {
     list-style: none;
@@ -158,3 +187,10 @@ const StyledSkeleton = styled(Skeleton)`
     background: rgba(0, 0, 0, 0.15);
   }
 `
+
+const Text = styled.p`
+  color: ${colors.GRAY6};
+  margin-bottom: 20px;
+`
+
+const ButtonStyled = styled(Button)``
diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
@@ -40,7 +40,7 @@ export const YouTube = () => {
 
     if (isReady) {
       player?.seekTo(secs)
-      player?.getInternalPlayer()?.play()
+      typeof player?.getInternalPlayer()?.playVideo === 'function' && player?.getInternalPlayer().playVideo()
     }
 
     if (scrollTargetRef.current) {