c4patino/qoverflow
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Edited listquestion

Browse source
This commit is contained in:
Ceferino Patino 2022-08-18 18:26:13 -04:00
commit 5769bc9c81
2 changed files with 63 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

60
client/src/components/ListQuestion.jsx
View file

@ -1,8 +1,9 @@
import { Divider, Grid, ListItem, Stack, Typography, useMediaQuery } from '@mui/material';
import { Divider, Grid, ListItem, Stack, Typography, Chip } from '@mui/material';
import { Link } from 'react-router-dom';
import { CreationInfoTag } from 'controllers';
import ListQuestionInfo from './ListQuestionInfo';
import { useMediaQuery } from '@mui/material';
export default function ListQuestion({
question_id,
answers,
@ -24,13 +25,38 @@ export default function ListQuestion({
<span key={question_id}>
<ListItem disablePadding>
<Grid container>
<Grid item xs={2}>
<Stack justifyContent='center' sx={{ height: '100%' }}>
{sm || md ? <ListQuestionInfo {...{ answers, downvotes, inline: false, hasAcceptedAnswer, tags, upvotes, views }} /> : null}
</Stack>
</Grid>
{(sm || md) && (
<Grid item xs={2}>
<Stack justifyContent='center' sx={{ height: '100%' }}>
<ListQuestionInfo
{...{
answers,
downvotes,
inline: false,
hasAcceptedAnswer,
tags,
upvotes,
views,
}}
/>
</Stack>
</Grid>
)}
<Grid item xs={10}>
{sm || md ? null : <ListQuestionInfo {...{ answers, downvotes, inline: true, hasAcceptedAnswer, tags, upvotes, views }} />}
{sm || md ? null : (
<ListQuestionInfo
{...{
answers,
downvotes,
inline: true,
hasAcceptedAnswer,
tags,
upvotes,
views,
}}
/>
)}
<CreationInfoTag {...{ createdAt, creator }} />
<Typography
variant='h6'
@ -38,11 +64,29 @@ export default function ListQuestion({
to={`/questions/${question_id}`}
style={{ textDecoration: 'none', color: 'inherit' }}
>
[{status}] {title}
[{status}] {title}{' '}
<Chip
color={hasAcceptedAnswer ? 'success' : 'error'}
label={hasAcceptedAnswer ? 'Accepted' : 'Unaccepted'}
size='small'
/>
</Typography>
<Typography noWrap variant='body1'>
{text.replace(/<[^>]*>?/gm, '')}
</Typography>
{tags.length > 0 && (
<Typography display='inline'>
Tags:{' '}
{tags.map((tag, index) => (
<Chip
label={tag}
size='small'
key={index}
sx={{ margin: '0 0.1vw' }}
/>
))}
</Typography>
)}
</Grid>
</Grid>
</ListItem>

31
client/src/components/ListQuestionInfo.jsx
View file

@ -1,33 +1,24 @@
import { Chip, Typography } from '@mui/material';
export default function ListQuestionInfo({ answers, downvotes, inline, hasAcceptedAnswer, tags, upvotes, views }) {
export default function ListQuestionInfo({
answers,
downvotes,
inline,
hasAcceptedAnswer,
tags,
upvotes,
views,
}) {
return inline ? (
<>
<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'>{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>
</>
)
}
);
}