Users discover

Froststorm · Jan 12, 2020 · 937cc90 · 937cc90
1 parent da80245
commit 937cc90
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 36 deletions.
diff --git a/client/src/actions/users.js b/client/src/actions/users.js
@@ -0,0 +1,45 @@
+import axios from 'axios';
+import cogoToast from 'cogo-toast';
+import api from '../api/api';
+
+const API = new api();
+
+export const
+				DISCOVER_USERS = 'DISCOVER_USERS',
+				RESTART_STATE = 'RESTART_STATE',
+				SET_LOADING = 'SET_LOADING';
+
+export const discoverUsers = (username) => {
+	return (dispatch, getState) => {
+		const state = getState();
+
+    dispatch(setLoading(true));
+
+    API.get('discover/users')
+      .then(res => {
+        if (res.data.code == 200)
+          dispatch({
+            type: DISCOVER_USERS,
+            payload: res.data.response
+          })
+
+        dispatch(setLoading(false));
+      })
+      .catch(e => console.log(e));
+	}
+}
+
+export const setLoading = loading => {
+	return dispatch => dispatch({
+		type: SET_LOADING,
+		payload: {
+			loading
+		}
+	})
+}
+
+export const restartState = (data) => {
+	return dispatch => dispatch({
+		type: RESTART_STATE
+	})
+}
diff --git a/client/src/pages/Explore.js b/client/src/pages/Explore.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { discoverPosts, restartState } from '../actions/posts';
+import { discoverPosts, restartState as restartStatePosts } from '../actions/posts';
+import { discoverUsers, restartState as restartStateUsers } from '../actions/users';
 import UserCard from '../components/UserCard';
 import Post from '../components/Post';
 import Loading from '../components/Loading';
@@ -13,6 +14,7 @@ class Explore extends Component {
 
     componentDidMount() {
         this.props.discoverPosts();
+        this.props.discoverUsers();
     }
 
     componentWillUnmount() {
@@ -24,12 +26,18 @@ class Explore extends Component {
           <div className="container my-5">
               <h2 className="montserrat">Discover users</h2>
               <div className="d-inline-flex flex-row w-100 mb-5" style={{'overflowX': 'scroll', 'overflowY': 'hidden', 'minHeight': '100px'}}>
+                {this.props.usersLoading && <div className="d-flex justify-content-center m-auto"><Loading /></div>}
+                {this.props.users.map(user =>
+                    <div className={'mx-5 px-5 animated fadeIn'} key={user._id}>
+                        <UserCard {...user} />
+                    </div>
+                )}
               </div>
               <h2 className="montserrat">Explore posts</h2>
               <div className="row mt-5">
               <BottomScrollListener onBottom={this.props.discoverPosts}>
                   {this.props.posts.map((post, i) =>
-                      <div className='col-12 col-md-6' key={post._id + i}>
+                      <div className='col-12 col-md-6 animated fadeIn' key={post._id + i}>
                           <Post {...post} />
                       </div>
                   )}
@@ -41,36 +49,20 @@ class Explore extends Component {
     }
 }
 
-/*<div className="container my-5">
-    <h2 className="montserrat">Discover users</h2>
-    <div className="d-inline-flex flex-row w-100 mb-5" style={{'overflowX': 'scroll', 'overflowY': 'hidden', 'minHeight': '100px'}}>
-        {this.props.usersLoading && <div className="d-flex justify-content-center m-auto"><Loading /></div>}
-        {this.props.users.map(user =>
-            <div className={'mx-5 px-5'} key={user._id}>
-                <UserCard {...user} />
-            </div>
-        )}
-    </div>
-    <h2 className="montserrat">Explore posts</h2>
-    <div className='row'>
-    <BottomScrollListener onBottom={this.props.discoverPosts}>
-        {this.props.posts.map(post =>
-            <div className='col-12 col-md-6' key={post._id}>
-                <Post {...post} />
-            </div>
-        )}
-    </BottomScrollListener>
-    </div>
-</div>*/
-
 const stateToProps = state => ({
     posts: state.posts.items,
-    postsLoading: state.posts.loading
+    postsLoading: state.posts.loading,
+    users: state.users.items,
+    usersLoading: state.users.loading
 })
 
 const dispatchToProps = dispatch => ({
     discoverPosts: () => dispatch(discoverPosts()),
-    restartState: () => dispatch(restartState())
+    discoverUsers: () => dispatch(discoverUsers()),
+    restartState: () => {
+      dispatch(restartStatePosts());
+      dispatch(restartStateUsers());
+    }
 })
 
 export default connect(stateToProps,dispatchToProps)(Explore);
diff --git a/client/src/reducers/profile.js b/client/src/reducers/profile.js
@@ -10,14 +10,7 @@ const defaultState = {
 	visibleSidenav: true,
 	username: null,
 	description: null,
-	profilePic: null,
-	posts: {
-		loading: false,
-		isThereMore: true,
-		offset: 0,
-		quantity: 5,
-		items: []
-	}
+	profilePic: null
 }
 
 export default (state = defaultState, action) => {

diff --git a/client/src/reducers/users.js b/client/src/reducers/users.js
@@ -0,0 +1,25 @@
+import {DISCOVER_USERS, SET_LOADING, RESTART_STATE} from '../actions/users';
+import { parseImageUrl } from '../utils/util';
+const defaultState = {
+  loading: false,
+  items: []
+}
+
+export default (state = defaultState, action) => {
+  switch(action.type) {
+    case DISCOVER_USERS:
+      return {
+        ...state,
+        items: action.payload.map(user => ({...user, profilePic: parseImageUrl(user.profilePic)}))
+      }
+    case SET_LOADING:
+			return {
+				...state,
+				loading: action.payload.loading
+			}
+		case RESTART_STATE:
+			return defaultState;
+    default:
+      return state;
+  }
+}
diff --git a/client/src/store.js b/client/src/store.js
@@ -3,12 +3,14 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import appReducer from './reducers/app';
 import profileReducer from './reducers/profile';
 import postsReducer from './reducers/posts';
+import usersReducer from './reducers/users';
 import thunk from 'redux-thunk';
 
 const reducers = combineReducers({
 	app: appReducer,
 	profile: profileReducer,
-	posts: postsReducer
+	posts: postsReducer,
+	users: usersReducer
 });
 
 const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)));

diff --git a/server/routes/Discover.js b/server/routes/Discover.js
@@ -10,7 +10,7 @@ router.get('/users', (req,res) => {
 				return res.status(500).send('There were an error counting the users');
 		  const random = Math.floor(Math.random() * (count - 6))
 		  User.find({})
-		  	.limit(6)
+		  	.limit(20)
 		  	.skip(random)
 		  	.exec((err, result) => {
 		  		if(err)