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,9 @@
 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 { useDataStore } from '~/stores/useDataStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { Relevance } from '../Relevance'
 
@@ -10,26 +12,68 @@ 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>
+          <div className="button_container">
+            {nodeCount ? <button onClick={getLatest} type="button">{`See latest (${nodeCount})`}</button> : ''}
+          </div>
+        </div>
+      )}
+      <Relevance isSearchResult={isSearchResult} />
+    </Wrapper>
+  )
+}
 
 export const LatestView = memo(_View)
 
 const Wrapper = styled(Flex)`
+  .heading_container {
+    display: flex;
+    align-items center;
+    justify-content: space-between;
+    padding: 16px 24px 16px 24px;
+  }
+
+  .button_container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    button {
+      background-color: transparent;
+      outline: none;
+      border: none;
+      font-family: Barlow;
+      font-size: 1.1rem;
+      color: ${colors.GRAY6};
+      cursor: pointer;
+      font-weight: 500;
+    }
+  }
+
   .heading {
     color: ${colors.GRAY6};
-    padding: 0 24px 16px 24px;
     font-family: Barlow;
     font-size: 14px;
     font-style: normal;
@@ -38,7 +82,8 @@ const Wrapper = styled(Flex)`
     letter-spacing: 1.12px;
     text-transform: uppercase;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
+    justify-content: 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/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 }
+    }),
 }))