Merge pull request #42 from ftri4-velocirabbit/miguel/lastMinute

added ability to follow and unfollow from search results

client/common/Footer.jsx

@@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography';
 export default function Footer() {
 
   return (
-    <Box id='footer' sx={{ bgcolor: '#817f70'}}>
+    <Box id='footer' sx={{ bgcolor: '#f1ede3' }}>
       <Stack direction='row'>
         <Typography id='copywrite' sx={{ flexGrow: 1 }}>&copy; Recommendation&trade;</Typography>
         <Stack>

client/friends/Friends.jsx

@@ -130,7 +130,7 @@ export default function Friends({
         onKeyPress={searchOnKeyPress}
         size="small"
         color="warning"
-        sx={{color:'warning.main'}}
+        sx={{ color: 'warning.main' }}
       />
       {!showSearchResult && <>
         <Followers
@@ -143,7 +143,9 @@ export default function Friends({
       </>}
       {showSearchResult && <SearchResult
         users={userSearchResult}
+        followedUsers={followedUsers}
         followUser={followUser}
+        unfollowUser={unfollowUser}
       />}
     </div>
   );

client/friends/SearchResult.jsx

@@ -6,20 +6,31 @@ import Button from '@mui/material/Button';
 
 export default function SearchResult({
   users,
+  followedUsers,
   followUser,
+  unfollowUser,
 }) {
   return (
     <Stack spacing={2} mt={3}>
-      {users.map(user => (
-        <Stack key={user.username} direction='row'>
-          <Typography mr={2}>{user.name}</Typography>
-          <Button
-            variant="contained"
-            size="small"
-            onClick={() => followUser(user.name, user.username)}
-          >Follow</Button>
-        </Stack>
-      ))}
+      {users.map(user => {
+        const isFollowingUser = !!followedUsers.find(userItem => userItem.username === user.username);
+
+        return (
+          <Stack key={user.username} direction='row'>
+            <Typography mr={2}>{user.name}</Typography>
+            {!isFollowingUser && <Button
+              variant="contained"
+              size="small"
+              onClick={() => followUser(user.name, user.username)}
+            >Follow</Button>}
+            {isFollowingUser && <Button
+              variant="contained"
+              size="small"
+              onClick={() => unfollowUser(user.username)}
+            >Unfollow</Button>}
+          </Stack>
+        );
+      })}
     </Stack>
   );
 }

client/index.scss

@@ -4,6 +4,7 @@ body,
 html,
 #root {
   height: 100%;
+  background-color: #f2f2f2;
 }
 
 #root {

server/models/setup.js

@@ -2,7 +2,7 @@ const { Pool } = require('pg');
 const { PG_URI } = require('./connection.json');
 
 let pool;
-if (process.env.NODE_ENV !== 'test') { //'production') {
+if (process.env.NODE_ENV === 'production') { //'test') {
   pool = new Pool({
     connectionString: PG_URI,
     max: 5,