Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/like dislike implementation #3

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Codelabz</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
Expand Down
6 changes: 1 addition & 5 deletions less.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const lessOptions = {
export const lessOptions = {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
Expand All @@ -10,7 +10,3 @@ const lessOptions = {
}
}
};

module.exports = {
lessOptions
};
10 changes: 5 additions & 5 deletions src/components/AuthPage/smButton/smButtons.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ const SmButtons = () => {
}}
>
<Grid item>
<IconButton className={classes.button}>
<Icon
onClick={() => signInWithGoogle()(firebase, dispatch)}
className={classes.google}
>
<IconButton
className={classes.button}
onClick={() => signInWithGoogle()(firebase, dispatch)}
>
<Icon className={classes.google}>
<img className={classes.imageIcon} src={GoogleImg} alt="google" />
</Icon>
</IconButton>
Expand Down
44 changes: 2 additions & 42 deletions src/components/Card/CardWithPicture.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,11 @@ import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import ChatOutlinedIcon from "@mui/icons-material/ChatOutlined";
import TurnedInNotOutlinedIcon from "@mui/icons-material/TurnedInNotOutlined";
import MoreVertOutlinedIcon from "@mui/icons-material/MoreVertOutlined";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import { getUserProfileData } from "../../store/actions";
import TutorialLikesDislikes from "../ui-helpers/TutorialLikesDislikes";

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -73,22 +71,9 @@ const useStyles = makeStyles(theme => ({

export default function CardWithPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
const handleIncrement = () => {
setCount(count + 1);
};

const handleDecrement = () => {
setCount(count - 1);
};

const handleAlignment = (event, newAlignment) => {
setAlignment(newAlignment);
};

useEffect(() => {
getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
Expand Down Expand Up @@ -189,32 +174,7 @@ export default function CardWithPicture({ tutorial }) {
{"10 min"}
</Typography>
<div className={classes.grow} />
<ToggleButtonGroup
size="small"
className={classes.small}
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton
className={classes.small}
onClick={handleIncrement}
value="left"
aria-label="left aligned"
>
<KeyboardArrowUpIcon />
<span>{count}</span>
</ToggleButton>
<ToggleButton
className={classes.small}
onClick={handleDecrement}
value="center"
aria-label="centered"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<TutorialLikesDislikes tutorial_id={tutorial?.tutorial_id} />
<IconButton aria-label="share" data-testId="CommentIcon">
<ChatOutlinedIcon />
</IconButton>
Expand Down
46 changes: 3 additions & 43 deletions src/components/Card/CardWithoutPicture.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import ChatOutlinedIcon from "@mui/icons-material/ChatOutlined";
import TurnedInNotOutlinedIcon from "@mui/icons-material/TurnedInNotOutlined";
import MoreVertOutlinedIcon from "@mui/icons-material/MoreVertOutlined";
import ToggleButton from "@mui/lab/ToggleButton";
import ToggleButtonGroup from "@mui/lab/ToggleButtonGroup";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import { getUserProfileData } from "../../store/actions";
import TutorialLikesDislikes from "../ui-helpers/TutorialLikesDislikes";

const useStyles = makeStyles(theme => ({
root: {
margin: "0.5rem",
Expand Down Expand Up @@ -67,22 +65,9 @@ const useStyles = makeStyles(theme => ({

export default function CardWithoutPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
const handleIncrement = () => {
setCount(count + 1);
};

const handleDecrement = () => {
setCount(count - 1);
};

const handleAlignment = (event, newAlignment) => {
setAlignment(newAlignment);
};

useEffect(() => {
getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
Expand Down Expand Up @@ -178,32 +163,7 @@ export default function CardWithoutPicture({ tutorial }) {
{"10 min"}
</Typography>
<div className={classes.grow} />
<ToggleButtonGroup
size="small"
className={classes.small}
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton
className={classes.small}
onClick={handleIncrement}
value="left"
aria-label="left aligned"
>
<KeyboardArrowUpIcon />
<span>{count}</span>
</ToggleButton>
<ToggleButton
className={classes.small}
onClick={handleDecrement}
value="center"
aria-label="centered"
>
<KeyboardArrowDownIcon />
</ToggleButton>
</ToggleButtonGroup>
<TutorialLikesDislikes tutorial_id={tutorial?.tutorial_id} />
<IconButton aria-label="share" data-testId="CommentIcon">
<ChatOutlinedIcon />
</IconButton>
Expand Down
12 changes: 6 additions & 6 deletions src/components/CardTabs/Events/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ const EventsCard = props => {
<div className={classes.root}>
<Card
className={(classes.card, classes.root)}
data-testId="upcomingEventCard"
data-testid="upcomingEventCard"
>
<CardContent
style={{
width: "100%"
}}
>
<Typography variant="h5" component="div" gutterBottom>
<Typography variant="h5" component="div" gutterbottom="true">
{props.title}
</Typography>
{props.events.map(function (event, index) {
Expand All @@ -54,23 +54,23 @@ const EventsCard = props => {
container
direction="row"
spacing={2}
data-testId={index == 0 ? "upEventBox" : ""}
data-testid={index == 0 ? "upEventBox" : ""}
>
<Grid item xs={3}>
<img
src={event.img[0]}
className={classes.logo}
data-testId={index == 0 ? "upEventImg" : ""}
data-testid={index == 0 ? "upEventImg" : ""}
/>
</Grid>

<Grid item xs={9}>
<Box data-testId={index == 0 ? "upEventName" : ""}>
<Box data-testid={index == 0 ? "upEventName" : ""}>
<Typography>{event.name}</Typography>
</Box>
<Box
sx={{ fontWeight: 400, fontSize: "0.8rem" }}
data-testId={index == 0 ? "upEventDate" : ""}
data-testid={index == 0 ? "upEventDate" : ""}
>
<Typography>{event.date}</Typography>
</Box>
Expand Down
6 changes: 3 additions & 3 deletions src/components/CardTabs/Tags/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ const TagCard = props => {
const classes = useStyles();

return (
<div className={classes.root} data-testId="TagsCard">
<div className={classes.root} data-testid="TagsCard">
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography
variant="h6"
component="div"
gutterBottom
data-testId="TagsCardTitle"
data-testid="TagsCardTitle"
>
Popular Tags
</Typography>
Expand All @@ -61,7 +61,7 @@ const TagCard = props => {
label={tag}
id={index}
className={classes.chip}
data-testId={index === 0 ? "TagsChip" : ""}
data-testid={index === 0 ? "TagsChip" : ""}
/>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion src/components/CardTabs/Users/UserElement.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const UserElement = ({ user, index, useStyles }) => {
key: "user" + { index },
mb: 1.5
}}
gutterBottom
gutterbottom="true"
>
<Box
sx={{
Expand Down
Loading
Loading