[feature]: Add a Manage Friends component

[gbowne1]

Is your feature request related to a problem? Please describe.

We should have an easily accessible means of Unfriending, Blocking, Reporting, Muting the users Friends.

Describe the solution you would like

We can show the users a list of their friends in a table, with some controls to block, unfriend, unfollow, mute temporarily, etc.

This needs to be easily accessible from the Friends panel accessible from the SideNav.

Describe the alternatives you have tried

Facebook has a new Manage Friends modal, but its hard to get to and only has controls to unfriend.

Additional context

I can propose some initial code to go with this.

This should be an addition of the Friends component and functionality so that it is easy to find.

[gbowne1]

@manuel12 @pawel975

Here is the code I propose:

ManageFriends.jsx

import React, { useState, useEffect, useContext, useRef, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import Panel from "../../components/Panel/Panel";
import BlockIcon from '@material-ui/icons/Block';
import DeleteIcon from '@material-ui/icons/Delete';
import UnfollowIcon from '@material-ui/icons/RemoveCircleOutline';
import MuteIcon from '@material-ui/icons/VolumeOff';
import IconButton from '@material-ui/core/IconButton';

const ManageFriends = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const history = useHistory();
  const friendsList = useContext(FriendsListContext);
  // other state variables and hooks here
  
  useEffect(() => {
    // code to run on mount or when dependencies change
  }, [/* dependencies go here */]);
  
  const handleBlock = useCallback(() => {
    // code to handle blocking a friend
  }, [/* dependencies go here */]);
  
  // other callback functions here
  
  const handleUnfriend = () => {
    // code to handle unfriending a friend
  };
  
  // other event handler functions here
  
  const memoizedValue = useMemo(() => {
    // code to create memoized value
  }, [/* dependencies go here */]);
  
  // other code here
  
  return (
    <Panel
      themeMode={props.themeMode}
      titleHeading="Manage Friends"
      contentHeading="Friends List"
      isOpen={isOpen}
      setIsOpen={setIsOpen}
    >
      {friendsList.map((friend) => (
        <div key={friend.id}>
          <span>{friend.name}</span>
          <IconButton onClick={handleBlock}>
            <BlockIcon />
          </IconButton>
          <IconButton onClick={handleUnfriend}>
            <DeleteIcon />
          </IconButton>
          <IconButton onClick={handleUnfollow}>
            <UnfollowIcon />
          </IconButton>
          <IconButton onClick={handleMute}>
            <MuteIcon />
          </IconButton>
        </div>
      ))}
    </Panel>
  );
};

ManageFriends.propTypes = {
  themeMode: PropTypes.string.isRequired
};

ManageFriends.css

.ManageFriends-header {
  height: 60px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Panel {
  width: 1318.8px;
  height: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.ManageFriends-controls {
  width: 640px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.ManageFriends-control {
  width: 150px;
  height: 50px;
  background-color: #ccc;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ManageFriends-control:hover {
  background-color: #666;
}

[pawel975]

Looks good to me.

[gbowne1]

Great thanks @pawel975

Someone could easily make the compoment better.

I will get a PR done here soon.

[manuel12]

Also looks good to me. We can PR this.

[gbowne1]

I think this was a good idea. Wasn't too sure about its structure.. but this would or at least should give a way for this component to get built. I was thinking about making part of this component a table of friends using their photo or Avatar.

[gbowne1]

Adding myself to this so we can get moving on some issues.