From 3ebce8bd10466d783cecabbd20ea793d8ccaba60 Mon Sep 17 00:00:00 2001 From: Shikhar Date: Sat, 10 Feb 2024 18:53:14 +0530 Subject: [PATCH 1/2] fix/view-more/functionality --- .../Organization/OrgUsers/OrgUsers.jsx | 18 +++- src/components/Organization/pages/Users.jsx | 99 ++++++++++++++++++- 2 files changed, 111 insertions(+), 6 deletions(-) diff --git a/src/components/Organization/OrgUsers/OrgUsers.jsx b/src/components/Organization/OrgUsers/OrgUsers.jsx index 5850eb1e..14abcab3 100644 --- a/src/components/Organization/OrgUsers/OrgUsers.jsx +++ b/src/components/Organization/OrgUsers/OrgUsers.jsx @@ -1,8 +1,9 @@ import { Avatar, Button, Grid, Paper, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; -import React from "react"; +import React, {useState} from "react"; import AddIcon from "@mui/icons-material/Add"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded'; const useStyles = makeStyles(theme => ({ root: { @@ -67,6 +68,12 @@ function Orgusers({ dataTestId }) { const classes = useStyles(); + const [showAllUsers, setShowAllUsers] = useState(false); + + const handleViewMoreClick = () => { + setShowAllUsers(!showAllUsers); + }; + return ( @@ -107,7 +114,7 @@ function Orgusers({ className={classes.userList} data-testid="org-userlist" > - {Users.map((user, index) => ( + {Users.slice(0, showAllUsers ? Users.length : 3).map((user, index) => ( 3 ? "flex" : "none" }} + onClick={handleViewMoreClick} > - + {showAllUsers ? : } - View More + {showAllUsers ? "View Less" : "View More"} diff --git a/src/components/Organization/pages/Users.jsx b/src/components/Organization/pages/Users.jsx index 999435f8..2bf606c5 100644 --- a/src/components/Organization/pages/Users.jsx +++ b/src/components/Organization/pages/Users.jsx @@ -32,7 +32,48 @@ function Users() { type: "image", value: "https://i.pravatar.cc/300" } - } + }, + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + ]; const ContributersUsers = [ @@ -67,6 +108,62 @@ function Users() { type: "image", value: "https://i.pravatar.cc/300" } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } } ]; From 988586981ea1bfcd8e1dbb82eaeb1be4121c4ede Mon Sep 17 00:00:00 2001 From: Shikhar Date: Sat, 10 Feb 2024 19:20:09 +0530 Subject: [PATCH 2/2] changes --- .../Organization/OrgUsers/OrgUsers.jsx | 84 ++--- src/components/Organization/pages/Users.jsx | 3 +- src/store/actions/tutorialsActions.js | 294 +++++++++--------- 3 files changed, 191 insertions(+), 190 deletions(-) diff --git a/src/components/Organization/OrgUsers/OrgUsers.jsx b/src/components/Organization/OrgUsers/OrgUsers.jsx index 14abcab3..308af1c0 100644 --- a/src/components/Organization/OrgUsers/OrgUsers.jsx +++ b/src/components/Organization/OrgUsers/OrgUsers.jsx @@ -1,9 +1,9 @@ import { Avatar, Button, Grid, Paper, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; -import React, {useState} from "react"; +import React, { useState } from "react"; import AddIcon from "@mui/icons-material/Add"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded'; +import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded"; const useStyles = makeStyles(theme => ({ root: { @@ -73,7 +73,7 @@ function Orgusers({ const handleViewMoreClick = () => { setShowAllUsers(!showAllUsers); }; - + return ( @@ -114,49 +114,51 @@ function Orgusers({ className={classes.userList} data-testid="org-userlist" > - {Users.slice(0, showAllUsers ? Users.length : 3).map((user, index) => ( - - + {Users.slice(0, showAllUsers ? Users.length : 3).map( + (user, index) => ( + - {user.avatar.type === "char" ? ( - {user.avatar.value} - ) : ( - - )} - - - - {user.name}, - - - {user.designation} - + + {user.avatar.type === "char" ? ( + {user.avatar.value} + ) : ( + + )} + + + + {user.name}, + + + {user.designation} + + - - - ))} + + ) + )} - {showAllUsers ? : } + {showAllUsers ? : } {showAllUsers ? "View Less" : "View More"} diff --git a/src/components/Organization/pages/Users.jsx b/src/components/Organization/pages/Users.jsx index 2bf606c5..11cff625 100644 --- a/src/components/Organization/pages/Users.jsx +++ b/src/components/Organization/pages/Users.jsx @@ -72,8 +72,7 @@ function Users() { type: "char", value: "A" } - }, - + } ]; const ContributersUsers = [ diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js index 7d273c1d..f6adedc4 100644 --- a/src/store/actions/tutorialsActions.js +++ b/src/store/actions/tutorialsActions.js @@ -230,36 +230,36 @@ export const getCurrentTutorialData = export const addNewTutorialStep = ({ owner, tutorial_id, title, time, id }) => - async (firebase, firestore, dispatch) => { - try { - dispatch({ type: actions.CREATE_TUTORIAL_STEP_START }); + async (firebase, firestore, dispatch) => { + try { + dispatch({ type: actions.CREATE_TUTORIAL_STEP_START }); - await firestore - .collection("tutorials") - .doc(tutorial_id) - .collection("steps") - .doc(id) - .set({ - content: `Switch to editor mode to begin ${title} step`, - id, - time, - title, - visibility: true, - deleted: false - }); + await firestore + .collection("tutorials") + .doc(tutorial_id) + .collection("steps") + .doc(id) + .set({ + content: `Switch to editor mode to begin ${title} step`, + id, + time, + title, + visibility: true, + deleted: false + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); - dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS }); - } catch (e) { - console.log("CREATE_TUTORIAL_STEP_FAIL", e.message); - dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message }); - } - }; + dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS }); + } catch (e) { + console.log("CREATE_TUTORIAL_STEP_FAIL", e.message); + dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message }); + } + }; export const clearCreateTutorials = () => dispatch => dispatch({ type: actions.CLEAR_CREATE_TUTORIALS_STATE }); @@ -305,78 +305,78 @@ export const setCurrentStepContent = export const hideUnHideStep = (owner, tutorial_id, step_id, visibility) => - async (firebase, firestore, dispatch) => { - try { - /* not being used */ - // const type = await checkUserOrOrgHandle(owner)(firebase); - await firestore - .collection("tutorials") - .doc(tutorial_id) - .collection("steps") - .doc(step_id) - .update({ - [`visibility`]: !visibility, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + async (firebase, firestore, dispatch) => { + try { + /* not being used */ + // const type = await checkUserOrOrgHandle(owner)(firebase); + await firestore + .collection("tutorials") + .doc(tutorial_id) + .collection("steps") + .doc(step_id) + .update({ + [`visibility`]: !visibility, + updatedAt: firestore.FieldValue.serverTimestamp() + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + }; export const publishUnpublishTutorial = (owner, tutorial_id, isPublished) => - async (firebase, firestore, dispatch) => { - try { - await firestore - .collection("tutorials") - .doc(tutorial_id) - .update({ - ["isPublished"]: !isPublished - }); + async (firebase, firestore, dispatch) => { + try { + await firestore + .collection("tutorials") + .doc(tutorial_id) + .update({ + ["isPublished"]: !isPublished + }); - getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch); - } catch (e) { - console.log(e.message); - } - }; + getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch); + } catch (e) { + console.log(e.message); + } + }; export const removeStep = (owner, tutorial_id, step_id, current_step_no) => - async (firebase, firestore, dispatch) => { - try { - await firestore - .collection("tutorials") - .doc(tutorial_id) - .collection("steps") - .doc(step_id) - .delete() - - // const data = await firestore - // .collection("tutorials") - // .doc(tutorial_id) - // .collection("steps") - // .doc(step_id) - // .get(); - - await setCurrentStepNo( - current_step_no > 0 ? current_step_no - 1 : current_step_no - )(dispatch); - - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + async (firebase, firestore, dispatch) => { + try { + await firestore + .collection("tutorials") + .doc(tutorial_id) + .collection("steps") + .doc(step_id) + .delete(); + + // const data = await firestore + // .collection("tutorials") + // .doc(tutorial_id) + // .collection("steps") + // .doc(step_id) + // .get(); + + await setCurrentStepNo( + current_step_no > 0 ? current_step_no - 1 : current_step_no + )(dispatch); + + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + }; export const setCurrentStep = data => async dispatch => dispatch({ type: actions.SET_EDITOR_DATA, payload: data }); @@ -465,69 +465,69 @@ export const remoteTutorialImages = export const updateStepTitle = (owner, tutorial_id, step_id, step_title) => - async (firebase, firestore, dispatch) => { - try { - const dbPath = `tutorials/${tutorial_id}/steps`; - await firestore - .collection(dbPath) - .doc(step_id) - .update({ - [`title`]: step_title, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + async (firebase, firestore, dispatch) => { + try { + const dbPath = `tutorials/${tutorial_id}/steps`; + await firestore + .collection(dbPath) + .doc(step_id) + .update({ + [`title`]: step_title, + updatedAt: firestore.FieldValue.serverTimestamp() + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e); - } - }; + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e); + } + }; export const updateStepTime = (owner, tutorial_id, step_id, step_time) => - async (firebase, firestore, dispatch) => { - try { - const dbPath = `tutorials/${tutorial_id}/steps`; - - await firestore - .collection(dbPath) - .doc(step_id) - .update({ - [`time`]: step_time, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + async (firebase, firestore, dispatch) => { + try { + const dbPath = `tutorials/${tutorial_id}/steps`; - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + await firestore + .collection(dbPath) + .doc(step_id) + .update({ + [`time`]: step_time, + updatedAt: firestore.FieldValue.serverTimestamp() + }); + + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + }; export const setTutorialTheme = ({ tutorial_id, owner, bgColor, textColor }) => - async (firebase, firestore, dispatch) => { - try { - const dbPath = `tutorials`; + async (firebase, firestore, dispatch) => { + try { + const dbPath = `tutorials`; - await firestore.collection(dbPath).doc(tutorial_id).update({ - text_color: textColor, - background_color: bgColor, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + await firestore.collection(dbPath).doc(tutorial_id).update({ + text_color: textColor, + background_color: bgColor, + updatedAt: firestore.FieldValue.serverTimestamp() + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + };