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.

Sign up for GitHub

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

Jump to bottom

Tutorial steps timing displayed + added a limit for maximum time allocated to a step + redirection to the tutorial steps fixed #71

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Tutorial steps timing displayed + added a limit for maximum time allocated to a step + redirection to the tutorial steps fixed #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5ddf842
Confirmation
Aditya-Sakpal Jan 20, 2024
e72c362
Confirmation
Aditya-Sakpal Jan 31, 2024
2ad0cc1
Confirmation
Aditya-Sakpal Feb 19, 2024
e9cf19d
Confirmation
Aditya-Sakpal Feb 19, 2024
f40a71c
Confirmation
Aditya-Sakpal Feb 21, 2024
0bce9c8
Update index.jsx
Aditya-Sakpal Feb 21, 2024
f44f38c
Update tutorialsActions.js
Aditya-Sakpal Feb 21, 2024
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
142 changes: 76 additions & 66 deletions src/components/TutorialPage/StepList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import React, { useEffect, useState } from "react";
import { NavLink, useHistory, useLocation } from "react-router-dom";
import React, { useRef} from "react";
import {
MenuItem,
MenuList,
ListItemIcon,
ListItemText,
Paper,
Avatar,
Grid,
Button
Avatar
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { HashLink } from "react-router-hash-link";
import { useParams } from "react-router-dom";

const useStyles = makeStyles(theme => ({
Expand All @@ -21,7 +17,7 @@ const useStyles = makeStyles(theme => ({
},

listIcon: {
minWidth: "20px"
minWidth: "20px",
},

paper: {
Expand Down Expand Up @@ -49,7 +45,11 @@ const useStyles = makeStyles(theme => ({
borderRadius: "100px",
paddingTop: "8px",
paddingBottom: "3px",
margin: "3px 0 3px 0"
margin: "3px 0 3px 0",
'&:focus': {
backgroundColor: "#d8f0fc",
color: "#0293d9",
}
},

notification: {
Expand Down Expand Up @@ -84,76 +84,86 @@ const StepList = ({
* ? if the item has neither, render a MenuItem with no onClick
*
*/

const containerRef = useRef(null);
const clickedItemRef = useRef(null);

const handleScrollTo = (item) => {

if (containerRef.current && item.id) {

const targetElement = document.getElementById(item.id);

if (targetElement) {
console.log("item", item);
const yOffset = -75; // Adjust the offset as needed
const targetOffset = targetElement.offsetTop + yOffset;
window.scrollTo({
top: targetOffset,
behavior: 'smooth',
});
}
clickedItemRef.current?.focus();
}
};
return (
<Paper className={classes.paper} style={style}>
<MenuList className={classes.menuList}>
{menuItems.map(function (item, index) {
return (
<div ref={containerRef} className={classes.scrollContainer}>
<MenuList className={classes.menuList}>
{menuItems.map((item, index) => (
<div
key="menu-items"
key={`menu-item-${index}`}
style={
item.id == location.href.split("#")[1]
? { background: "#d9f1fc", borderRadius: "100px" }
item.id === location.href.split("#")[1]
? { background: "#d8f0fc", borderRadius: "100px", color: "#0293d9" }
: {}
}
data-testId={item?.dataTestId}
>
{item.id && (
<HashLink
to={`/tutorial/${id}/#${item.id}`}
smooth
className={classes.navLink}
<MenuItem
key={item.id}
onClick={() => {
toggleSlider();
onStateChange(index);
handleScrollTo(item);
}}
className={classes.menuItem}
ref={(ref) => {
if (item.id === location.href.split("#")[1]) {
clickedItemRef.current = ref; // Save ref for the clicked item
}
}}
>
<MenuItem
key={item.id}
onClick={() => {
toggleSlider();
onStateChange(index);
{item && (
<ListItemIcon className={classes.listIcon}>
<Avatar
sx={{ height: "1.5rem", width: "1.5rem"}}
>
{index + 1}
</Avatar>
</ListItemIcon>
)}
<ListItemText
data-testId={item.title}
sx={{ whiteSpace: "pre-line" }}
style={{
fontWeight:
item?.id && value === item?.id ? "bold" : "normal"
}}
className={classes.menuItem}
disableTypography
>
{item && (
<ListItemIcon className={classes.listIcon}>
<Avatar
sx={{ height: "1.5rem", width: "1.5rem" }}
style={
item.id == location.href.split("#")[1]
? {
background: "#0293D9",
borderRadius: "100px",
color: "#fff"
}
: {}
}
>
{index + 1}
</Avatar>
</ListItemIcon>
)}
<ListItemText
data-testId={item.title}
sx={{ whiteSpace: "pre-line" }}
style={{
fontWeight:
item?.id && value === item?.id ? "bold" : "normal",
color:
item?.id == location.href.split("#")[1]
? "#0293d9"
: "black"
}}
disableTypography
>
{item.title}
</ListItemText>
</MenuItem>
</HashLink>
{item.title}
</ListItemText>
</MenuItem>
)}
{!item.link && item.onClick && (
<MenuItem
key={item.title}
onClick={() => {
if (item.onClick) item.onClick(item);
item.onClick(item);
onStateChange(item);
handleScrollTo(item);
}}
className={classes.menuItem}
>
Expand All @@ -163,7 +173,7 @@ const StepList = ({
fontWeight:
item?.id && value === item?.id ? "bold" : "normal",
color:
item?.link == location.pathname ? "#0293d9" : "black"
item?.link === location.pathname ? "#0293d9" : "black",
}}
disableTypography
>
Expand All @@ -172,12 +182,12 @@ const StepList = ({
</MenuItem>
)}
</div>
);
})}
{children}
</MenuList>
))}
{children}
</MenuList>
</div>
</Paper>
);
};

export default StepList;
export default StepList;
39 changes: 25 additions & 14 deletions src/components/TutorialPage/components/Tutorial.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,33 @@ const useStyles = makeStyles(() => ({

const Tutorial = ({ steps }) => {
const classes = useStyles();
console.log(steps)
return (
<>
<Card className={classes.container}>
{steps?.map((step, i) => {
return (
<Box id={step.id} key={step.id} data-testId="tutorialpageSteps">
<Typography sx={{ fontWeight: "600" }}>
{i + 1 + ". " + step.title}
</Typography>
<Typography className="content">
<HtmlTextRenderer html={step.content} />
</Typography>
</Box>
);
})}
</Card>
<Card className={classes.container}>
{steps?.map((step, i) => {
const formatTime = (time) => {
if (time >= 60) {
const hours = Math.floor(time / 60);
const minutes = time % 60;
return `${hours} hours ${minutes} min`;
} else {
return `${time} min`;
}
};

return (
<Box id={step.id} key={step.id} data-testId="tutorialpageSteps">
<Typography sx={{ fontWeight: "600" }}>
{i + 1 + ". " + step.title} {step.time && `(${formatTime(step.time)})`}
</Typography>
<Typography className="content">
<HtmlTextRenderer html={step.content} />
</Typography>
</Box>
);
})}
</Card>
</>
);
};
Expand Down
3 changes: 2 additions & 1 deletion src/components/Tutorials/subComps/AddNewStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const AddNewStepModal = ({
tutorial_id,
owner
};

addNewTutorialStep(set_data)(firebase, firestore, dispatch);
};

Expand Down Expand Up @@ -135,7 +136,7 @@ const AddNewStepModal = ({
placeholder="Time (minutes)"
style={{ width: "100%" }}
data-testid={"newStepTimeInput"}
inputProps={{ min: 0 }}
inputProps={{ min: 0 ,max:300 }}
required="true"
/>
<Button
Expand Down