From b44cebbf6c58b1b728dc1b8f0787a6f9674ce42a Mon Sep 17 00:00:00 2001 From: Linnea Myllynen Date: Wed, 8 Jun 2022 12:54:57 +0300 Subject: [PATCH] Fix bug when adding achievements for groupmembers --- src/api/index.js | 46 ++++++----- src/views/AcceptTasks/group.js | 126 ++--------------------------- src/views/AcceptTasks/index.js | 140 ++++++++++++++++++++++++++++++++- 3 files changed, 168 insertions(+), 144 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 3474ab6..8909b93 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -79,18 +79,20 @@ export const postTaskEntry = async (entry) => { } export const postTaskGroupEntry = async (data, taskgroup_guid) => { - const res = await fetch( - `${API_URL}/groups/mark-taskgroup-done/${taskgroup_guid}`, - { - method: 'POST', - body: JSON.stringify(data), - headers: { - 'Content-Type': 'application/json', - }, - credentials: 'include', - } - ) - return await res.json() + for (let group of Object.values(data.groups)) { + const res = await fetch( + `${API_URL}/groups/mark-taskgroup-done/${taskgroup_guid}`, + { + method: 'POST', + body: JSON.stringify(group), + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + } + ) + return await res.json() + } } export const postMemberTaskEntry = async (entry) => { @@ -118,15 +120,17 @@ export const removeMemberTaskEntry = async (entry) => { } export const acceptGroupMemberTasks = async (data, taskId) => { - const res = await fetch(`${API_URL}/groups/mark-task-done/${taskId}`, { - method: 'POST', - body: JSON.stringify(data), - headers: { - 'Content-Type': 'application/json', - }, - credentials: 'include', - }) - return res.json() + for (let group of Object.values(data)) { + const res = await fetch(`${API_URL}/groups/mark-task-done/${taskId}`, { + method: 'POST', + body: JSON.stringify(group), + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + }) + return res.json() + } } export const fetchUserTasks = async () => { diff --git a/src/views/AcceptTasks/group.js b/src/views/AcceptTasks/group.js index bdf1a58..aa58304 100644 --- a/src/views/AcceptTasks/group.js +++ b/src/views/AcceptTasks/group.js @@ -1,3 +1,4 @@ +/* eslint-disable */ import React, { useEffect } from 'react' import styled, { keyframes, css } from 'styled-components' import { useParams } from 'react-router-dom' @@ -9,15 +10,8 @@ import { AccordionItemPanel, } from 'react-accessible-accordion' import ListItem from 'components/ListItem' -import { COMPLETION_STATUS, ITEM_TYPES, TASK_GROUP_STATUS } from 'consts' +import { ITEM_TYPES } from 'consts' import { useSelector } from 'react-redux' -import { StyledAcceptIcon } from '../../components/TaskActionsIcons' -import { useDispatch } from 'react-redux' -import { - updateGroupMemberTask, - updateGroupMemberTaskGroup, -} from '../../redux/actionCreators' -import { acceptGroupMemberTasks, postTaskGroupEntry } from '../../api' import { getTermInLanguage } from '../../helpers' import GroupMember from './GroupMember' @@ -37,43 +31,6 @@ const Content = styled.div` margin-bottom: 2rem; ` -const AcceptTasksAction = styled.div` - position: fixed; - bottom: 0; - left: 0; - box-sizing: border-box; - width: 100%; - padding: 3rem; - color: ${({ theme }) => theme.color.text}; - background-color: ${({ theme }) => theme.color.background}; - z-index: 1; - animation: ${keyframes` - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - `} 200ms linear; -` - -const ActivityItem = styled.div` - display: flex; - align-items: center; - - > span { - padding: 1rem; - } - - :last-child { - justify-content: center; - - > span { - padding-top: 2rem; - } - } -` - const StyledListItem = styled.div` padding: 0.25rem; text-decoration: none; @@ -92,7 +49,6 @@ const StyledListHeading = styled.h4` padding: 0 0 0 0.25rem; text-decoration: underline; ` -const initialList = [] const getInitialCheckboxData = (group) => group.members.map((member) => ({ @@ -103,16 +59,12 @@ const getInitialCheckboxData = (group) => taskGroups: member.memberTaskGroups, })) -const Group = ({ group, isLast }) => { - const dispatch = useDispatch() +const Group = ({ group, isLast, setMemberIdList }) => { const { taskGuid } = useParams() const groupsData = useSelector((state) => state.user.userGroups) const translations = useSelector((state) => state.translations) const itemsByGuid = useSelector((state) => state.itemsByGuid) - const user = useSelector((state) => state.user) const activityGroupById = useSelector((state) => state.activityGroups) - const [memberIdList, setMemberIdList] = React.useState(initialList) - const [selectedGroup, setSelectedGroup] = React.useState() const [checkboxData, setCheckboxData] = React.useState( getInitialCheckboxData(group) ) @@ -147,14 +99,6 @@ const Group = ({ group, isLast }) => { return isGroupLeader } - function updateGroup(group) { - if (selectedGroup) { - setSelectedGroup(null) - } else { - setSelectedGroup(group) - } - } - function handleChange(event) { if (event.target.name === 'checkAll') { checkboxData.map((member) => { @@ -171,7 +115,7 @@ const Group = ({ group, isLast }) => { return idList }, []) - setMemberIdList(editableList) + setMemberIdList(editableList, group.id) } function handleCheckboxSelection(memberId, isChecked) { @@ -187,51 +131,6 @@ const Group = ({ group, isLast }) => { }) } - async function handleSubmit() { - try { - const data = { - userIds: memberIdList, - } - await acceptGroupMemberTasks(data, taskGuid) - for (let id of memberIdList) { - dispatch( - updateGroupMemberTask({ - task_guid: taskGuid, - user_guid: Number(id), - completion_status: TASK_GROUP_STATUS.COMPLETED, - groupGuid: Number(selectedGroup), - }) - ) - } - } catch (e) { - console.log(e) - } - setMemberIdList(initialList) - } - - async function handleTaskGroupSubmit() { - try { - const data = { - userIds: memberIdList, - group_leader_name: user.name, - } - await postTaskGroupEntry(data, taskGuid) - for (let id of memberIdList) { - dispatch( - updateGroupMemberTaskGroup({ - taskgroup_guid: taskGuid, - user_guid: Number(id), - completed: COMPLETION_STATUS.COMPLETED, - groupGuid: Number(selectedGroup), - }) - ) - } - } catch (e) { - console.log(e) - } - setMemberIdList(initialList) - } - const renderMember = (member, checkFunction) => { return ( checkFunction(member) && ( @@ -258,7 +157,7 @@ const Group = ({ group, isLast }) => { updateGroup(ageGroupId)} + // onChange={() => updateGroup(ageGroupId)} key={ageGroupId} > @@ -309,21 +208,6 @@ const Group = ({ group, isLast }) => { - {memberIdList.length > 0 && item.type === 'TASK' ? ( - - - - {getTermInLanguage(translations, 'lisaa-valituille')} - - - ) : ( - - - - {getTermInLanguage(translations, 'lisaa-valituille')} - - - )} ) } diff --git a/src/views/AcceptTasks/index.js b/src/views/AcceptTasks/index.js index 136235d..351be7a 100644 --- a/src/views/AcceptTasks/index.js +++ b/src/views/AcceptTasks/index.js @@ -1,10 +1,56 @@ -import React from 'react' -import styled from 'styled-components' +import React, { useEffect, useState } from 'react' +import styled, { keyframes } from 'styled-components' import { useHistory } from 'react-router-dom' import { X } from 'react-feather' import { useSelector } from 'react-redux' import { determineLanguageFromUrl, getTermInLanguage } from 'helpers' import Group from './group' +import { StyledAcceptIcon } from '../../components/TaskActionsIcons' +import { + updateGroupMemberTask, + updateGroupMemberTaskGroup, +} from '../../redux/actionCreators' +import { acceptGroupMemberTasks, postTaskGroupEntry } from '../../api' +import { COMPLETION_STATUS, TASK_GROUP_STATUS } from 'consts' +import { useDispatch } from 'react-redux' +import { useParams } from 'react-router-dom' + +const AcceptTasksAction = styled.div` + position: fixed; + bottom: 0; + left: 0; + box-sizing: border-box; + width: 100%; + padding: 3rem; + color: ${({ theme }) => theme.color.text}; + background-color: ${({ theme }) => theme.color.background}; + z-index: 1; + animation: ${keyframes` + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + `} 200ms linear; +` + +const ActivityItem = styled.div` + display: flex; + align-items: center; + + > span { + padding: 1rem; + } + + :last-child { + justify-content: center; + + > span { + padding-top: 2rem; + } + } +` const StyledAcceptTasks = styled.div` height: 100%; @@ -41,12 +87,84 @@ const Content = styled.div` } ` const AcceptTasks = () => { + const [memberIdList, setMemberIdList] = useState({}) + const [selectedGroup, setSelectedGroup] = React.useState() const history = useHistory() const language = determineLanguageFromUrl(window.location) const groupsData = useSelector((state) => state.user.userGroups) const translations = useSelector((state) => state.translations) + const itemsByGuid = useSelector((state) => state.itemsByGuid) + const dispatch = useDispatch() + const { taskGuid } = useParams() + const user = useSelector((state) => state.user) + + const item = itemsByGuid[taskGuid] if (!translations || !groupsData) return null + useEffect(() => { + if (!Object.keys(memberIdList).length) { + const groups = + groupsData && + groupsData.length && + groupsData.reduce((acc, group) => { + acc[group.id] = [] + return acc + }, {}) + setMemberIdList(groups) + } + }, [groupsData]) + + async function handleSubmit() { + try { + const data = memberIdList + await acceptGroupMemberTasks(data, taskGuid) + + for (let [membergroup, memberIds] of Object.entries(memberIdList)) { + for (let memberid of memberIds) { + dispatch( + updateGroupMemberTask({ + task_guid: taskGuid, + user_guid: Number(memberid), + completion_status: TASK_GROUP_STATUS.COMPLETED, + groupGuid: Number(membergroup), + }) + ) + } + } + } catch (e) { + console.log(e) + } + } + + async function handleTaskGroupSubmit() { + try { + const data = { + groups: memberIdList, + group_leader_name: user.name, + } + await postTaskGroupEntry(data, taskGuid) + for (let [membergroup, memberIds] of Object.entries(memberIdList)) { + for (let memberid of memberIds) { + dispatch( + updateGroupMemberTaskGroup({ + taskgroup_guid: taskGuid, + user_guid: Number(memberid), + completed: COMPLETION_STATUS.COMPLETED, + groupGuid: Number(membergroup), + }) + ) + } + } + } catch (e) { + console.log(e) + } + } + + const updateIdList = (memberIds, groupId) => { + const updated = Object.assign({}, memberIdList, { [groupId]: memberIds }) + setMemberIdList(updated) + } + return (
@@ -65,9 +183,27 @@ const AcceptTasks = () => { key={group.id} group={group} isLast={i === groupsData.length - 1} + setMemberIdList={updateIdList} + setSelectedGroup={setSelectedGroup} + selectedGroup={selectedGroup} /> ) })} + {item.type === 'TASK' ? ( + + + + {getTermInLanguage(translations, 'lisaa-valituille')} + + + ) : ( + + + + {getTermInLanguage(translations, 'lisaa-valituille')} + + + )} )