Profile chips ( Awards )

express-api/src/models/profile/award/award.ts

@@ -0,0 +1,21 @@
+import Joi from '@hapi/joi';
+import { Schema } from 'mongoose';
+
+export interface Award {
+  _id?: string;
+
+  text?: string;
+  color?: string;
+}
+
+export const Award = new Schema<Award>({
+  text: { type: String },
+  color: { type: String },
+});
+
+export const AwardJoi = Joi.object().keys({
+  _id: Joi.string().regex(/^[a-f\d]{24}$/i),
+
+  text: Joi.string(),
+  color: Joi.string().regex(/^#((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/i),
+});

express-api/src/models/profile/award/index.ts

@@ -0,0 +1 @@
+export * from './award';

express-api/src/models/profile/profile.ts

@@ -1,6 +1,7 @@
 import Joi from '@hapi/joi';
 import { Document, model, Schema } from 'mongoose';
 
+import { Award, AwardJoi } from './award';
 import { Game, GameJoi } from './game';
 
 export interface Profile {
@@ -18,6 +19,7 @@ export interface Profile {
   discordUsername?: string;
 
   games?: Game[];
+  awards?: Award[];
 }
 
 export type ProfileDocument = Profile & Document;
@@ -35,6 +37,7 @@ export const Profile = model<ProfileDocument>('Profile', new Schema<Profile>({
   discordUsername: String,
 
   games: [Game],
+  awards: [{ type: Award, immutable: true }],
 }));
 
 export const ProfileJoi = Joi.object().keys({
@@ -52,4 +55,5 @@ export const ProfileJoi = Joi.object().keys({
   discordUsername: Joi.string().regex(/.+#\d{4}/i),
 
   games: Joi.array().items(GameJoi).max(20),
+  awards: Joi.array().items(AwardJoi),
 });

react-app/src/components/cards/Profile/ProfileCard.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
+import Chip from '@material-ui/core/Chip';
 import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 
@@ -11,15 +13,18 @@ import Profile from '../../../models/profile';
 
 const useStyles = makeStyles((theme) => createStyles({
   card: {
-    minHeight: '26rem',
-    width: '18rem',
+    minHeight: theme.spacing(52),
+    width: theme.spacing(36),
   },
   username: {
     marginBottom: theme.spacing(1),
   },
   bio: {
     marginTop: theme.spacing(1),
   },
+  awards: {
+    marginTop: theme.spacing(1),
+  },
 }));
 
 type Props = {
@@ -43,6 +48,15 @@ const ProfileCard: React.FC<Props> = ({ profile, children }) => {
             <Typography variant="h5" align="center" className={classes.username}>{profile.name || 'About'}</Typography>
             <Divider />
             <Typography align="center" className={classes.bio}>{profile.bio || 'No Profile Bio'}</Typography>
+            {!!profile.awards?.length && (
+              <Grid container justify="center" spacing={1} className={classes.awards}>
+                {profile.awards.map((award) => (
+                  <Grid item key={award._id}>
+                    <Chip label={award.text} variant="outlined" style={{ borderColor: award.color }} />
+                  </Grid>
+                ))}
+              </Grid>
+            )}
           </>
         ))}
       </CardContent>

react-app/src/models/profile/award/award.ts

@@ -0,0 +1,8 @@
+import ObjectID from 'bson-objectid';
+
+export default class Award {
+  _id = new ObjectID().toHexString();
+
+  text = '';
+  color = '#F25822';
+}

react-app/src/models/profile/award/index.ts

@@ -0,0 +1 @@
+export { default } from './award';

react-app/src/models/profile/profile.ts

@@ -1,6 +1,7 @@
 import ObjectID from 'bson-objectid';
 
 import Game from './game';
+import Award from './award';
 
 export default class Profile {
   _id = new ObjectID().toHexString();
@@ -17,4 +18,5 @@ export default class Profile {
   discordUsername?: string;
 
   games?: Game[];
+  awards?: Award[];
 }