caribbean-reservation-react/src/App.js

Basically a modular grid which allows you to place tags over it. Created in order to manage reservations for a hotel in the caribbean

import React, { useEffect, useState, useRef } from 'react';
import CaribbeanReservation, { Bar, actionTypes, useReserver, reserverReducer, getPosition, evaluatePosition, createBar, resizeBar } from './CaribbeanReservation'
import { bars as testBars } from './testData'
import moment from 'moment';
import './App.css';



function App() {
  const [headRow, setHeadRow] = useState([123, 1, 2, null, null, 123]);
  const [content, setContent] = useState({
    "r0c0": <span style={{ background: "green", width: "20px", height: "20px", display: "block" }}></span>, "r2c1": <span style={{ fontSize: "10px" }}>150</span>
  });

  const [titles, setTitles] = useState(["Golf Cart 1", null, "Golf Cart 2",]);
  const [resWidth, setResWidth] = useState(600);

  const { addBar, editBar, doneEditing, deleteBar, bars } = useReserver(rReducer, testBars);

  const [widthtitle, setWidthtitle] = useState(80)

  const [height, setHeight] = useState(500)
  const [dimension, setDimension] = useState(25);

  const gDate = useRef(new Date());


  function changeHead() {
    var newHead = [...headRow];
    newHead[0] = <div>James</div>;

    setHeadRow(newHead);
  }


  /*
    function evaluatePosition(editingRes, column) {
      editingRes.length = Math.abs(column - editingRes.column + 1);
  
      if (editingRes.column > column) {
        editingRes.column = column;
      }
  
    }
  */



  function rReducer(state, action) {

    return reserverReducer(state, action)



  }

  function moveBar(newLocation) {

    let editing = bars.filter((bar) => {
      return bar.editing;
    })
    editing.forEach((bar) => {
      console.log("move", newLocation)
      let n = { ...bar, ...newLocation, editing: false };
      console.log("n", n)
      editBar(n)
    })

  }


  return (
    <div id="main-app" className="App">
      <button onClick={() => { setDimension(dimension + 1) }} >+</button>
      <button onClick={() => { setDimension(dimension - 1) }} >-</button>
      <CaribbeanReservation
        style={{ display: "inline-block" }}
        rowTitles={() => {
        return titles.map((c, i) => {
          if (c === null) {
            return null;
          }
          return <button onClick={() => {
            let ntitles = [...titles];
            ntitles.push("asd")
            setTitles(ntitles)
          }} style={{ background: "orange" }}>{i + 1}{c}</button>

        })
      }}
        rowTitleWidth={widthtitle}
        headRow={(columnCount) => {
        
        var z = [];
        var x = new Date();



        for (var i = 0; i < 10; i++) {
          var y = x.getDate();
          z.push(y);
          x.setDate(y + 1)

        }

        return z;

        return headRow.map((r) => {
          return <div onClick={() => { setWidthtitle(widthtitle + 10) }}>{r}</div>

        })
      }}
        mouseLeaveGrid={() => { doneEditing() }}
        mouseUpCell={(props) => {


        let tcontent = { ...content }
        tcontent[`r${props.cell.row}c${props.cell.column}`] = <div style={{ background: "purple" }}>test</div>;
        setContent(tcontent)

        doneEditing()
      }}
        mouseEnterCell={(props) => { resizeBar(editBar, bars, props) }}
        mouseDownCell={(props) => {

          console.log(gDate.current.getUTCDate());
          console.log(props)

        let newbar = createBar(props.dimension, props.cell);
        addBar(newbar)
      }
      }
        mouseCellDrop={(props) => { moveBar(props.cell) }}
        width={document.documentElement.clientWidth}
        height={height}
        content={content}
        dimension={dimension}
      >
      {({ rowCount, rowTitleWidth, dimension }) => {

        return bars.map((bar) => {

          return (rowCount > bar.row) && <Bar key={bar.id}
            dimension={dimension}
            onDragStart={() => { editBar({ ...bar, editing: true }) }}
            onClick={() => { console.log("delete", bar); deleteBar({ id: bar.id }) }}

            onMouseOver={() => { }}
            {...bar} {...getPosition(rowTitleWidth, bar.row, bar.column, dimension)} >
            <span style={{ position: "absolute" }}>{bar.children}</span>
          </Bar>
        })

      }}

      </CaribbeanReservation>



    </div >
  );
}

export default App;