# sprint 3

## Tavoite
1) siirtää projekti uuteen react projektiin ilman next.js
2) drag and drop - https://react-dnd.github.io/react-dnd/docs/overview

## Tehdyt asiat
https://gitlab.com/BlankCourse/laiva
-> uusi repository, poistin vanhan ja nimesin samaksi uuden
-> Next.js poistettu
-> Ship.js draggable asiat poistettu
-> testasin lisätä sinisiä kuutioita td sisään
-> DnD osittainen toiminta, komponenttia "Laiva" voi raahata, mutta DnD käyttämät funktiot menevät hieman yli ajattelun vielä.

-> backendin pyynnöstä projekti siirsin kokonaan puhtaaseen reactiin ilman next.js
-> muokkasin field komponenttia, että se näkyy Leevin käyttämässä react kehitys sovelluksessa
--> muokkaukset piti poistaa, koska hookit eivät hyväksy classejä
---> muokkasin laivaa, pelikenttää, että niistä tulisi DnD sopivat (hook sopivat)


## ongelmat:
Your render method should have a return statement react/require-render-return
-> liittyy JSX toimintaan
-->
render{
return(
-> jsx
)}

-> DnD oli oletettua haasteellisempi ymmärtää.
--> yrittänyt katsoa esimerkkejä ja lukea, mutta näyttää merkkioksennukselta.

-> useDrag DnDssä on hook:
--> Hooks don't work inside classes
---> Ship.js komponentti on class - muunnetaan?

-> Komponenteissa Field,js ja Laiva.js on jo olemassa alusta DnDlle, mutta en saa päätä DnD funktioiden ympärille millä tehdään yhdistys. https://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor

-> leevi ei osallistunut sprint 3.

-> mietitty ratkaisu:
1) getDropResult() avulla id tiilestä/solusta minkä päälle laitettiin laiva
2) Jos ymmärsin oikein, niin käytä state asettamaan laiva siihen kohtaan ID mukaan
3) valmis.

## Aika

## Muistiinpanot
https://www.youtube.com/watch?v=NW8erkUgqus
Playing around with react-dnd

Item type
-> limits items that can be dropped on specific location
-> dragged prop can be accessed from the drop location

-> monitor: 9.00

-> collectors: 9.30
--> function to turn DnD events coming from monitor into react props 'collecting' props

-> drag sources: 10
--> draggable components
--> carry information as component prop and can be passed on

-> drop targets: 10.15
--> accept certain types of draggable sources

https://www.youtube.com/watch?v=aYZRRyukuIw

https://react-dnd.github.io/react-dnd/about

https://react-dnd.github.io/react-dnd/docs/overview
Some of these concepts resemble the Flux and Redux architectures.
This is not a coincidence, as React DnD uses Redux internally.

When you drag something across the screen, we don't say that a component, or a DOM node is being dragged. Instead, we say that an item of a certain type is being dragged.

What is an item? An item is a plain JavaScript object describing what's being dragged.

The types let you specify which drag sources and drop targets are compatible
-> laiva drag source, board drop target

Monitors
Drag and drop is inherently stateful. Either a drag operation is in progress, or it isn't. Either there is a current type and a current item, or there isn't. This state has to live somewhere.

The monitors let you update the props of your components in response to the drag and drop state changes.

Connectors
The connectors let you assign one of the predefined roles (a drag source, a drag preview, or a drop target) to the DOM nodes in your render function.

In the component's render method, we are then able to access both the data obtained from the monitor, and the function obtained from the connector

Drag sources and drop targest
They really tie the types, the items, the side effects, and the collecting functions together with your components.

Whenever you want to make a component or some part of it draggable, you need to wrap that component into a drag source declaration. Every drag source is registered for a certain type, and has to implement a method producing an item from the component's props.

The drop targets are very similar to the drag sources. The only difference is that a single drop target may register for several item types at once, and instead of producing an item, it may handle its hover or drop.

high-order components
A higher-order component is a function that takes a React component class, and returns another React component class. The wrapping component provided by the library renders your component in its render method and forwards the props to it, but also adds some useful behavior.

In React DnD, DragSource and DropTarget, as well as a few other top-level exported functions, are in fact higher-order components.

https://www.youtube.com/watch?v=exZjmIGhTpw

https://codesandbox.io/search?refinementList%5Btemplate%5D=&refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=react-dnd&page=7&configure%5BhitsPerPage%5D=12
-> esimerkkejä

### dnd install: https://react-dnd.github.io/react-dnd/docs/faq
npm install --save react-dnd
npm install --save react-dnd-html5-backend

-> react-dnd-html5-backend - provides monitors

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/combining.md

react-beautiful-dnd requires no additional wrapping elements to create <Draggable /> and <Droppable /> components. Therefore it is possible to have a <table> that has valid HTML as well as supporting drag and drop.