feat(site): redux usersearch and learn pages (#1585)

partially implements #1491
UltiMafia · Jul 7, 2024 · 1776bf5 · 1776bf5
1 parent 925bc6c
commit 1776bf5
Show file tree

Hide file tree

Showing 14 changed files with 332 additions and 329 deletions.
diff --git a/data/constants.js b/data/constants.js
@@ -281,10 +281,9 @@ module.exports = {
   maxCommentLocationLength: 20,
   commentsPerPage: 10,
 
-  lobbyPageSize: 14,
+  lobbyPageSize: 10,
   modActionPageSize: 7,
   newestUsersPageSize: 7,
-  announcementsPageSize: 7,
 
   userOnlineTTL: 1000 * 60,
   chatUserSearchAmt: 20,

diff --git a/react_main/src/Main.jsx b/react_main/src/Main.jsx
@@ -278,7 +278,7 @@ function Header({ setShowChatTab, setShowAnnouncementTemporarily }) {
       <div className="nav-wrapper">
         <Nav>
           <NavLink to="/play" className={"glow-on-hover"}>
-            Lobby
+            Play
           </NavLink>
           <NavLink to="/community" className={"glow-on-hover"}>
             Community

diff --git a/react_main/src/css/play.css b/react_main/src/css/play.css
@@ -1,6 +1,6 @@
 :root {
-  --playItemlistRows: 14;
-  --hostItemlistRows: 7;
+  --playItemlistRows: 10;
+  --hostItemlistRows: 10;
   --rowHeight: 40px;
 
   --playItemlistHeight: calc(var(--playItemlistRows) * var(--rowHeight));

diff --git a/react_main/src/pages/Community/Community.jsx b/react_main/src/pages/Community/Community.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import { useTheme } from '@mui/styles';
-import { Box, Link, AppBar, Toolbar } from '@mui/material';
+import { Box, Card, Link, AppBar, Toolbar } from '@mui/material';
 
 import Forums from "./Forums/Forums";
 import UserSearch from "./UserSearch";
@@ -47,13 +47,15 @@ export default function Community() {
           ))}
         </Toolbar>
       </AppBar>
-      <Box sx={{ padding: theme.spacing(3), margin: '0 auto' }}>
+      <Box maxWidth="1080px" sx={{ padding: theme.spacing(3) }}>
+      <Card variant="outlined" sx={{ padding: theme.spacing(3), textAlign: 'justify' }}>
         <Switch>
           <Route path="/community/forums" render={() => <Forums />} />
           <Route path="/community/users" render={() => <UserSearch />} />
           <Route path="/community/moderation" render={() => <Moderation />} />
           <Route render={() => <Redirect to="/community/forums" />} />
         </Switch>
+      </Card>
       </Box>
     </>
   );

diff --git a/react_main/src/pages/Community/UserSearch.jsx b/react_main/src/pages/Community/UserSearch.jsx
@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useContext } from "react";
 import axios from "axios";
-
 import { UserContext } from "../../Contexts";
 import { useErrorAlert } from "../../components/Alerts";
 import { NameWithAvatar, StatusIcon } from "../User/User";
-
-import "../../css/userSearch.css";
 import { getPageNavFilterArg, PageNav } from "../../components/Nav";
 import { Time } from "../../components/Basic";
+import { Box, Grid, TextField, Card, CardContent, Typography } from "@mui/material";
+import { useTheme } from '@mui/styles';
 
 export default function UserSearch(props) {
+  const theme = useTheme();
   const [userList, setUserList] = useState([]);
   const [searchVal, setSearchVal] = useState("");
 
@@ -38,30 +38,42 @@ export default function UserSearch(props) {
   }, [searchVal]);
 
   const users = userList.map((user) => (
-    <div className="user-cell">
-      <NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
-      <StatusIcon status={user.status} />
-    </div>
+    <Card key={user.id} className="user-cell" variant="outlined" sx={{ margin: 1 }}>
+      <CardContent sx={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+        <Box sx={{ display: "flex", alignItems: "center", width: '100%' }}>
+          <NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
+          <Box sx={{ width: '8px' }} />
+          <StatusIcon status={user.status} />
+        </Box>
+        <Typography variant="caption" sx={{ marginTop: '4px' }}>
+          {/*<Time minSec millisec={Date.now() - user.lastActive} suffix=" ago" />*/}
+        </Typography>
+      </CardContent>
+    </Card>
   ));
 
   return (
-    <div className="user-search-page">
-      <div className="span-panel main">
-        <div className="form">
-          <input
-            type="text"
-            placeholder="Username"
+    <Box display="flex" flexDirection="row" padding={2}>
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={9}>
+          <TextField
+            fullWidth
+            label="🔎 Username"
+            variant="outlined"
             value={searchVal}
             onChange={(e) => setSearchVal(e.target.value)}
+            sx={{ marginBottom: 2 }}
           />
-        </div>
-        <div className="users">{users}</div>
-      </div>
-      <div className="user-lists">
-        <NewestUsers />
-        {user.perms.viewFlagged && <FlaggedUsers />}
-      </div>
-    </div>
+          <Box sx={{ maxHeight: '70vh', overflowY: 'auto', flexGrow: 1, display: 'flex', flexWrap: 'wrap' }}>
+            {users}
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <NewestUsers />
+          {user.perms.viewFlagged && <FlaggedUsers />}
+        </Grid>
+      </Grid>
+    </Box>
   );
 }
 
