addedcrypto js, pfp, and level

package-lock.json

@@ -12,6 +12,7 @@
                 "@emotion/styled": "^11.9.3",
                 "@mui/icons-material": "^5.8.4",
                 "@mui/material": "^5.8.7",
+                "crypto-js": "^4.1.1",
                 "dotenv": "^16.0.1",
                 "formik": "^2.2.9",
                 "gh-pages": "^4.0.0",
@@ -5933,6 +5934,11 @@
                 "node": "*"
             }
         },
+        "node_modules/crypto-js": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+            "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+        },
         "node_modules/crypto-random-string": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -21542,6 +21548,11 @@
             "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
             "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
         },
+        "crypto-js": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+            "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+        },
         "crypto-random-string": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",

package.json

@@ -8,6 +8,7 @@
         "@emotion/styled": "^11.9.3",
         "@mui/icons-material": "^5.8.4",
         "@mui/material": "^5.8.7",
+        "crypto-js": "^4.1.1",
         "dotenv": "^16.0.1",
         "formik": "^2.2.9",
         "gh-pages": "^4.0.0",

src/components/ListQuestion.jsx

@@ -1,7 +1,14 @@
 import { ListItem, Grid, Stack, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
+import { getUser, hashEmail, getLevel } from '../services/userServices';
+import { useState } from 'react';
+
 
 export default function ListQuestion({ question, summaryLimit }) {
+
+    const [level, setLevel] = useState()
+    const [url, setUrl] = useState('')
+    
     const {
         question_id,
         title,
@@ -13,10 +20,25 @@ export default function ListQuestion({ question, summaryLimit }) {
         status,
         creator,
     } = question;
-    const createdAt = new Date(question.createdAt).toString();
+
+    const timeElapsed = Date.now() - question.createdAt;
+
+    const days = parseInt((timeElapsed) / (1000 * 60 * 60 * 24));
+    const hours = parseInt(Math.abs(timeElapsed) / (1000 * 60 * 60) % 24);
+    const minutes = parseInt(Math.abs(timeElapsed) / (1000 * 60) % 60);
+
+    const msg = days + " days, " + hours + " hours, and " + minutes + " minutes ago"
 
     const linkStyle = { textDecoration: 'none', color: 'inherit' };
 
+    
+    
+    getUser(creator).then(function(res){
+        res = res.user;
+        setLevel(getLevel(res.points))
+        setUrl(hashEmail(res.email))
+    });
+
     return (
         <ListItem>
             <Grid container>
@@ -44,8 +66,10 @@ export default function ListQuestion({ question, summaryLimit }) {
                         {text.split(' ').slice(0, summaryLimit).join(' ') +
                             '...'}
                     </Typography>
+                    
                     <Typography variant='body1' textAlign='right'>
-                        Asked by {creator} at {createdAt}
+                        <img src = {url} alt = "creator pfp" width = '40' height = '40'></img>
+                        Asked by {creator} | level  {level} : {msg}
                     </Typography>
                 </Grid>
             </Grid>

src/containers/Buffet.jsx

@@ -19,6 +19,7 @@ export default function Buffet() {
 
     function loadQuestions() {
         if (sort) {
+            console.log({sort})
             searchQuestions({ sort }).then((res) => {
                 setQuestionSet(() => res.questions);
             });

src/services/userServices.js

@@ -1,8 +1,41 @@
 import { createEndpoint } from './api';
 import { deriveKeyFromPassword } from './auth';
+import { MD5 } from 'crypto-js';
 
 const callUsersAPI = createEndpoint('/users');
 
+const hashEmail = (email) => {
+
+    email = email.trim()
+    email = email.toLowerCase()
+
+    let url = "https://www.gravatar.com/avatar/"
+    let end = "?d=identicon"
+    email = MD5(email)
+    url += email + end;
+    
+    return url;
+
+
+}
+const getLevel = (points) => {
+    if(points<15){
+        return 1;
+    }else if(points<50){
+        return 2;
+    }else if(points<125){
+        return 3;
+    }else if(points<1000){
+        return 4;
+    }else if(points<3000){
+        return 5;
+    }else if(points<10000){
+        return 6;
+    }else{
+        return 7;
+    }
+}
+
 const register = async ({ username, email, password }) => {
     const { salt, key } = await deriveKeyFromPassword(password);
     return callUsersAPI(
@@ -74,4 +107,6 @@ export {
     register,
     updateUserPoints,
     updateUser,
+    hashEmail,
+    getLevel,
 };