StudentSolutionsPage: использовать avatarka

Author: DedSec256

hwproj.front/package-lock.json

@@ -26,6 +26,8 @@
     "@types/remarkable": "^1.7.4",
     "@uiw/react-markdown-preview": "4.2.2",
     "@uiw/react-md-editor": "3.25.6",
+    "avatarka": "^1.0.1",
+    "avatarka-react": "^1.0.1",
     "axios": "^0.30.2",
     "bootstrap": "^4.3.1",
     "classnames": "^2.3.1",

hwproj.front/package.json

@@ -0,0 +1,17 @@
+import {AccountDataDto} from "@/api";
+import {FC} from "react";
+import AvatarUtils from "@/components/Utils/AvatarUtils";
+import {Avatar} from "@mui/material";
+import {Avatar as Avatarka, generateParams, getThemeNames} from 'avatarka-react';
+
+const themes = getThemeNames().filter(x => x !== "geometric")
+
+export const UserAvatar: FC<{ user: AccountDataDto }> = ({user}) => {
+    if (user.githubId) return <Avatar {...AvatarUtils.stringAvatar(user)}/>
+
+    const hash = [...user.userId!].reduce((h, c) => Math.imul(h, 31) + c.charCodeAt(0) | 0, 0) >>> 0
+    const index = hash % themes.length
+    const theme = themes[index]
+    const params = generateParams(theme, user.userId);
+    return <Avatarka params={{...params, backgroundShape: "circle"}} theme={theme} size={40}/>;
+}

hwproj.front/src/components/Common/UserAvatar.tsx

@@ -11,7 +11,7 @@ import {
     SolutionActualityPart, StudentDataDto
 } from '@/api'
 import ApiSingleton from "../../api/ApiSingleton";
-import {Alert, Avatar, Rating, Stack, Tooltip, Card, CardContent, CardActions, IconButton, Chip} from "@mui/material";
+import {Alert, Rating, Stack, Card, CardContent, CardActions, IconButton, Chip, Tooltip, Avatar} from "@mui/material";
 import AvatarUtils from "../Utils/AvatarUtils";
 import Utils from "../../services/Utils";
 import {RatingStorage} from "../Storages/RatingStorage";
@@ -28,6 +28,7 @@ import KeyboardCommandKeyIcon from '@mui/icons-material/KeyboardCommandKey';
 import MouseOutlinedIcon from '@mui/icons-material/MouseOutlined';
 import BlurOnIcon from '@mui/icons-material/BlurOn';
 import BlurOffIcon from '@mui/icons-material/BlurOff';
+import {UserAvatar} from "../Common/UserAvatar";
 
 interface ISolutionProps {
     courseId: number,
@@ -463,7 +464,7 @@ const TaskSolutionComponent: FC<ISolutionProps> = (props) => {
                            alignItems={students.length === 1 ? "center" : "normal"} spacing={1}>
                         <Stack direction={"row"} spacing={1}>
                             {students && students.map(t => <Tooltip title={t.surname + " " + t.name}>
-                                <Avatar {...AvatarUtils.stringAvatar(t)} />
+                                <span><UserAvatar user={t} key={t.userId}/></span>
                             </Tooltip>)}
                         </Stack>
                         <Grid item spacing={1} container direction="column">

hwproj.front/src/components/Solutions/TaskSolutionComponent.tsx

@@ -1,4 +1,4 @@
-import {AccountDataDto} from "../../api";
+import {AccountDataDto} from "@/api";
 
 export default class AvatarUtils {