feat: update tweet view (#406)

* feat: update tweet view * feat: update video view * refactor: changed conditional ? : to && * fix: prettier fix and added && --------- Co-authored-by: Расул <[email protected]> Co-authored-by: Github Actions <[email protected]>
stakwork · Sep 14, 2023 · 584c74e · 584c74e
1 parent 9be146f
commit 584c74e
Show file tree

Hide file tree

Showing 35 changed files with 312 additions and 8,296 deletions.
diff --git a/build/assets/index-a0a96d66.js b/build/assets/index-a0a96d66.js
diff --git a/src/components/App/AppBar/index.tsx b/src/components/App/AppBar/index.tsx
@@ -1,22 +1,52 @@
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Stats } from '~/components/Stats'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
+import { TAboutParams, getAboutData } from '~/network/fetchSourcesData'
 import { colors } from '~/utils/colors'
 import { media } from '~/utils/media'
 
-export const AppBar = () => (
-  <Header>
-    <TitleWrapper>
-      <Text className="title" color="white">
-        Bitcoin
-      </Text>
-      <Text className="subtitle"> Second Brain</Text>
-    </TitleWrapper>
-
-    <Stats />
-  </Header>
-)
+const defaultData = {
+  description: '',
+  mission_statement: '',
+  search_term: '',
+  title: '',
+}
+
+export const AppBar = () => {
+  const [initialValues, setInitialValues] = useState<TAboutParams>(defaultData)
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const response = await getAboutData()
+
+        setInitialValues(response)
+      } catch (error) {
+        console.warn(error)
+      }
+    }
+
+    init()
+  }, [])
+
+  return (
+    <Header>
+      <TitleWrapper>
+        <>
+          {initialValues.title && (
+            <Text className="title" color="white">
+              {initialValues.title}
+            </Text>
+          )}
+        </>
+        <Text className="subtitle"> Second Brain</Text>
+      </TitleWrapper>
+      <Stats />
+    </Header>
+  )
+}
 
 const Header = styled(Flex).attrs({
   align: 'center',

diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx
@@ -31,6 +31,7 @@ const StyledEpisode = styled(Episode)`
   & {
     border-top: none;
     padding-bottom: 18px;
+    font-size: 16px;
   }
 `
 

diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -70,7 +70,7 @@ export const Episode = ({
       <Flex direction="row">
         {!isSelectedView && (
           <Flex align="center" pr={16}>
-            <Avatar src={imageUrl} type="video" />
+            <Avatar src={imageUrl} type={type || ''} />
 
             {false && <Booster count={boostCount} readOnly />}
           </Flex>

diff --git a/src/components/App/SideBar/Relevance/YouTube/index.tsx b/src/components/App/SideBar/Relevance/YouTube/index.tsx
@@ -1,13 +1,28 @@
 import { useEffect, useRef } from 'react'
 import ReactPlayer from 'react-player'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
 import { useSelectedNode } from '~/stores/useDataStore'
+import { formatDescription } from '~/utils/formatDescription'
 import { videoTimetoSeconds } from '~/utils/videoTimetoSeconds'
+import { Transcript } from '../../Transcript'
+import { Episode } from '../Episode'
 
 export const YouTube = () => {
   const selectedNode = useSelectedNode()
   const playerRef = useRef<ReactPlayer | null>(null)
 
-  const { link, timestamp } = selectedNode || {}
+  const {
+    link,
+    timestamp,
+    image_url: imageUrl,
+    description,
+    date,
+    boost,
+    type,
+    id,
+    episode_title: episodeTitle,
+  } = selectedNode || {}
 
   const secs = videoTimetoSeconds(timestamp || '')
 
@@ -22,10 +37,51 @@ export const YouTube = () => {
   }
 
   return (
-    <div style={{ height: '100%', overflow: 'auto', width: '100%' }}>
-      <div>
-        <ReactPlayer ref={playerRef} controls height="200px" playing url={link} width="100%" />
-      </div>
-    </div>
+    <Wrapper>
+      <PlayerWrapper>
+        <Flex direction="row">
+          <ReactPlayer ref={playerRef} controls height="200px" playing url={link} width="100%" />
+        </Flex>
+      </PlayerWrapper>
+      <StyledEpisode
+        boostCount={boost || 0}
+        date={date || 0}
+        description={formatDescription(description)}
+        id={id}
+        imageUrl={imageUrl || 'video_default.svg'}
+        isSelectedView
+        onClick={() => null}
+        title={episodeTitle}
+        type={type}
+      />
+      <TranscriptWrapper grow={1} shrink={1}>
+        <Transcript node={selectedNode} stateless />
+      </TranscriptWrapper>
+    </Wrapper>
   )
 }
+
+const Wrapper = styled(Flex)`
+  flex: 1;
+  min-height: 100%;
+  flex-direction: column;
+  border-bottom: 1px solid #101317;
+  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.5);
+  z-index: 0;
+`
+
+const PlayerWrapper = styled(Flex)`
+  padding: 30px 18px 0;
+`
+
+const TranscriptWrapper = styled(Flex)`
+  padding: 0 18px 18px;
+`
+
+const StyledEpisode = styled(Episode)`
+  & {
+    border-top: none;
+    padding-bottom: 18px;
+    font-size: 16px;
+  }
+`
diff --git a/src/components/App/SideBar/SelectedNodeView/index.tsx b/src/components/App/SideBar/SelectedNodeView/index.tsx
@@ -6,6 +6,7 @@ import { Creator } from '../Creator'
 import { Data } from '../Data'
 import { Messages } from '../Messages'
 import { Person } from '../Person'
+import { YouTube } from '../Relevance/YouTube'
 import { Show } from '../Show'
 import { Topic } from '../Topic'
 import { TwitData } from '../TwitData'
@@ -31,9 +32,11 @@ const _View = () => {
     case 'show':
       return <Show />
     case 'clip':
+      if (selectedNode?.type === 'youtube') {
+        return <YouTube />
+      }
+
       return <AudioClip />
-    // case 'clip':
-    //   return <YouTube />
     case 'document':
       return <TextType />
     default:

diff --git a/src/components/App/SideBar/TwitData/index.tsx b/src/components/App/SideBar/TwitData/index.tsx
@@ -1,37 +1,87 @@
-import { useState } from 'react'
-import { ClipLoader } from 'react-spinners'
-import { Tweet } from 'react-twitter-widgets'
+import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { useSelectedNode } from '~/stores/useDataStore'
 import { colors } from '~/utils/colors'
 
 export const TwitData = () => {
   const selectedNode = useSelectedNode()
-  const [loading, setLoading] = useState(true)
 
   const twitId: string = selectedNode?.tweet_id || ''
 
   return (
-    <Flex direction="column" px={24} py={16}>
-      <Flex align="center" direction="row" justify="flex-start" p={10}>
-        <Text color="primaryText1">{selectedNode?.label}</Text>
-      </Flex>
-      {loading && (
-        <Flex align="center" direction="row" justify="center" p={10}>
-          <ClipLoader color={colors.white} />
+    selectedNode && (
+      <Flex direction="column" px={24} py={16}>
+        <Flex align="center" direction="row" justify="flex-start" p={10}>
+          <Text color="primaryText1">{selectedNode?.label}</Text>
         </Flex>
-      )}
-      {twitId && (
-        <Tweet
-          onLoad={() => setLoading(false)}
-          options={{ theme: 'dark' }}
-          renderError={() => <Error />}
-          tweetId={twitId}
-        />
-      )}
-    </Flex>
+        {twitId && (
+          <TweetContainer>
+            <Flex direction="row">
+              <ProfilePicture>
+                <img alt="Profile" src={selectedNode.image_url || 'twitter_placeholder.png'} />
+              </ProfilePicture>
+
+              <AuthorInfo>
+                <AuthorName>{selectedNode.name}</AuthorName>
+                <TwitterHandle>{selectedNode.twitter_handle || '@unknown_handle'}</TwitterHandle>
+              </AuthorInfo>
+            </Flex>
+            <TweetText>{selectedNode.text}</TweetText>
+          </TweetContainer>
+        )}
+      </Flex>
+    )
   )
 }
 
-const Error = () => <Flex>Error occurred</Flex>
+const TweetContainer = styled.div`
+  padding: 10px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  background: ${colors.BG1};
+`
+
+const ProfilePicture = styled.div`
+  width: 50px;
+  height: 50px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 10px;
+  flex: 1 1 50px;
+  max-width: 50px;
+  margin-bottom: 16px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+const AuthorInfo = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+  flex-direction: column;
+`
+
+const AuthorName = styled.span`
+  font-family: Barlow;
+  font-weight: 700;
+  color: ${colors.white};
+`
+
+const TwitterHandle = styled.span`
+  color: ${colors.PRIMARY_BLUE};
+`
+
+const TweetText = styled.p`
+  font-family: Barlow;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 21px;
+  color: ${colors.white};
+`
diff --git a/src/components/Icons/AddContentIcon.tsx b/src/components/Icons/AddContentIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_25"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_25" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_25)">
@@ -26,6 +13,6 @@ const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default AddContentIcon;
+export default AddContentIcon
diff --git a/src/components/Icons/AddSourceIcon.tsx b/src/components/Icons/AddSourceIcon.tsx
@@ -1,22 +1,9 @@
 /* eslint-disable */
-import React from 'react';
+import React from 'react'
 
 const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_1259_27"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="24"
-      height="24"
-    >
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1259_27" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_27)">
@@ -26,6 +13,6 @@ const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-);
+)
 
-export default AddSourceIcon;
+export default AddSourceIcon
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,7 @@ const StyledEpisode = styled(Episode)` @@
       & {
         border-top: none;
         padding-bottom: 18px;
+        font-size: 16px;
       }
     `
@@ Expand Down @@