I need to display a list of boxes with maximize, minimize and close button to the bottom right of the screen. The cards should be displayed from bottom right to left. The issue that I am having is cards are getting added from bottom left to right. Say on subsequent clicks of button 1, button 2, button 3 the cards should be in the card3, card2, card1 from bottom because button is clicked first. Here it is happening the other way.

Also I am unable to implement maxmize and minimize function. Cancel operation is working fine.

https://codesandbox.io/s/panel-item-addtion-using-redux-updated-hxmihq?file=/src/components/PanelAdder.jsx

App.tsx

import React from "react";
import { useSelector } from "react-redux";
import Header from "./src/components/Header";
import Footer from "./src/components/Footer";
import Content from "./src/components/Content";
import Panel from "./src/components/Panel";
import "./styles.css";

export default function App() {
  const panels = useSelector((state) => state.panel.panelItems);
  return (
    <>
      <Header />
      <Content />
      <Footer />
      <div className="cards-container">
        {panels.map((name) => (
          <Panel key={name} {...{ name }} />
        ))}
      </div>
    </>
  );
}

PanelAdder

import React from "react";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { addPanel } from "../actions/counterActions";

export default function PanelAdder() {
  const dispatch = useDispatch();
  const panels = useSelector((state) => state.panel.panelItems);

  const handleClick = (name) => {
    if (panels.includes(name)) return;
    dispatch(addPanel(name));
  };

  return (
    <>
      <button onClick={() => handleClick("Panel 1")}> Add Panel 1</button>
      <button onClick={() => handleClick("Panel 2")}> Add Panel 2</button>
      <button onClick={() => handleClick("Panel 3")}> Add Panel 3</button>
    </>
  );
}

Panel

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSquareMinus,
  faWindowMaximize,
  faRectangleXmark
} from "@fortawesome/free-solid-svg-icons";
import { useDispatch } from "react-redux";
import { deletePanel } from "../actions/counterActions";

export default function Panel({ name }) {
  const dispatch = useDispatch();
  return (
    <>
      <div className="card">
        <div className="card-actions">
          <FontAwesomeIcon icon={faSquareMinus} />
          <FontAwesomeIcon icon={faWindowMaximize} />
          <FontAwesomeIcon
            icon={faRectangleXmark}
            onClick={() => dispatch(deletePanel(name))}
          />
        </div>
        <div className="card-body">{name}</div>
      </div>
    </>
  );
}

CodePudding user response：

case "ADD_PANEL":
  return {
    ...state,
    panelItems: [action.payload, ...state.panelItems]
  };

Just make the following changes to your reducer and you'll be able to achieve the desired card display. Instead of adding the new panel to the end of the array, you add it to the start.

CodePudding user response：

There is several way to do it.

A first one could be to add the new panel as first element instead of the last one in your reducer as Zarish Iqbal did it.

A second one would be to keep the list as is, and to play with the flexbox properties of your .cards-container. By using flex-direction: row-reverse; and justify-content: flex-start;, the items will be displayed in the order you want.

flex-direction: row-reverse; make the content go from right to left, and justify-content: flex-start; align the content at the start, so on the right.

More information about flex-direction

CodePudding user response：

.cards-container {
      display: flex;
      /* making element one near the other */
      height: 100vh;
      /* setting the height of div to device_height (so we can put them in the end of the page) */
      align-items: flex-end;
      /* aligning the cards to the end of the page */
      justify-content: flex-start;
      /* aligning the cards to the end of the page */
      padding: 1rem;
      /* adding some padding to the end of the page */
      gap: 1rem;
      /* adding some gap between the cards */
    }

You just had to put justify-content: flex-start here.

Edit

Here is how you can max and min the card window.

https://codesandbox.io/embed/panel-item-addtion-using-redux-updated-forked-n5suqd?fontsize=14&hidenavigation=1&theme=dark

Just use useState to toggle between the two classes. First, set the initial class to be the one you see when you click on the addPanel button. Then, you add an onClick to the min and max buttons. The min button changes the style of the card to the new style, and the max button sets the style of the card back to the original one.