Feat/newpost

.gitignore

@@ -20,6 +20,7 @@ build/
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

src/components/App/SideBar/Latest/index.tsx

@@ -1,7 +1,10 @@
 import { memo } from 'react'
 import styled from 'styled-components'
-import BrowseGalleryIcon from '~/components/Icons/BrowseGalleryIcon'
 import { Flex } from '~/components/common/Flex'
+import BrowseGalleryIcon from '~/components/Icons/BrowseGalleryIcon'
+import DownloadIcon from '~/components/Icons/DownloadIcon'
+import { useDataStore } from '~/stores/useDataStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { Relevance } from '../Relevance'
 
@@ -10,26 +13,95 @@ type Props = {
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _View = ({ isSearchResult }: Props) => (
-  <Wrapper>
-    {!isSearchResult && (
-      <div className="heading">
-        <span className="heading__title">Latest</span>
-        <span className="heading__icon">
-          <BrowseGalleryIcon />
-        </span>
-      </div>
-    )}
-    <Relevance isSearchResult={isSearchResult} />
-  </Wrapper>
-)
+const _View = ({ isSearchResult }: Props) => {
+  const [nodeCount, setNodeCount] = useUserStore((s) => [s.nodeCount, s.setNodeCount])
+  const [fetchData] = [useDataStore((s) => s.fetchData)]
+
+  const getLatest = async () => {
+    if (nodeCount < 1) {
+      return
+    }
+
+    await fetchData()
+    setNodeCount('CLEAR')
+  }
+
+  return (
+    <Wrapper>
+      {!isSearchResult && (
+        <div className="heading_container">
+          <div className="heading">
+            <span className="heading__title">Latest</span>
+            <span className="heading__icon">
+              <BrowseGalleryIcon />
+            </span>
+          </div>
+          {nodeCount ? (
+            <div className="button_container">
+              <button onClick={getLatest} type="button">
+                <span className="downloadButton">
+                  {' '}
+                  <DownloadIcon />
+                </span>
+                {`See Latest (${nodeCount})`}
+              </button>
+            </div>
+          ) : (
+            ''
+          )}
+        </div>
+      )}
+      <Relevance isSearchResult={isSearchResult} />
+    </Wrapper>
+  )
+}
 
 export const LatestView = memo(_View)
 
 const Wrapper = styled(Flex)`
+  .heading_container {
+    display: flex;
+    flex-direction: column;
+    padding: 16px 24px 16px 24px;
+  }
+
+  .button_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: #303342;
+    padding: 0.75rem 1rem;
+    border-radius: 12.5rem;
+    margin-top: 1.2rem;
+    button {
+      background-color: transparent;
+      outline: none;
+      border: none;
+      font-family: Barlow;
+      font-size: 0.875rem;
+      color: white;
+      cursor: pointer;
+      font-weight: 500;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      column-gap: 0.5rem;
+
+      .downloadButton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #909baa;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+  }
+
   .heading {
     color: ${colors.GRAY6};
-    padding: 0 24px 16px 24px;
     font-family: Barlow;
     font-size: 14px;
     font-style: normal;
@@ -38,7 +110,7 @@ const Wrapper = styled(Flex)`
     letter-spacing: 1.12px;
     text-transform: uppercase;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
 
     &__icon {
       margin-left: 14px;

src/components/App/index.tsx

@@ -1,7 +1,8 @@
 import { Leva } from 'leva'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import 'react-toastify/dist/ReactToastify.css'
+import { Socket } from 'socket.io-client'
 import * as sphinx from 'sphinx-bridge-kevkevinpal'
 import styled from 'styled-components'
 import { AddNodeModal } from '~/components/AddNodeModal'
@@ -11,6 +12,7 @@ import { DataRetriever } from '~/components/DataRetriever'
 import { GlobalStyle } from '~/components/GlobalStyle'
 import { Universe } from '~/components/Universe'
 import { isDevelopment, isE2E } from '~/constants'
+import useSocket from '~/hooks/useSockets'
 import { getGraphDataPositions } from '~/network/fetchGraphData/const'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
@@ -51,7 +53,7 @@ const Version = styled(Flex)`
 export const App = () => {
   const { open } = useModal('budgetExplanation')
 
-  const [setBudget] = useUserStore((s) => [s.setBudget])
+  const [setBudget, setNodeCount] = useUserStore((s) => [s.setBudget, s.setNodeCount])
 
   const [
     setSidebarOpen,
@@ -81,6 +83,10 @@ export const App = () => {
     useDataStore((s) => s.setCategoryFilter),
   ]
 
+  const isSocketSet: { current: boolean } = useRef<boolean>(false)
+
+  const socket: Socket | null = useSocket()
+
   const form = useForm<{ search: string }>({ mode: 'onChange' })
 
   const handleSubmit = form.handleSubmit(({ search }) => {
@@ -147,6 +153,23 @@ export const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphStyle])
 
+  const handleNewNode = useCallback(() => {
+    setNodeCount('INCREMENT')
+  }, [setNodeCount])
+
+  // setup socket
+  useEffect(() => {
+    if (isSocketSet.current) {
+      return
+    }
+
+    if (socket) {
+      socket.on('newnode', handleNewNode)
+
+      isSocketSet.current = true
+    }
+  }, [socket, handleNewNode])
+
   return (
     <AppProviders>
       <GlobalStyle />

src/components/Icons/DownloadIcon.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable */
+import React from 'react'
+
+const DownloadIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor">
+    <mask id="mask0_2638_2680" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <rect width="1em" height="1em" fill="currentColor" />
+    </mask>
+    <g mask="url(#mask0_2638_2680)">
+      <path
+        d="M9.99732 16C9.90858 16 9.82421 15.985 9.74419 15.9551C9.66418 15.9252 9.5909 15.8765 9.52435 15.8091L6.18835 12.4277C6.06278 12.3004 6 12.1406 6 11.9483C6 11.7559 6.06278 11.5961 6.18835 11.4689C6.32145 11.3315 6.48099 11.2648 6.66697 11.2686C6.85295 11.2724 7.00873 11.3392 7.13429 11.4689L9.32114 13.674V4.68539C9.32114 4.49306 9.3864 4.33074 9.51692 4.19845C9.64744 4.06615 9.80758 4 9.99732 4C10.1871 4 10.3472 4.06615 10.4777 4.19845C10.6082 4.33074 10.6735 4.49306 10.6735 4.68539V13.674L12.849 11.4689C12.9845 11.3315 13.1447 11.2629 13.3294 11.2629C13.5143 11.2629 13.6744 11.3315 13.8099 11.4689C13.9378 11.6062 14.0012 11.7685 14 11.9558C13.9988 12.1431 13.9354 12.3004 13.8099 12.4277L10.4738 15.8091C10.4073 15.8765 10.3334 15.9252 10.2522 15.9551C10.171 15.985 10.0861 16 9.99732 16Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+)
+
+export default DownloadIcon

src/stores/useUserStore/index.ts

@@ -1,23 +1,36 @@
 import create from 'zustand'
 
+type ActionType = 'CLEAR' | 'INCREMENT'
+
 export type UserStore = {
   isAdmin: boolean
   pubKey: string
   setIsAdmin: (val: boolean) => void
   setPubKey: (val: string) => void
   budget: number | null
   setBudget: (val: number | null) => void
+  nodeCount: number
+  setNodeCount: (action: ActionType) => void
 }
 
-const defaultData: Omit<UserStore, 'setIsAdmin' | 'setPubKey' | 'setBudget'> = {
+const defaultData: Omit<UserStore, 'setIsAdmin' | 'setPubKey' | 'setBudget' | 'setNodeCount'> = {
   isAdmin: false,
   pubKey: '',
   budget: 0,
+  nodeCount: 0,
 }
 
 export const useUserStore = create<UserStore>((set) => ({
   ...defaultData,
   setIsAdmin: (isAdmin) => set({ isAdmin }),
   setPubKey: (pubKey) => set({ pubKey }),
   setBudget: (budget) => set({ budget }),
+  setNodeCount: (action: ActionType) =>
+    set((state) => {
+      if (action === 'INCREMENT') {
+        return { nodeCount: state.nodeCount + 1 }
+      }
+
+      return { nodeCount: 0 }
+    }),
 }))