Add LivePostStream and post subscription

src/components/Post/LivePostStream.jsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react'
+import { Grid } from '@material-ui/core'
+import { useQuery, useSubscription } from '@apollo/react-hooks'
+import PropTypes from 'prop-types'
+import PostCard from './PostCard'
+import { GET_TOP_POSTS } from '../../graphql/query'
+import { NEW_POST_SUBSCRIPTION } from '../../graphql/subscription'
+
+function LivePostStream({
+  paused,
+  searchKey,
+  startDateRange,
+  endDateRange,
+  friendsOnly,
+  enabled,
+}) {
+  const { data, loading } = useQuery(GET_TOP_POSTS, {
+    variables: {
+      limit: 10,
+      offset: 0,
+      searchKey,
+      startDateRange,
+      endDateRange,
+      friendsOnly,
+    },
+    fetchPolicy: 'network-only',
+    skip: !enabled,
+  })
+
+  const [posts, setPosts] = useState([])
+  const [queued, setQueued] = useState([])
+
+  useEffect(() => {
+    if (data && data.posts) {
+      setPosts(data.posts.entities)
+    }
+  }, [data])
+
+  useSubscription(NEW_POST_SUBSCRIPTION, {
+    onSubscriptionData: ({ subscriptionData }) => {
+      const newPost = subscriptionData.data && subscriptionData.data.post
+      if (!newPost) return
+      if (paused) {
+        setQueued((q) => [newPost, ...q])
+      } else {
+        setPosts((p) => [newPost, ...p])
+      }
+    },
+  })
+
+  useEffect(() => {
+    if (!paused && queued.length) {
+      setPosts((p) => [...queued, ...p])
+      setQueued([])
+    }
+  }, [paused, queued])
+
+  if (loading && posts.length === 0) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      {posts.map((post) => (
+        <Grid item key={post._id} style={{ marginBottom: 8 }}>
+          <PostCard
+            {...post}
+            activityType={post.activityType || 'POSTED'}
+            votes={post.votes || []}
+            comments={post.comments || []}
+            quotes={post.quotes || []}
+            messageRoom={{ messages: post.messageRoom?.messages || [] }}
+            limitText={false}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+LivePostStream.propTypes = {
+  paused: PropTypes.bool,
+  searchKey: PropTypes.string,
+  startDateRange: PropTypes.string,
+  endDateRange: PropTypes.string,
+  friendsOnly: PropTypes.bool,
+  enabled: PropTypes.bool,
+}
+
+LivePostStream.defaultProps = {
+  paused: false,
+  searchKey: '',
+  startDateRange: '',
+  endDateRange: '',
+  friendsOnly: false,
+  enabled: true,
+}
+
+export default LivePostStream

src/graphql/subscription.jsx

@@ -37,3 +37,37 @@ export const NEW_NOTIFICATION_SUBSCRIPTION = gql`
     }
   }
 `
+
+export const NEW_POST_SUBSCRIPTION = gql`
+  subscription post {
+    post {
+      _id
+      userId
+      title
+      text
+      upvotes
+      downvotes
+      bookmarkedBy
+      created
+      url
+      creator {
+        name
+        username
+        avatar
+        _id
+      }
+      votes {
+        _id
+        startWordIndex
+        endWordIndex
+        type
+      }
+      comments { _id }
+      quotes { _id }
+      messageRoom {
+        _id
+        messages { _id }
+      }
+    }
+  }
+`

src/mui-pro/Sidebar/Sidebar.jsx

@@ -13,12 +13,14 @@ import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import IconButton from "@material-ui/core/IconButton";
 import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
 import MenuIcon from "@material-ui/icons/Menu";
 import sidebarStyle from "assets/jss/material-dashboard-pro-react/components/sidebarStyle";
 import { SET_SELECTED_PAGE } from "../../store/ui";
 import ChatMenu from "../../components/Chat/ChatMenu";
 import NotificationMenu from "../../components/Notifications/NotificationMenu";
 import SettingsMenu from "../../components/Settings/SettingsMenu";
+import SubmitPost from "../../components/SubmitPost/SubmitPost";
 
 // We've created this component so we can have a ref to the wrapper of the links that appears in our sidebar.
 // This was necessary so that we could initialize PerfectScrollbar on the links.
@@ -48,6 +50,7 @@ class MenuSidebar extends React.Component {
       openAvatar: false,
       miniActive: true,
       MessageDisplay: null,
+      postDialogOpen: false,
       ...this.getCollapseStates(props.routes)
     };
   }
@@ -274,6 +277,14 @@ class MenuSidebar extends React.Component {
             </div>
             {loggedIn ? (
               <>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  style={{ marginLeft: 8, backgroundColor: '#2ecc71', color: 'white' }}
+                  onClick={() => this.setState({ postDialogOpen: true })}
+                >
+                  Create Quote
+                </Button>
                 <ChatMenu />
                 <NotificationMenu />
                 <SettingsMenu />
@@ -313,6 +324,9 @@ class MenuSidebar extends React.Component {
             />
           </Grid>
         </Drawer>
+        <Dialog open={this.state.postDialogOpen} onClose={() => this.setState({ postDialogOpen: false })}>
+          <SubmitPost setOpen={(open) => this.setState({ postDialogOpen: open })} />
+        </Dialog>
       </>
     );
   }

src/routes.jsx

@@ -7,6 +7,7 @@ import LogoutPage from './components/LogoutPage'
 import HomeSvg from './assets/svg/Home'
 import ProfileAvatar from './components/Profile/ProfileAvatar'
 import NotificationMobileView from './components/Notifications/NotificationMobileView'
+import SearchIcon from '@material-ui/icons/Search'
 import SearchPage from 'views/SearchPage'
 
 const routes = [
@@ -22,7 +23,7 @@ const routes = [
     path: 'search',
     name: 'Search',
     rtlName: 'التقويم',
-    icon: () => <img src="/assets/TrendingIcon.svg" alt="Trending" style={{width: '100%', height: '100%'}} />,
+    icon: SearchIcon,
     component: SearchPage,
     layout: '/',
   },