feat: get random users

client/src/components/Core/YouShouldFollow.tsx

@@ -1,38 +1,60 @@
 import styled from 'styled-components'
+import { Link } from 'react-router-dom'
 import { Reload } from 'react-ionicons'
+import { useEffect, useState } from 'react'
 
+import * as userService from '../../services/user'
+import { IUser } from '../../store/state'
 import theme from '../../styles/ThemeStyles'
 import TwitterBox from '../Common/TwitterBox'
-import { users_suggested } from '../../constants/users'
-import TwitterButton from '../Common/TwitterButton'
-import { Link } from 'react-router-dom'
+import TwitterSpinner from '../Common/TwitterSpinner'
 
 export default function YouShouldFollow() {
+  const randomUsersNumber = 3
+
+  const [users, setUsers] = useState<IUser[]>([])
+  const [loading, setLoading] = useState<boolean>(false)
+
+  useEffect(() => {
+    getRandomUsers()
+  }, [])
+
+  const getRandomUsers = async () => {
+    setLoading(true)
+    setUsers([])
+
+    const res = await userService.randomUsers(randomUsersNumber)
+
+    if (res.success) setUsers(res.users)
+    setLoading(false)
+  }
+
+  let $users_content = null
+  if (users) {
+    $users_content = users.map(user => (
+      <User key={user._id}>
+        <Link to={`/user/${user.username}`}>
+          <UserInfo>
+            <img src={`/img/users/${user.image}`} alt={user.name} />
+            <div>
+              <span>{user.name}</span>
+              <span>@{user.username}</span>
+            </div>
+          </UserInfo>
+        </Link>
+      </User>
+    ))
+  }
+
   return (
     <Wrapper>
       <TwitterBox>
+        {loading && <TwitterSpinner />}
         <Header>
           <h2>You should follow</h2>
-          <Reload />
+          <Reload onClick={getRandomUsers} />
         </Header>
-        <Users>
-          {users_suggested.map(user => (
-            <User key={user.username}>
-              <Link to={`/user/${user.username}`}>
-                <UserInfo>
-                  <img src={`/img/users/${user.image}`} alt={user.name} />
-                  <div>
-                    <span>{user.name}</span>
-                    <span>@{user.username}</span>
-                  </div>
-                </UserInfo>
-              </Link>
-              <div>
-                <TwitterButton variant="outline" children="Follow" />
-              </div>
-            </User>
-          ))}
-        </Users>
+        <Users>{$users_content}</Users>
         <Action>
           <Link to="/connect-people">See all</Link>
         </Action>
@@ -44,6 +66,10 @@ export default function YouShouldFollow() {
 const Wrapper = styled.div`
   & > div {
     padding: 1rem 0;
+
+    & > div:first-child {
+      height: 280.75px;
+    }
   }
 `
 
@@ -57,6 +83,7 @@ const Header = styled.header`
 
   span {
     display: grid;
+    cursor: pointer;
     place-items: center;
   }
 
@@ -78,6 +105,7 @@ const User = styled.li`
   justify-content: space-between;
 
   button {
+    width: 6rem;
     padding: 0.5rem 1rem;
   }
 `
@@ -109,6 +137,7 @@ const Action = styled.div`
   text-align: center;
   text-transform: uppercase;
   font-size: 0.8rem;
+  user-select: none;
 
   a {
     color: ${theme.dark.text2};

client/src/containers/App.tsx

@@ -1,9 +1,4 @@
-import {
-  BrowserRouter as Router,
-  Redirect,
-  Route,
-  Switch
-} from 'react-router-dom'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import SimpleBar from 'simplebar-react'
 import { useEffect, Suspense } from 'react'
 import { useDispatch } from 'react-redux'

client/src/containers/User.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 import { useDispatch } from 'react-redux'
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 
 import TwitterContainer from '../components/Common/TwitterContainer'
@@ -23,6 +23,7 @@ type Params = { username: string }
 
 export default function User() {
   const auth = useAuth()
+  const history = useHistory()
   const dispatch = useDispatch()
 
   const [user, setUser] = useState<IUser>({} as IUser)
@@ -39,15 +40,21 @@ export default function User() {
     return () => {
       dispatch(authAction.getUser())
     }
+    // eslint-disable-next-line
   }, [])
 
   useEffect(() => {
-    getUserProfile()
+    if (params.username === auth.user.username) {
+      history.push(`/${auth.user.username}`)
+    } else {
+      getUserProfile()
+    }
     // eslint-disable-next-line
   }, [params.username])
 
   useEffect(() => {
     setFollow(auth.user?.following?.includes(user._id) || false)
+    // eslint-disable-next-line
   }, [user])
 
   const getUserProfile = async () => {

client/src/services/user.ts

@@ -35,3 +35,15 @@ export async function unfollowUser(userId: string, followerId: string) {
     return { success: false, message: err }
   }
 }
+
+export async function randomUsers(number: number) {
+  try {
+    const { data } = await axios.get(`/users/random/${number}`)
+
+    return data.error
+      ? { success: false, message: data.error }
+      : { success: true, users: data }
+  } catch (err) {
+    return { success: false, message: err }
+  }
+}

server/controllers/users.js

@@ -1,5 +1,6 @@
 const User = require('../models/user')
 const Tweet = require('../models/tweet')
+const random = require('../utils/random')
 
 exports.list = async (req, res) => {
   try {
@@ -58,3 +59,19 @@ exports.unfollow = async (req, res) => {
     return res.json({ error: true, message: err })
   }
 }
+
+exports.random = async (req, res) => {
+  const { number } = req.params
+
+  try {
+    const users = await User.find()
+    const randomNumbers = random(number, users.length)
+
+    let randomUsers = []
+    randomUsers = randomNumbers.map(number => users[number - 1])
+
+    return res.json(randomUsers)
+  } catch (err) {
+    return res.json({ error: true, message: err })
+  }
+}

server/routes/index.js

@@ -14,6 +14,7 @@ function apiRoutes(app, passport) {
   // User
   app.get('/api/users', usersController.list)
   app.get('/api/users/:username', usersController.get)
+  app.get('/api/users/random/:number', usersController.random)
 
   // Tweet
   app.get('/api/tweets', tweetsController.getMyTweets)

server/utils/random.js

@@ -0,0 +1,12 @@
+function random(number, total) {
+  const arr = []
+
+  while (arr.length < number) {
+    const r = Math.floor(Math.random() * total) + 1
+    if (arr.indexOf(r) === -1) arr.push(r)
+  }
+
+  return arr
+}
+
+module.exports = random