Merge branch 'dev' of https://github.com/spicecat/qOverflow into dev

client/src/components/Badges.jsx

@@ -31,13 +31,13 @@ export default function Badges({ badges: { obtained, unobtained } }) {
     return (
         <>
             <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
-                <Grid item xs={2} sm={4} md={4}>
+                <Grid item xs={4} sm={8} md={12}>
                     <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}>
+                <Grid item xs={4} sm={8} md={12}>
                     <Typography variant='h5'>Unobtained Badges</Typography>
                 </Grid>
                 {badgesGrid(unobtained)}

client/src/components/ListQuestion.jsx

@@ -20,18 +20,18 @@ export default function ListQuestion({
 }) {
     const sm = useMediaQuery((theme) => theme.breakpoints.only('sm'));
     const md = useMediaQuery((theme) => theme.breakpoints.only('md'));
-    console.log(123123, tags)
+
     return (
         <span key={question_id}>
             <ListItem disablePadding>
                 <Grid container>
                     <Grid item xs={2}>
                         <Stack justifyContent='center' sx={{ height: '100%' }}>
-                            {sm || md ? <ListQuestionInfo {...{ upvotes, downvotes, answers, views, inline: false }} /> : null}
+                            {sm || md ? <ListQuestionInfo {...{ answers, downvotes, inline: false, hasAcceptedAnswer, tags, upvotes, views }} /> : null}
                         </Stack>
                     </Grid>
                     <Grid item xs={10}>
-                        {sm || md ? null : <ListQuestionInfo {...{ upvotes, downvotes, answers, views, inline: true }} />}
+                        {sm || md ? null : <ListQuestionInfo {...{ answers, downvotes, inline: true, hasAcceptedAnswer, tags, upvotes, views }} />}
                         <CreationInfoTag {...{ createdAt, creator }} />
                         <Typography
                             variant='h6'
@@ -44,8 +44,6 @@ export default function ListQuestion({
                         <Typography noWrap variant='body1'>
                             {text.replace(/<[^>]*>?/gm, '')}
                         </Typography>
-                        <Typography>Accepted: {String(hasAcceptedAnswer)} </Typography>
-
                     </Grid>
                 </Grid>
             </ListItem>

client/src/components/ListQuestionInfo.jsx

@@ -1,16 +1,33 @@
-import { Typography } from "@mui/material"
-export default function ListQuestionInfo({upvotes, downvotes, answers, views, inline}){
-    return inline? (
+import { Chip, Typography } from '@mui/material';
+export default function ListQuestionInfo({ answers, downvotes, inline, hasAcceptedAnswer, tags, upvotes, views }) {
+    return inline ? (
         <>
-              <Typography display = 'inline' variant='body1'>{upvotes - downvotes} votes | </Typography>
-              <Typography display = 'inline' variant='body1'>{answers} answers | </Typography>
-              <Typography display = 'inline' variant='body1'>{views} views</Typography>
+            <Typography display='inline'>{upvotes - downvotes} votes | </Typography>
+            <Typography display='inline'>{answers} answers | </Typography>
+            <Typography display='inline'>{views} views</Typography>
+            <Typography display='inline' m={1}>
+                Accepted:
+            </Typography>
+            <Chip
+                color={hasAcceptedAnswer ? 'success' : 'error'}
+                label={hasAcceptedAnswer ? 'yes' : 'no'}
+                size='small'
+            />
+            <Typography display='inline' m={1}>Tags: {tags.join(', ')}</Typography>
         </>
     ) : (
         <>
-              <Typography display = 'block' variant='body1'>{upvotes - downvotes} votes</Typography>
-              <Typography display = 'block' variant='body1'>{answers} answers</Typography>
-              <Typography display = 'block' variant='body1'>{views} views</Typography>
+            <Typography display='block'>{upvotes - downvotes} votes</Typography>
+            <Typography display='block'>{answers} answers</Typography>
+            <Typography display='block'>{views} views</Typography>
+            <Typography display='block'>
+                Accepted: <Chip
+                    color={hasAcceptedAnswer ? 'success' : 'error'}
+                    label={hasAcceptedAnswer ? 'yes' : 'no'}
+                    size='small'
+                />
+            </Typography>
+            <Typography display='block'>Tags: {tags.join(', ')}</Typography>
         </>
     )
 }

client/src/components/QAComponents/Question.jsx

@@ -39,6 +39,7 @@ export default function Question({
     downvotes,
     hasAcceptedAnswer,
     status,
+    tags,
     title,
     text,
     upvotes,
@@ -62,11 +63,11 @@ export default function Question({
     const [value, setValue] = useState(75);
     canBounty = canBounty && !hasBounty
 
-    function handleBountyFix(){
+    function handleBountyFix() {
         handleBounty(value)
     }
     return (
-        
+
         <>
             <Box m={2}>
                 <Typography variant='h4'>{title}</Typography>
@@ -92,6 +93,8 @@ export default function Question({
                     label={hasAcceptedAnswer ? 'yes' : 'no'}
                     size='small'
                 />
+                <Typography display='inline' m={1}>Tags: {tags.join(', ')}</Typography>
+                <br />
                 <Button
                     component={Link}
                     to='../ask'
@@ -139,7 +142,7 @@ export default function Question({
                     title={canBounty ? '' : 'You must be level 4 and this question must be open or protected'}
                 >
                     <span>
-                    
+
                         <Button
                             disabled={!canBounty}
                             style={{ marginLeft: '10px' }}
@@ -149,26 +152,26 @@ export default function Question({
                             onClick={handleBountyFix}
                         >
                             Add Bounty
-                       
+
                         </Button>
-                    { show && 
-                        <TextField value = {value} size = "small" type = "number" inputProps={{min,max}} disabled = {!canBounty} label="bounty" onChange={(e) => {
-                        if (e.target.value === "") {
-                        setValue(75);
-                        return;
+                        {show &&
+                            <TextField value={value} size="small" type="number" inputProps={{ min, max }} disabled={!canBounty} label="bounty" onChange={(e) => {
+                                if (e.target.value === "") {
+                                    setValue(75);
+                                    return;
+                                }
+                                const value = e.target.value;
+                                if (value > max) {
+                                    setValue(max);
+                                } else if (value < min) {
+                                    setValue(min);
+                                } else {
+                                    setValue(value);
+                                }
+
+
+                            }} />
                         }
-                        const value = e.target.value;
-                        if (value > max) {
-                        setValue(max);
-                        } else if (value < min) {
-                        setValue(min);
-                        } else {
-                        setValue(value);
-                        }
-                        
-                        
-                    }}/>
-                    }
                     </span>
                 </Tooltip>
 
@@ -177,7 +180,7 @@ export default function Question({
                         {ongoingVote.users.toString()} - voting to {ongoingVote.type} this question{' '}
                     </Typography>
                 )}
-                 {hasBounty && (
+                {hasBounty && (
                     <Typography>
                         there is a {hasBounty} point bounty on this question
                     </Typography>

client/src/containers/Buffet.jsx

@@ -6,30 +6,23 @@ import { ListQuestion, LoadingBar } from 'components';
 import { PaginatedList } from 'controllers';
 import { searchQuestions } from 'services/questionsServices';
 
-const recent = {};
-const best = { sort: 'u' };
-const interesting = { match: JSON.stringify({ answers: 0 }), sort: 'uvc' };
-const hot = { match: JSON.stringify({ hasAcceptedAnswer: false }), sort: 'uvac' };
-const sortObjArr = [recent, best, interesting, hot];
-
 export default function Buffet() {
-    const [sort, setSort] = useState(0);
+    const [sort, setSort] = useState('');
     const [loading, setLoading] = useState(true);
     const [, setSearchParams] = useSearchParams();
 
     const getData = async ({ question_id }) => {
         const { questions } = await searchQuestions({
-            ...sortObjArr[sort],
-            after: question_id,
+            sort,
         });
 
         setLoading(() => false);
         return questions;
     };
 
-    const handleSortChange = (_, newSort) => {
-        setSearchParams(sortObjArr[newSort]);
-        setSort(newSort);
+    const handleSortChange = (_, value) => {
+        setSearchParams({ sort: value });
+        setSort(value);
     };
 
     return (
@@ -60,10 +53,10 @@ export default function Buffet() {
                     onChange={handleSortChange}
                     style={{ display: 'block', marginTop: '1%' }}
                 >
-                    <ToggleButton value={0}>Recent</ToggleButton>
-                    <ToggleButton value={1}>Best</ToggleButton>
-                    <ToggleButton value={2}>Interesting</ToggleButton>
-                    <ToggleButton value={3}>Hot</ToggleButton>
+                    <ToggleButton value=''>Recent</ToggleButton>
+                    <ToggleButton value='u'>Best</ToggleButton>
+                    <ToggleButton value='uvc'>Interesting</ToggleButton>
+                    <ToggleButton value='uvac'>Hot</ToggleButton>
                 </ToggleButtonGroup>
             </Box>
             {loading && <LoadingBar />}

package-lock.json

@@ -32178,7 +32178,7 @@
                 "js-cookie": "^3.0.1",
                 "marked": "^4.0.18",
                 "react": "^18.2.0",
-                "react-copy-to-clipboard": "*",
+                "react-copy-to-clipboard": "^5.1.0",
                 "react-gravatar": "^2.6.3",
                 "react-helmet": "^6.1.0",
                 "react-markdown": "^8.0.3",

server/routes/question/Search.js

@@ -3,7 +3,7 @@ const config = require('server/config.json');
 const Question = require('server/db/models/Question');
 
 async function Search(req, res) {
-    const { creator, title, text, tags, createdAt } = req.query;
+    const { creator, title, text, tags, createdAt, sort } = req.query;
 
     let searchQuery = {};
     if (creator) {
@@ -28,7 +28,30 @@ async function Search(req, res) {
         searchQuery['createdAt'] = createdAt;
     }
 
-    const questions = await Question.find(searchQuery).sort({ createdAt: 'asc' });
+    let sortQuery = [[createdAt, 'desc']];
+    switch (sort) {
+        case 'u':
+            sortQuery = [['upvotes', 'desc']];
+            break;
+        case 'uvc':
+            sortQuery = [
+                ['upvotes', 'desc'],
+                ['view', 'desc'],
+                ['comments', 'desc'],
+            ];
+            break;
+        case 'uvac':
+            sortQuery = [
+                ['upvotes', 'desc'],
+                ['view', 'desc'],
+                ['answers', 'desc'],
+                ['comments', 'desc'],
+            ];
+            searchQuery['hasAcceptedAnswer'] = false;
+            break;
+    }
+
+    const questions = await Question.find(searchQuery).sort(sortQuery);
 
     return res.send({ questions });
 }