Skip to content
This repository has been archived by the owner on Aug 23, 2020. It is now read-only.

Commit

Permalink
Found a way around to ignore the Bug (Component was not rerendering o…
Browse files Browse the repository at this point in the history 
…n state update)
  • Loading branch information
@ritsource
ritsource committed Mar 8, 2019
1 parent 3916d67 commit bbea40c
Showing 1 changed file with 114 additions and 93 deletions.
207 changes: 114 additions & 93 deletions client/src/apps/_common/components/EventDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,57 +27,38 @@ const EventDetails = (props) => {
const { event, groups, contextSteps, setContextSteps, client, pathName, hex_color, closeEventDetails } = props;

const [ steps, setSteps ] = useState([]);
const [ reRenderMnky, setReRenderMnky ] = useState(true);

const gqlRefetchQueries = pathName === 'todo' ? [ 'readAllGroups' ] : [ 'readGroupsOnCalendar' ];

// useEffect(
// () => {
// // readAndSaveStepsData();
// if (steps.length > 0) {
// setContextSteps([ ...contextSteps.filter(({ _event }) => _event !== event._id), ...steps ]);
// }
// },
// [ steps ]
// );

useEffect(
() => {
// readAndSaveStepsData();
if (steps.length > 0) {
setContextSteps([ ...contextSteps.filter(({ _event }) => _event !== event._id), ...steps ]);
}
client
.query({
query: FETCH_STEPS_BY_EVENT,
variables: { eventId: event._id }
})
.then(({ data }) => {
console.log(data.readStepsByEvent);

setSteps(data.readStepsByEvent);
});

return () => setSteps([]);
},
[ steps ]
[ event ]
);

// Handle Event Delete
const handleEventDelete = async () => {
await client.mutate({
mutation: DELETE_EVENT,
variables: { eventId: event._id },
refetchQueries: gqlRefetchQueries
});
};

// Handle Event Edit
const handleEventEdit = async ({ title, description, _group }) => {
await client.mutate({
mutation: EDIT_EVENT_BY_ID,
variables: { eventId: event._id, title, description, _group },
refetchQueries: gqlRefetchQueries,
awaitRefetchQueries: true
});
};

// Handle Event Dates Edit
const handleEventDateEdit = async ({ date_from, date_to }) => {
await client.mutate({
mutation: EDIT_EVENT_DATES,
variables: { eventId: event._id, date_from, date_to },
refetchQueries: gqlRefetchQueries,
awaitRefetchQueries: true
});
};

// Handle Event Done / Undone
const eventDoneHandeler = async (eventId, boolean) => {
await client.mutate({
mutation: boolean ? EDIT_EVENT_TO_DONE : EDIT_EVENT_TO_NOT_DONE,
variables: { eventId },
refetchQueries: gqlRefetchQueries
});
};

// Handle New Step Submit
const onStepSubmit = (title) => {
client
Expand Down Expand Up @@ -117,7 +98,7 @@ const EventDetails = (props) => {
});
};

const onDragEnd = async (result) => {
const onDragEnd = (result) => {
if (result.source.index === result.destination.index) return;

const tempSteps = [ ...steps ];
Expand All @@ -130,19 +111,77 @@ const EventDetails = (props) => {
? tempSteps.slice(fromIndex + 1, toIndex + 1).map(({ _id }) => _id)
: tempSteps.slice(toIndex, fromIndex).map(({ _id }) => _id);

client
.mutate({
mutation: REARRANGE_STEPS,
variables: {
focusedStep: result.draggableId,
fromRank: tempSteps[fromIndex]._rank,
toRank: tempSteps[toIndex]._rank,
movedSteps: movedSteps
},
refetchQueries: [ 'readStepsByEvent' ],
awaitRefetchQueries: true
})
.then(() => {});

const focusedStep = tempSteps.splice(fromIndex, 1)[0];
tempSteps.splice(toIndex, 0, focusedStep);

// console.log('tempSteps', tempSteps);

console.log('LOL');
setReRenderMnky(false);
setSteps(tempSteps);
};

useEffect(
() => {
// FIXME: couldn't fix the bug but feigured a way out (something is wrong, file a issue maybe)
window.getSteps = () => steps;
setReRenderMnky(true);
},
[ steps ]
);

// Handle Event Delete
const handleEventDelete = async () => {
await client.mutate({
mutation: DELETE_EVENT,
variables: { eventId: event._id },
refetchQueries: gqlRefetchQueries
});
};

// Handle Event Edit
const handleEventEdit = async ({ title, description, _group }) => {
await client.mutate({
mutation: REARRANGE_STEPS,
variables: {
focusedStep: result.draggableId,
fromRank: tempSteps[fromIndex]._rank,
toRank: tempSteps[toIndex]._rank,
movedSteps: movedSteps
},
refetchQueries: [ 'readStepsByEvent' ],
mutation: EDIT_EVENT_BY_ID,
variables: { eventId: event._id, title, description, _group },
refetchQueries: gqlRefetchQueries,
awaitRefetchQueries: true
});
};

// Handle Event Dates Edit
const handleEventDateEdit = async ({ date_from, date_to }) => {
await client.mutate({
mutation: EDIT_EVENT_DATES,
variables: { eventId: event._id, date_from, date_to },
refetchQueries: gqlRefetchQueries,
awaitRefetchQueries: true
});
};

// Handle Event Done / Undone
const eventDoneHandeler = async (eventId, boolean) => {
await client.mutate({
mutation: boolean ? EDIT_EVENT_TO_DONE : EDIT_EVENT_TO_NOT_DONE,
variables: { eventId },
refetchQueries: gqlRefetchQueries
});
};

return (
<div className="EventDetails-c-00">
<EventDetailsHeader
Expand All @@ -154,47 +193,29 @@ const EventDetails = (props) => {
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={event._id} type="STEP_DND">
{(provided) => (
<Query query={FETCH_STEPS_BY_EVENT} variables={{ eventId: event._id }}>
{({ loading, error, data, refetch }) => {
if (error) {
return console.log('Error', error);
}

if (data.readStepsByEvent) {
console.log('data.readStepsByEvent');
setSteps(data.readStepsByEvent);
}

return (
<div
className="EventDetails-The-List-01"
ref={provided.innerRef}
{...provided.droppableProps}
>
{data.readStepsByEvent &&
data.readStepsByEvent.map((eachStep, i) => {
if (i === 0) console.log('XXX');
console.log(i, eachStep.title);

// FIXME: A Bug Exist Here!
// "contextSteps" isn't getting rerendered after Drag&Drop ends

return (
<EventDetailsItem
key={i}
index={i}
step={eachStep}
hex_color={hex_color}
handleStepEdit={handleStepEdit}
handleStepDelete={handleStepDelete}
stepDoneHandeler={stepDoneHandeler}
/>
);
})}
</div>
);
}}
</Query>
<div className="EventDetails-The-List-01" ref={provided.innerRef} {...provided.droppableProps}>
{reRenderMnky &&
steps.map((step, i) => {
// if (i === 0) console.log('XXX');
// console.log(i, step.title);
// console.log(steps);

// FIXME: A Bug Exist Here!
// "contextSteps" isn't getting rerendered after Drag&Drop ends

return (
<EventDetailsItem
key={i}
index={i}
step={step}
hex_color={hex_color}
handleStepEdit={handleStepEdit}
handleStepDelete={handleStepDelete}
stepDoneHandeler={stepDoneHandeler}
/>
);
})}
</div>
)}
</Droppable>
</DragDropContext>
Expand Down

0 comments on commit bbea40c

Please sign in to comment.