player-creator.re

open FetchingScreen;
open Belt;

type action =
  | UpdateTracks(list(track))
  | InitPlaylist;

type playlist = {
  name: string,
  description: string,
  public: bool,
};

let initialedPlaylist = {name: "", description: "", public: false};

type state = {
  tracks: list(track),
  playlists: list(playlist),
};

let initialState = () => {tracks: [], playlists: []};

let reducer = (action, state) =>
  switch (action) {
  | UpdateTracks(tracks) => ReasonReact.Update({...state, tracks})
  | InitPlaylist =>
    ReasonReact.Update({
      ...state,
      playlists: List.add(state.playlists, initialedPlaylist),
    })
  | _ => ReasonReact.NoUpdate
  };

let component = ReasonReact.reducerComponent("PlaylistCreator");

module Styles = {
  /*Open the Css module, so we can access the style properties below without prefixing them with Css.*/
  open Css;
  let wrap = style([margin2(rem(1.0), rem(1.0))]);
  let titleWrap =
    style([
      display(`flex),
      height(px(48)),
      width(pct(100.0)),
      justifyContent(`spaceAround),
      alignItems(`center),
    ]);
};
let make = _children => {
  ...component,
  reducer,
  initialState,
  didMount: self => {
    open LocalStorage;

    let tracks =
      switch (Dom.Storage.(localStorage |> getItem(storeTracks))) {
      | None => []
      | Some(tracks) => unsafeJsonParse(tracks)
      };
    Js.log(tracks);
    self.send(UpdateTracks(tracks));
  },
  render: self => {
    let {playlists} = self.state;
    let playlistsItems = Belt.List.map(playlists, p => <Playlist name={p.name} />)

    <div className=Styles.wrap>
      <div className=Styles.titleWrap>
        <Text marginB=0.0 marginT=0.0>
          {ReasonReact.string("Dodaj Playliste")}
        </Text
        <Button
          buttonType=Round
          onClick={_e => self.send(InitPlaylist)}
          icon=Plus
        />
      </div>
      {ReasonReact.array([|playlistsItems|])}
    </div>;
  },
};