feat: added boost button to youtube (#464)

* feat: added boost button to youtube * feat: adding boost amount to sidebar items --------- Co-authored-by: Github Actions <github-actions@github.com>
stakwork · Oct 2, 2023 · 53efd80 · 53efd80
1 parent c228f31
commit 53efd80
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 18 deletions.
diff --git a/src/components/App/Helper/BoostAmt.tsx b/src/components/App/Helper/BoostAmt.tsx
@@ -0,0 +1,18 @@
+import { Text } from '~/components/common/Text'
+import styled from 'styled-components'
+import BoostIcon from '~/components/Icons/BoostIcon'
+
+type Props = {
+  amt: number
+}
+export const BoostAmt = ({ amt }: Props) => (
+  <div style={{ alignSelf: 'center' }}>
+    <BoostIcon />
+
+    <StyledText color="white">{amt}</StyledText>
+  </div>
+)
+
+const StyledText = styled(Text)`
+  padding-left: 10px;
+`
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -1,6 +1,6 @@
 import moment from 'moment'
 import styled from 'styled-components'
-import { Booster } from '~/components/Booster'
+import { BoostAmt } from '~/components/App/Helper/BoostAmt'
 import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { FlexboxProps } from '~/components/common/Flex/flexbox'
@@ -84,8 +84,6 @@ export const Episode = ({
           {!isSelectedView && (
             <Flex align="center" pr={16}>
               <Avatar src={imageUrl} type={type || ''} />
-
-              {false && <Booster count={boostCount} readOnly />}
             </Flex>
           )}
 
@@ -100,7 +98,11 @@ export const Episode = ({
             <Flex direction="row" justify="flex-start">
               {Boolean(date) && <Date>{moment.unix(date).format('ll')}</Date>}
               {Boolean(title) && <Title>{title}</Title>}
-              {false && <Booster count={boostCount} />}
+              {!isSelectedView && boostCount > 0 && (
+                <Flex style={{ marginLeft: 'auto' }}>
+                  <BoostAmt amt={boostCount} />
+                </Flex>
+              )}
             </Flex>
           </Flex>
         </Flex>
@@ -155,6 +157,7 @@ export const Title = styled(Date)`
   flex-direction: row;
   align-items: center;
   flex-shrink: 1;
+  max-width: 100px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
@@ -1,15 +1,18 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import ReactPlayer from 'react-player'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
-import { useSelectedNode } from '~/stores/useDataStore'
+import { useDataStore } from '~/stores/useDataStore'
 import { formatDescription } from '~/utils/formatDescription'
 import { videoTimetoSeconds } from '~/utils/videoTimetoSeconds'
 import { Episode } from '../Relevance/Episode'
 import { Transcript } from '../Transcript'
+import { BoostAmt } from '../../Helper/BoostAmt'
+import { Booster } from '~/components/Booster'
+import { Divider } from '~/components/common/Divider'
 
 export const YouTube = () => {
-  const selectedNode = useSelectedNode()
+  const selectedNode = useDataStore((s) => s.selectedNode)
   const playerRef = useRef<ReactPlayer | null>(null)
 
   const {
@@ -22,8 +25,10 @@ export const YouTube = () => {
     type,
     id,
     episode_title: episodeTitle,
+    ref_id: refId,
   } = selectedNode || {}
 
+  const [boostAmount, setBoostAmount] = useState<number>(boost || 0)
   const secs = videoTimetoSeconds(timestamp || '')
 
   useEffect(() => {
@@ -44,7 +49,7 @@ export const YouTube = () => {
         </Flex>
       </PlayerWrapper>
       <StyledEpisode
-        boostCount={boost || 0}
+        boostCount={boostAmount || 0}
         date={date || 0}
         description={formatDescription(description)}
         id={id}
@@ -54,6 +59,12 @@ export const YouTube = () => {
         title={episodeTitle}
         type={type}
       />
+      <StyledDivider />
+      <BoostWrapper>
+        <BoostAmt amt={boostAmount} />
+        <Booster content={selectedNode} count={boostAmount} refId={refId} updateCount={setBoostAmount} />
+      </BoostWrapper>
+      <StyledDivider />
       <TranscriptWrapper grow={1} shrink={1}>
         <Transcript node={selectedNode} stateless />
       </TranscriptWrapper>
@@ -74,6 +85,12 @@ const PlayerWrapper = styled(Flex)`
   padding: 30px 18px 0;
 `
 
+const BoostWrapper = styled(Flex)`
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 18px 18px;
+`
+
 const TranscriptWrapper = styled(Flex)`
   padding: 0 18px 18px;
 `
@@ -85,3 +102,9 @@ const StyledEpisode = styled(Episode)`
     font-size: 16px;
   }
 `
+
+const StyledDivider = styled(Divider)`
+  margin-bottom: 10px;
+  margin: auto 0px 10px 0px;
+  opacity: 75%;
+`
diff --git a/src/components/Booster/index.tsx b/src/components/Booster/index.tsx
@@ -1,16 +1,19 @@
 import { useEffect, useState } from 'react'
 import { MdBolt } from 'react-icons/md'
+import BoostIcon from '~/components/Icons/BoostIcon'
 import ClipLoader from 'react-spinners/ClipLoader'
 import { toast } from 'react-toastify'
 import { Flex } from '~/components/common/Flex'
 import { Pill } from '~/components/common/Pill'
 import { BOOST_ERROR_BUDGET, BOOST_SUCCESS } from '~/constants'
 import { Node } from '~/types'
 import { boost } from '~/utils/boost'
+import { colors } from '~/utils/colors'
 import { ToastMessage } from '../common/Toast/toastMessage'
 
 type Props = {
   count?: number
+  updateCount?: (newAmount: number) => void
   content?: Node | null
   refId?: string
   readOnly?: boolean
@@ -24,7 +27,7 @@ const notify = (message: string) => {
   })
 }
 
-export const Booster = ({ count, content, readOnly, refId }: Props) => {
+export const Booster = ({ count = 0, updateCount, content, readOnly, refId }: Props) => {
   const [submitting, setSubmitting] = useState(false)
   const [isSuccess, setIsSuccess] = useState(false)
 
@@ -54,6 +57,10 @@ export const Booster = ({ count, content, readOnly, refId }: Props) => {
 
       setIsSuccess(true)
       notify(BOOST_SUCCESS)
+
+      if (updateCount) {
+        updateCount(count + 5)
+      }
     } catch (e) {
       notify(BOOST_ERROR_BUDGET)
     }
@@ -80,27 +87,33 @@ export const Booster = ({ count, content, readOnly, refId }: Props) => {
     <div>
       {isSuccess ? (
         <Flex align="center" direction="row" justify="center">
-          <MdBolt color="#49c998" fontSize={20} />
+          <BoostIcon color="#49c998" fontSize={20} />
         </Flex>
       ) : (
         <Pill
           disabled={isSuccess || submitting}
-          onClick={() => {
+          onClick={async () => {
             if (isSuccess || submitting) {
               return
             }
 
-            doBoost()
+            await doBoost()
+          }}
+          style={{
+            padding: '4px 8px',
+            borderWidth: 0,
+            backgroundColor: '#303342',
+            height: '25px',
+            width: 'fit-content',
           }}
-          style={{ padding: '4px 8px', width: 'fit-content' }}
         >
           {submitting ? (
             <ClipLoader color="#fff" loading size={10} />
           ) : (
-            <Flex align="center" direction="row" justify="center">
-              <MdBolt fontSize={14} />
+            <Flex align="center" direction="row" justify="space-around">
+              <BoostIcon style={{ color: colors.white }} />
 
-              <div style={{ marginRight: 8 }}>Boost</div>
+              <div style={{ marginLeft: 8, marginRight: 8 }}>Boost</div>
             </Flex>
           )}
         </Pill>

diff --git a/src/components/Icons/BoostIcon.tsx b/src/components/Icons/BoostIcon.tsx
@@ -2,7 +2,15 @@
 import React from 'react'
 
 const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 9 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 9 9"
+    style={{ color: '#6B7A8D', paddingTop: '5px' }}
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
       id="Icon"
       fill-rule="evenodd"

diff --git a/src/utils/boost/index.tsx b/src/utils/boost/index.tsx
@@ -43,7 +43,7 @@ export const boost = async (refId: string, amount: number) => {
 
   const body = {
     amount,
-    ref: refId,
+    refid: refId,
   }
 
   return api.post('/boost', JSON.stringify(body))