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

Comments details not visible fixed , also redirection to the org's page is fixed (#10 fixed) #11

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
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
108 changes: 81 additions & 27 deletions src/components/Card/CardWithPicture.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { useDispatch, useSelector } from "react-redux";
import { useFirebase, useFirestore } from "react-redux-firebase";
import { getUserProfileData } from "../../store/actions";


const useStyles = makeStyles(theme => ({
root: {
margin: "0.5rem",
Expand Down Expand Up @@ -75,6 +76,8 @@ export default function CardWithPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const [tags, setTags] = useState([])

const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
Expand Down Expand Up @@ -106,24 +109,44 @@ export default function CardWithPicture({ tutorial }) {
return timestamp.toDate().toDateString();
};

useEffect(() => {
if (tutorial.tags) {
const tagsArray = tutorial.tags.split(' ');
setTags(tagsArray)
}
console.log(tutorial)
},[])



return (
<Card className={classes.root}>
<Link to={`/tutorial/${tutorial?.tutorial_id}`}>
<CardMedia
className={classes.media}
image={tutorial?.featured_image}
title="code"
data-testId="Image"
/>
</Link>
{tutorial.featured_image ?
<Link to={`/tutorial/${tutorial?.tutorial_id}`}>
<CardMedia
className={classes.media}
image={tutorial?.featured_image}
title="code"
data-testId="Image"
/>
</Link>
: ""}
<CardHeader
avatar={
<Avatar className={classes.avatar}>
{user?.photoURL && user?.photoURL.length > 0 ? (
<img src={user?.photoURL} />
) : (
user?.displayName[0]
)}
{tutorial.profilePic ?
<img src={`/src/assets/images/${tutorial?.profilePic}`} alt="" />

:
user?.photoURL && user?.photoURL.length > 0 ? (
<img src={user?.photoURL} />
) : (
user?.displayName[0]
)
}



</Avatar>
}
title={
Expand All @@ -135,7 +158,7 @@ export default function CardWithPicture({ tutorial }) {
color="textPrimary"
data-testId="UserName"
>
{user?.displayName}
{tutorial.name ? tutorial.name : user?.displayName}
</Typography>
{tutorial?.owner && (
<>
Expand All @@ -153,9 +176,25 @@ export default function CardWithPicture({ tutorial }) {
)}
</React.Fragment>
}
subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : tutorial.date}
/>
<Link to={`/tutorial/${tutorial?.tutorial_id}`}>
{tutorial.tutorial_id ?
<Link to={`/tutorial/${tutorial?.tutorial_id}`}>
<CardContent className={classes.contentPadding}>
<Typography variant="h5" color="text.primary" data-testId="Title">
{tutorial?.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
paragraph
data-testId="Description"
>
{tutorial?.summary}
</Typography>
</CardContent>
</Link> :
<CardContent className={classes.contentPadding}>
<Typography variant="h5" color="text.primary" data-testId="Title">
{tutorial?.title}
Expand All @@ -167,26 +206,41 @@ export default function CardWithPicture({ tutorial }) {
paragraph
data-testId="Description"
>
{tutorial?.summary}
{tutorial?.description}
</Typography>
</CardContent>
</Link>
}

<CardActions className={classes.settings} disableSpacing>
<Chip
label="HTML"
component="a"
href="#chip"
clickable
variant="outlined"
className={classes.margin}
/>
{tutorial.tags ?
tags.map((tag) => (
<Chip
label={tag}
component="a"
href="#chip"
clickable
variant="outlined"
className={classes.margin}
/>
))
:
<Chip
label="HTML"
component="a"
href="#chip"
clickable
variant="outlined"
className={classes.margin}
/>
}

<Typography
variant="overline"
display="block"
className={classes.time}
data-testId="Time"
>
{"10 min"}
{tutorial.time ? tutorial.time : "10 min"}
</Typography>
<div className={classes.grow} />
<ToggleButtonGroup
Expand Down
92 changes: 73 additions & 19 deletions src/components/Card/CardWithoutPicture.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default function CardWithoutPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
const [tags, setTags] = useState([])
const dispatch = useDispatch();
const firebase = useFirebase();
const firestore = useFirestore();
Expand Down Expand Up @@ -96,20 +97,39 @@ export default function CardWithoutPicture({ tutorial }) {
}) => data
);

useEffect(() => {
console.log(tutorial, user)
}, [])

const getTime = timestamp => {
return timestamp.toDate().toDateString();
};

useEffect(() => {
if (tutorial.tags) {
const tagsArray = tutorial.tags.split(' ');
setTags(tagsArray)
}
console.log(tutorial)
}, [])


return (
<Card className={classes.root} data-testId="codelabz">
<CardHeader
avatar={
<Avatar className={classes.avatar}>
{user?.photoURL && user?.photoURL.length > 0 ? (
<img src={user?.photoURL} />
) : (
user?.displayName[0]
)}
{tutorial?.profilePic ?
<img src={`/src/assets/images/${tutorial?.profilePic}`} alt="" />

:
user?.photoURL && user?.photoURL.length > 0 ? (
<img src={user?.photoURL} />
) : (
user?.displayName[0]
)
}

</Avatar>
}
title={
Expand All @@ -121,7 +141,7 @@ export default function CardWithoutPicture({ tutorial }) {
color="textPrimary"
data-testId="UserName"
>
{user?.displayName}
{tutorial?.name ? tutorial.name : user?.displayName}
</Typography>
{tutorial?.owner && (
<>
Expand All @@ -139,9 +159,29 @@ export default function CardWithoutPicture({ tutorial }) {
)}
</React.Fragment>
}
subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : tutorial.date}
/>
<Link to={`/tutorial/${tutorial?.tutorial_id}`}>
{tutorial?.tutorial_id ?
<Link to={`/tutorial/${tutorial?.tutorial_id}`}>
<CardContent
className={classes.contentPadding}
data-testId="codelabzDetails"
>
<Typography variant="h5" color="text.primary" data-testId="Title">
{tutorial?.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
paragraph
data-testId="Description"
>
{tutorial?.summary}
</Typography>
</CardContent>
</Link>
:
<CardContent
className={classes.contentPadding}
data-testId="codelabzDetails"
Expand All @@ -156,26 +196,40 @@ export default function CardWithoutPicture({ tutorial }) {
paragraph
data-testId="Description"
>
{tutorial?.summary}
{tutorial?.description}
</Typography>
</CardContent>
</Link>
}

<CardActions className={classes.settings} disableSpacing>
<Chip
label="HTML"
component="a"
href="#chip"
clickable
variant="outlined"
className={classes.margin}
/>
{tutorial.tags ?
tags.map((tag) => (
<Chip
label={tag}
component="a"
href="#chip"
clickable
variant="outlined"
className={classes.margin}
/>
))
:
<Chip
label="HTML"
component="a"
href="#chip"
clickable
variant="outlined"
className={classes.margin}
/>
}
<Typography
variant="overline"
display="block"
className={classes.time}
data-testId="Time"
>
{"10 min"}
{tutorial.time ? tutorial.time : "10 min"}
</Typography>
<div className={classes.grow} />
<ToggleButtonGroup
Expand Down
2 changes: 2 additions & 0 deletions src/components/HomePage/userList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const userList = {
name: "Shahaab",
organizationName: "Codelabz",
date: "Dec 3, 2022",
profilePic: "demoperson4.jpeg",
title: "FreeCodeCamp Especially If You Do Not Have 24/7 Internet Access",
contentDescription:
"Make sure your conditions fit with the map. Instead of writing logic handling for each case, We had a map, and we put the case and the logic as key, value pairs. Hence, We can retriev the logic from the map based on the key...",
Expand All @@ -21,6 +22,7 @@ export const userList = {
time: "10 min read"
},
{
Heading: "CardWithPicture",
name: "Ayush",
title: "I made 100 more CSS loaders for your next project",
tags: "#css #webdev #beginners #html",
Expand Down
9 changes: 1 addition & 8 deletions src/components/Organization/ViewOrganization/Feeds.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,7 @@ function Feeds() {
<Grid item xs={12}>
<CardWithoutPicture
className={classes.postCard}
name={person.name}
title={person.title}
contentDescription={person.description}
tags={person.tags}
profilePic={person.profilePic}
organizationName={person.org}
date={person.date}
time={person.time}
tutorial={person}
/>
</Grid>
))}
Expand Down
4 changes: 2 additions & 2 deletions src/components/User/UserProfile/UserProfile.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,9 @@ function UserProfile(props) {
<Grid>
{userList.persons.map(person => {
return person.Heading == "CardWithoutPicture" ? (
<CardWithoutPicture {...person} className={classes.card} />
<CardWithoutPicture tutorial={person} className={classes.card} />
) : (
<CardWithPicture {...person} className={classes.card} />
<CardWithPicture tutorial={person} className={classes.card} />
);
})}
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion src/store/actions/orgActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ export const getOrgData =
try {
dispatch({ type: actions.GET_ORG_DATA_START });

const isOrgExists = await checkOrgHandleExists(org_handle)(firestore);
const isOrgExists = await checkOrgHandleExists(org_handle)(firebase);

if (isOrgExists) {
const doc = await firestore
Expand Down