Array sequence (string) returns the next visible button - React

Question

LINK CODE :DEMO

Through Drag and Drop I assemble a sequence that is const correctSequence = ["task-5", "task-3", "task-2", "task-1", "task-4"]; My current button is disabled when the sequence is right it changes to enabled

Answer 1

You just missing to set enable and disable action when its correct

 useEffect(() => {
    console.log(state.columns["column-2"].taskIds, correctSequence);

    if(JSON.stringify(state.columns["column-2"].taskIds) === JSON.stringify(correctSequence)){
      setDisabled(false);
    }else {
      setDisabled(true);
    }
  }, [state]);

This code will check if order column is equal your correct sequence or not, if its not correct then disable else enable it

final code:

import React, { useEffect, useState } from "react";
import { DragDropContext } from "react-beautiful-dnd";
import Column from "./Column";
import { Typography, Button } from "@material-ui/core";
import { initialData } from "./initial-data";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";

// ESTYLES MATERIAL UI
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    overflow: "hidden",
    backgroundColor: "#EBE9E9"
  },
  box: {
    border: "2px solid #EBE9E9",
    height: "auto",
    marginBottom: "36px",
    backgroundColor: "#EBE9E9"
  },
  paper: {
    maxWidth: 560,
    margin: `${theme.spacing(1)}px auto`,
    backgroundColor: "#EBE9E9",
    boxShadow: ["none"]
  },
  button: {
    color: "#000000",
    backgroundColor: "#ffdd03",
    borderRadius: "30px",
    fontWeight: 500,
    fontFamily: "Rubik",
    fontSize: "15px",
    marginTop: "10px",
    boxShadow:
      "0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)",
    "&:hover": {
      backgroundColor: "#ffff54"
    },
    "&:active": {
      backgroundColor: "#ffff54",
      boxShadow: "none"
    }
  },
  disabled: {}
}));

const App = (props) => {
  const [state, setState] = useState(initialData);
  const classes = useStyles();

  // buttond disabled
  const [disabled, setDisabled] = useState(true);

  // sequence correct
  const correctSequence = ["task-5", "task-3", "task-2", "task-1", "task-4"];

  const onDragEnd = (result) => {
    const { destination, source, draggableId } = result;

    if (!destination) {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    const start = state.columns[source.droppableId];
    const finish = state.columns[destination.droppableId];

    if (start === finish) {
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1);
      newTaskIds.splice(destination.index, 0, draggableId);

      const newColumn = {
        ...start,
        taskIds: newTaskIds
      };

      const newState = {
        ...state,
        columns: {
          ...state.columns,
          [newColumn.id]: newColumn
        }
      };

      setState(newState);
      return;
    }

    // Moving from one list to another
    const startTaskIds = Array.from(start.taskIds);
    startTaskIds.splice(source.index, 1);
    const newStart = {
      ...start,
      taskIds: startTaskIds
    };

    const finishTaskIds = Array.from(finish.taskIds);
    finishTaskIds.splice(destination.index, 0, draggableId);
    const newFinish = {
      ...finish,
      taskIds: finishTaskIds
    };

    const newState = {
      ...state,
      columns: {
        ...state.columns,
        [newStart.id]: newStart,
        [newFinish.id]: newFinish
      }
    };
    setState(newState);
  };

  useEffect(() => {
    console.log(state.columns["column-2"].taskIds, correctSequence);

    if(JSON.stringify(state.columns["column-2"].taskIds) === JSON.stringify(correctSequence)){
      setDisabled(false);
    }else {
      setDisabled(true);
    }
  }, [state]);

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <DragDropContext onDragEnd={onDragEnd}>
          <div title="EDUCAÇÃO BÁSICA">
            {state.columnOrder.map((columnId) => {
              const column = state.columns[columnId];
              const tasks = column.taskIds.map((taskId) => state.tasks[taskId]);
              return <Column key={column.id} column={column} tasks={tasks} />;
            })}
          </div>
        </DragDropContext>
        <Typography align="center">
          <Button
            variant="contained"
            disabled={disabled}
            className={classes.button}
          >
            Next
          </Button>
        </Typography>
      </Paper>
    </div>
  );
};

export default App;