badges template

client/src/components/Badges.jsx

@@ -0,0 +1,47 @@
+import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
+import { Grid, Tooltip, Typography } from '@mui/material';
+
+function Badge({
+    title = 'Good Question',
+    text = 'dadsfjads;fkj',
+    rank = 'Gold'
+}) {
+    const color = {
+        Gold: '#ffd700',
+        Silver: '#c0c0c0',
+        Bronze: '#cd7f32'
+    }
+
+    return (
+        <Tooltip title={text} placement='bottom'>
+            <div>
+                <WorkspacePremiumIcon fontSize='large' style={{ color: color[rank] }} />
+                <Typography>{title}</Typography>
+            </div>
+        </Tooltip>
+    );
+}
+export default function Badges({ badges: { obtained, unobtained } }) {
+    const badgesGrid = (badges) => badges.map((badge) => (
+        <Grid item xs={2} sm={4} md={4} key={badge.title}>
+            <Badge {...{ ...badge }} />
+        </Grid>
+    ))
+
+    return (
+        <>
+            <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+                <Grid item xs={2} sm={4} md={4}>
+                    <Typography variant='h5'>Obtained Badges</Typography>
+                </Grid>
+                {badgesGrid(obtained)}
+            </Grid>
+            <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+                <Grid item xs={2} sm={4} md={4}>
+                    <Typography variant='h5'>Unobtained Badges</Typography>
+                </Grid>
+                {badgesGrid(unobtained)}
+            </Grid>
+        </>
+    );
+}

client/src/components/index.js

@@ -1,3 +1,4 @@
+import Badges from './Badges';
 import CreationInfoTag from './CreationInfoTag';
 import Form from './Form';
 import ListAnswer from './ListAnswer';
@@ -14,6 +15,7 @@ import Profile from './Profile';
 import SearchBar from './SearchBar';
 
 export {
+    Badges,
     CreationInfoTag,
     Form,
     ListAnswer,

client/src/containers/Dashboard.jsx

@@ -16,7 +16,7 @@ import { Link, useNavigate } from 'react-router-dom';
 
 import { ListAnswer, ListQuestion, LoadingBar } from 'components';
 import { useUser } from 'contexts';
-import { PaginatedList } from 'controllers';
+import { Badges, PaginatedList } from 'controllers';
 import { deleteUser, getUserAnswers, getUserQuestions } from 'services/userServices';
 
 export default function Dashboard() {
@@ -25,7 +25,7 @@ export default function Dashboard() {
     const [current, setCurrent] = useState('questions');
     const [loading, setLoading] = useState(true);
     const [confirmDelete, setConfirmDelete] = useState(false)
-    
+
 
     const {
         userData: { email, level, points, username },
@@ -62,16 +62,16 @@ export default function Dashboard() {
     };
 
     const deleteCurrentUser = () => {
-        if(confirmDelete){
+        if (confirmDelete) {
             deleteUser();
             navigate('/users/login')
             setConfirmDelete(false);
-        }else{
+        } else {
             setConfirmDelete(true);
             setTimeout(cancelDelete, 30000)
         }
     }
-    function cancelDelete(){
+    function cancelDelete() {
         setConfirmDelete(false)
     }
 
@@ -89,18 +89,21 @@ export default function Dashboard() {
                 <Grid
                     container
                     spacing={2}
-                    sx={{
-                        display: { xs: 'flex', sm: 'block', md: 'block' },
-                        justifyContent: 'center',
-                    }}
+                // sx={{
+                //     display: { xs: 'flex', sm: 'block', md: 'block' },
+                //     justifyContent: 'center',
+                // }}
                 >
-                    <Grid item sm={4} md={2}>
+                    <Grid item sm={4} md={3}>
                         {email && (
                             <Gravatar email={email} size={200} style={{ borderRadius: '100%' }} />
                         )}
                     </Grid>
+                    <Grid item sm={12} md={8}>
+                        <Badges />
+                    </Grid>
                     <Grid item sm={8} md={10}>
-                        {confirmDelete && <Alert variant = "warning">Click delete button again to confirm delete, cancelling in 30 seconds</Alert>}
+                        {confirmDelete && <Alert variant="warning">Click delete button again to confirm delete, cancelling in 30 seconds</Alert>}
                         <Typography>Username: {username}</Typography>
                         <Typography>Email: {email}</Typography>
                         <Typography>Level: {level}</Typography>
@@ -127,7 +130,7 @@ export default function Dashboard() {
 
                             <Button
                                 color='warning'
-                                onClick = {deleteCurrentUser}
+                                onClick={deleteCurrentUser}
                                 sx={{ margin: '0 1vh' }}
                                 variant='outlined'
                                 fullWidth

client/src/controllers/BadgesController.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+import { Badges } from 'components';
+import { getUserBadges } from 'services/userServices';
+
+export default function BadgesController() {
+    const [badges, setBadges] = useState();
+
+    useEffect(() => {
+        const loadBadges = async () => {
+            const { badges: newBadges } = await getUserBadges();
+            setBadges(newBadges);
+        };
+        loadBadges();
+    }, []);
+
+    return (
+        badges && Badges({ badges })
+    );
+}

client/src/controllers/index.js

@@ -1,3 +1,4 @@
+import Badges from './BadgesController';
 import CreationInfoTag from './CreationInfoTagController';
 import Inbox from './InboxController';
 import MdPreview from './MdPreviewController';
@@ -6,4 +7,4 @@ import PaginatedList from './PaginatedListController';
 import SearchBar from './SearchBarController';
 import SearchResults from './SearchResultsController';
 
-export { CreationInfoTag, Inbox, MdPreview, Navbar, PaginatedList, SearchBar, SearchResults };
+export { Badges, CreationInfoTag, Inbox, MdPreview, Navbar, PaginatedList, SearchBar, SearchResults };

client/src/services/userServices.js

@@ -21,10 +21,57 @@ const getLoginAttempts = () => {
 
 const getUser = async (username) => callUsersAPI('get', `/${username}`);
 
-const getUserQuestions = async () => callUsersAPI('get', `/questions`);
-
 const getUserAnswers = async () => callUsersAPI('get', `/answers`);
 
+const getUserBadges = async () => (
+    {
+        "badges": {
+          "obtained": [
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Gold"
+            },
+          ],
+          "unobtained": [
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Bronze"
+            },
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Bronze"
+            },
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Bronze"
+            },
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Bronze"
+            },
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Bronze"
+            },
+            {
+              "title": "Socratic",
+              "text": "Have at least 1000 points",
+              "rank": "Bronze"
+            },
+          ]
+        }
+      }
+)
+// callUsersAPI('get', `/badges`);
+
+const getUserQuestions = async () => callUsersAPI('get', `/questions`);
+
 const deleteUser = async () => callUsersAPI('delete',`/delete`)
 
 const incrementLoginAttempts = () => {
@@ -73,6 +120,7 @@ export {
     getLoginAttempts,
     getUser,
     getUserAnswers,
+    getUserBadges,
     getUserQuestions,
     incrementLoginAttempts,
     login,