@@ -76,7 +88,7 @@ function NewestUsers(props) {
   }, []);
 
   function onPageNav(_page) {
-    var filterArg = getPageNavFilterArg(_page, page, users, "joined");
+    var filterArg = getPageNavFilterArg(_page, page, users, "joined", "lastActive");
 
     if (filterArg == null) return;
 
@@ -92,23 +104,25 @@ function NewestUsers(props) {
   }
 
   const userRows = users.map((user) => (
-    <div className="user-row" key={user.id}>
-      <NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
-      <div className="joined">
-        <Time minSec millisec={Date.now() - user.joined} suffix=" ago" />
-      </div>
-    </div>
+    <Card key={user.id} className="user-row" variant="outlined" sx={{ marginBottom: 2 }}>
+      <CardContent sx={{ display: "flex", flexDirection: "column" }}>
+        <NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
+        <Typography variant="caption" sx={{ marginTop: '4px' }}>
+          <Time minSec millisec={Date.now() - user.joined} suffix=" ago" />
+        </Typography>
+      </CardContent>
+    </Card>
   ));
 
   return (
-    <div className="newest-users box-panel">
-      <div className="heading">Newest Users</div>
-      <div className="users-list">
+    <Box className="newest-users box-panel">
+      <Typography variant="h6" className="heading">Newest Users</Typography>
+      <Box className="users-list">
         <PageNav page={page} onNav={onPageNav} inverted />
         {userRows}
         <PageNav page={page} onNav={onPageNav} inverted />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
 
@@ -139,22 +153,24 @@ function FlaggedUsers(props) {
   }
 
   const userRows = users.map((user) => (
-    <div className="user-row" key={user.id}>
-      <NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
-      <div className="joined">
-        <Time minSec millisec={Date.now() - user.joined} suffix=" ago" />
-      </div>
-    </div>
+    <Card key={user.id} className="user-row" variant="outlined" sx={{ marginBottom: 2 }}>
+      <CardContent sx={{ display: "flex", flexDirection: "column" }}>
+        <NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
+        <Typography variant="caption" sx={{ marginTop: '4px' }}>
+          <Time minSec millisec={Date.now() - user.joined} suffix=" ago" />
+        </Typography>
+      </CardContent>
+    </Card>
   ));
 
   return (
-    <div className="flagged-users box-panel">
-      <div className="heading">Flagged Users</div>
-      <div className="users-list">
+    <Box className="flagged-users box-panel">
+      <Typography variant="h6" className="heading">Flagged Users</Typography>
+      <Box className="users-list">
         <PageNav page={page} onNav={onPageNav} inverted />
         {userRows}
         <PageNav page={page} onNav={onPageNav} inverted />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/react_main/src/pages/Fame/Contributors.jsx b/react_main/src/pages/Fame/Contributors.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import { Card, Typography, Grid, Box, Link } from "@mui/material";
+import { Typography, Grid, Box, Link } from "@mui/material";
 import { useTheme } from "@mui/styles";
 import { useErrorAlert } from "../../components/Alerts";
 import { NameWithAvatar } from "../User/User";
@@ -82,8 +82,7 @@ export default function Contributors(props) {
   });
 
   return (
-    <Box sx={{ padding: theme.spacing(3) }}>
-      <Card variant="outlined" sx={{ padding: theme.spacing(3), textAlign: 'justify' }}>
+    <>
       <Box mb={4}>
         <Typography variant="h4" gutterBottom>
           Contributors
@@ -119,7 +118,6 @@ export default function Contributors(props) {
           Music is by Fred, check out his YouTube <Link href="https://www.youtube.com/@fredthemontymole" target="_blank" rel="noopener noreferrer">@fredthemontymole</Link>
         </Typography>
       </Box>
-      </Card>
-    </Box>
+    </>
   );
 }
diff --git a/react_main/src/pages/Fame/Fame.jsx b/react_main/src/pages/Fame/Fame.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { useTheme } from '@mui/styles';
-import { Box, Link, AppBar, Toolbar } from '@mui/material';
+import { Box, Card, Link, AppBar, Toolbar } from '@mui/material';
 
 import Donors from './Donors';
 import Contributors from './Contributors';
@@ -47,13 +47,15 @@ export default function Fame(props) {
           ))}
         </Toolbar>
       </AppBar>
-      <Box sx={{ padding: theme.spacing(3), margin: '0 auto' }}>
-        <Switch>
-          <Route exact path="/fame/donors" component={Donors} />
-          <Route exact path="/fame/contributors" component={Contributors} />
-          <Route exact path="/fame/leaderboard" component={Leaderboard} />
-          <Route render={() => <Redirect to="/fame/contributors" />} />
-        </Switch>
+      <Box maxWidth="1080px" sx={{ padding: theme.spacing(3) }}>
+        <Card variant="outlined" sx={{ padding: theme.spacing(3), textAlign: 'justify' }}>
+          <Switch>
+            <Route exact path="/fame/donors" component={Donors} />
+            <Route exact path="/fame/contributors" component={Contributors} />
+            <Route exact path="/fame/leaderboard" component={Leaderboard} />
+            <Route render={() => <Redirect to="/fame/contributors" />} />
+          </Switch>
+        </Card>
       </Box>
     </>
   );