react-router-dom hooks

1 files changed, 13 insertions, 12 deletions

diff --git a/vnext/src/ui/Users.js b/vnext/src/ui/Users.js
index 4c09318f..4dd929fb 100644
--- a/vnext/src/ui/Users.js
+++ b/vnext/src/ui/Users.js
@@ -1,36 +1,37 @@
 import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
 
 import UserInfo from './UserInfo';
 import Avatar from './Avatar';
 
 /**
  * Friends feed
- * @param {{match: import('react-router').match }} match
  */
-export function Friends({ match }) {
-    return <Users user={match.params.user} prop='read' />;
+export function Friends() {
+    const params = useParams();
+    return <Users uname={params.user} prop='read' />;
 }
 
 /**
  * Readers feed
- * @param {{match: import('react-router').match }} match
  */
-export function Readers({ match }) {
-    return <Users user={match.params.user} prop='readers' />;
+export function Readers() {
+    const params = useParams();
+    return <Users uname={params.user} prop='readers' />;
 }
 
 /**
  * UserInfo list component
- * @param {{user: import('../api').User, prop: string}} props
+ * @param {{uname: string, prop: string}} props
  */
-function Users(props) {
-    const [user, setUser] = useState({ uid: 0, uname: props.user });
+function Users({ uname, prop }) {
+    const [user, setUser] = useState({ uid: 0, uname: uname });
     return (
-        <UserInfo user={user.uname} onUpdate={setUser}>
+        <UserInfo uname={uname} onUpdate={setUser}>
             <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
                 {
-                    user[props.prop] &&
-                    user[props.prop].map(user =>
+                    user[prop] &&
+                    user[prop].map(user =>
                         <Avatar key={user.uid} user={user} />
                     )
                 }