Skip to content

Commit

Permalink
Revert "feat(site): mUI for usersearch.jsx" because it looks awful th…
Browse files Browse the repository at this point in the history 
…e more users you register (#1580)

Reverts #1579
  • Loading branch information
@Golbolco
Golbolco committed Jul 5, 2024
1 parent 6df75f9 commit 96fcee7
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 67 deletions.
7 changes: 6 additions & 1 deletion react_main/src/pages/Community/Moderation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ import { useErrorAlert } from "../../components/Alerts";
import { SearchSelect, UserSearchSelect } from "../../components/Form";
import { SiteInfoContext, UserContext } from "../../Contexts";
import { Badge, NameWithAvatar, StatusIcon } from "../User/User";
import { MaxBoardNameLength, MaxCategoryNameLength, MaxGroupNameLength, MaxBoardDescLength, } from "../../Constants";
import {
MaxBoardNameLength,
MaxCategoryNameLength,
MaxGroupNameLength,
MaxBoardDescLength,
} from "../../Constants";

import "../../css/moderation.css";
import { getPageNavFilterArg, PageNav } from "../../components/Nav";
Expand Down
112 changes: 46 additions & 66 deletions react_main/src/pages/Community/UserSearch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,11 @@ 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';
import "../../css/userSearch.css";

export default function UserSearch(props) {
const theme = useTheme();

const [userList, setUserList] = useState([]);
const [searchVal, setSearchVal] = useState("");

Expand Down Expand Up @@ -42,43 +38,31 @@ export default function UserSearch(props) {
}, [searchVal]);

const users = userList.map((user) => (
<Card key={user.id} className="user-cell" variant="outlined" sx={{ margin: 1, display: 'inline-block' }}>
<CardContent sx={{ display: "flex", alignItems: "center" }}>
<NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
<Box sx={{ width: '8px' }} />
<StatusIcon status={user.status} />
</CardContent>
</Card>
<div className="user-cell">
<NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
<StatusIcon status={user.status} />
</div>
));

return (
<Box sx={{ padding: theme.spacing(3) }}>
<Card variant="outlined" sx={{ padding: theme.spacing(3), textAlign: 'justify' }}>
<Box display="flex" flexDirection="row" padding={2}>
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid item xs={12}>
<TextField
fullWidth
label="Username"
variant="outlined"
value={searchVal}
onChange={(e) => setSearchVal(e.target.value)}
/>
</Grid>
<Grid item xs={12}>
<Box sx={{ maxHeight: '70vh', overflow: 'auto', display: 'flex', flexWrap: 'wrap' }}>
{users}
</Box>
</Grid>
</Grid>
<Grid item xs="auto">
<NewestUsers />
{user.perms.viewFlagged && <FlaggedUsers />}
</Grid>
</Box>
</Card>
</Box>
);
<div className="user-search-page">
<div className="span-panel main">
<div className="form">
<input
type="text"
placeholder="Username"
value={searchVal}
onChange={(e) => setSearchVal(e.target.value)}
/>
</div>
<div className="users">{users}</div>
</div>
<div className="user-lists">
<NewestUsers />
{user.perms.viewFlagged && <FlaggedUsers />}
</div>
</div>
);
}

function NewestUsers(props) {
Expand Down Expand Up @@ -108,25 +92,23 @@ function NewestUsers(props) {
}

const userRows = users.map((user) => (
<Card key={user.id} className="user-row" variant="outlined" sx={{ marginBottom: 2 }}>
<CardContent sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
<Typography variant="body2">
<Time minSec millisec={Date.now() - user.joined} suffix=" ago" />
</Typography>
</CardContent>
</Card>
<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>
));

return (
<Box className="newest-users box-panel">
<Typography variant="h6" className="heading">Newest Users</Typography>
<Box className="users-list">
<div className="newest-users box-panel">
<div className="heading">Newest Users</div>
<div className="users-list">
<PageNav page={page} onNav={onPageNav} inverted />
{userRows}
<PageNav page={page} onNav={onPageNav} inverted />
</Box>
</Box>
</div>
</div>
);
}

Expand Down Expand Up @@ -157,24 +139,22 @@ function FlaggedUsers(props) {
}

const userRows = users.map((user) => (
<Card key={user.id} className="user-row" variant="outlined" sx={{ marginBottom: 2 }}>
<CardContent sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<NameWithAvatar id={user.id} name={user.name} avatar={user.avatar} />
<Typography variant="body2">
<Time minSec millisec={Date.now() - user.joined} suffix=" ago" />
</Typography>
</CardContent>
</Card>
<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>
));

return (
<Box className="flagged-users box-panel">
<Typography variant="h6" className="heading">Flagged Users</Typography>
<Box className="users-list">
<div className="flagged-users box-panel">
<div className="heading">Flagged Users</div>
<div className="users-list">
<PageNav page={page} onNav={onPageNav} inverted />
{userRows}
<PageNav page={page} onNav={onPageNav} inverted />
</Box>
</Box>
</div>
</div>
);
}

0 comments on commit 96fcee7

Please sign in to comment.