feat: outgoing requests

src/client/chat--leftFriends.jsx

@@ -24,8 +24,10 @@ export default function ChatLeftFriends() {
   const [text, setText] = useState('');
   const $form = useRef(null);
   const id = useSelector(idSelector);
-  const pendingFriendship = useSelector(pendingFriendshipSelector)
+  const pendingIncomingFriendship = useSelector(pendingFriendshipSelector)
     .filter(({adderId}) => adderId !== id);
+  const pendingOutgoingFriendship = useSelector(pendingFriendshipSelector)
+    .filter(({adderId}) => adderId === id);
   const favorites = useSelector(favoriteUsersSelector);
   const usernames = useSelector(usernamesSelector);
   const activeFriendship = useSelector(activeFriendshipSelector)
@@ -67,11 +69,11 @@ export default function ChatLeftFriends() {
           </span>
         </label>
       </form>
-      {pendingFriendship.length > 0 && (
+      {pendingIncomingFriendship.length > 0 && (
         <>
-          <h2 className="friends__chatsTitle">Friend requests</h2>
+          <h2 className="friends__chatsTitle">Incoming requests</h2>
           <ul className="friends__chatsList">
-            {pendingFriendship.map((friendship) => {
+            {pendingIncomingFriendship.map((friendship) => {
               const {addeeId, adderId} = friendship;
               const channel = usernames[adderId] || '?';
               const favoritesActions = [
@@ -172,6 +174,34 @@ export default function ChatLeftFriends() {
           </ul>
         </>
       )}
+      {pendingOutgoingFriendship.length > 0 && (
+        <>
+          <h2 className="friends__chatsTitle">Outgoing requests</h2>
+          <ul className="friends__chatsList">
+            {pendingOutgoingFriendship.map((friendship) => {
+              const {addeeId} = friendship;
+              const channel = usernames[addeeId] || '?';
+              const favoritesActions = [
+                {
+                  icon: '×',
+                  label: 'Cancel friend request',
+                  onClick: () => dispatch(submitRemoveFriend(addeeId)),
+                },
+              ];
+              return (
+                <Channel
+                  key={JSON.stringify(friendship)}
+                  actions={favoritesActions}
+                  href={`/chat/u/${channel}`}
+                  name={channel}
+                  prefix="/u/"
+                />
+              );
+            })}
+          </ul>
+        </>
+      )}
+
     </div>
   );
 }