diff --git a/src/modules/user/UserDetails.tsx b/src/modules/user/UserDetails.tsx new file mode 100644 index 0000000..c55cb2a --- /dev/null +++ b/src/modules/user/UserDetails.tsx @@ -0,0 +1,36 @@ +import { FC } from "react"; + +import { UserState } from "modules/user/slice"; + +interface Props { + user?: UserState; +} + +const UserDetails: FC = ({ user }) => { + if (user === undefined) { + return ( +
+

Select a user

+
+ ); + } + + return ( +
+ Name: {user.name} +
+ Status: {user.status} +
+ Average speed: {user.averageSpeed} +
# Downloads: {user.numDownloads} +
# Files: {user.numFiles} +
# Folders: {user.numFolders} +
# Free slots: {user.numFreeSlots} +
+ Country: {user.country} +
+
+ ); +}; + +export default UserDetails; diff --git a/src/modules/user/UsersPane.tsx b/src/modules/user/UsersPane.tsx index 9d12103..e15312c 100644 --- a/src/modules/user/UsersPane.tsx +++ b/src/modules/user/UsersPane.tsx @@ -1,10 +1,35 @@ import { FC } from "react"; import { useSelector } from "react-redux"; +import { useParams, useRouteMatch } from "react-router"; +import { Switch, Route } from "react-router-dom"; -import { selectAllUsers } from "modules/user/slice"; +import { decode } from "modules/base64"; +import { UserMap, selectAllUsers } from "modules/user/slice"; +import UserDetails from "modules/user/UserDetails"; import UserList from "modules/user/UserList"; +interface Props { + users: UserMap; +} + +interface UrlParams { + userId: string; +} + +const UserInfoPane: FC = ({ users }) => { + const { userId } = useParams(); + + let user; + if (userId !== undefined) { + const name = decode(userId); + user = users[name]; + } + + return ; +}; + const UsersPane: FC<{}> = () => { + const { path } = useRouteMatch(); const users = useSelector(selectAllUsers); return ( @@ -12,7 +37,16 @@ const UsersPane: FC<{}> = () => {
-
Coming soon: user details.
+
+ + + + + + + + +
); };