import React, { Component } from "react";
import styled from "styled-components";

import { Row, RowContent, ColumnContainer } from "../SharedComponents.js";

import Loading from "../loading.js";

import List from "./List.js";
import CreateList from "./CreateList.js";
import Notes from "./Notes.js";

class ListsView extends Component {
  render() {
    const { user, lists, loading } = this.props;

    if (loading) {
      return <Loading />;
    }

    return (
      <ColumnContainer>
        <Row>
          <RowContent>
            Du är: {user.nick}
          </RowContent>
        </Row>

        <ListsContainer>
          {lists.map(list => <List key={list.id} list={list} user={user} />)}
          <Notes />
          {user.isAdmin && <CreateList />}
        </ListsContainer>
      </ColumnContainer>
    );
  }
}

const ListsContainer = styled(Row)`
  padding-top: 2em;
`;

export default ListsView;

import React, { Component } from "react";
import styled from "styled-components";

import { Row, RowContent, ColumnContainer } from "../SharedComponents.js";

import Loading from "../loading.js";

import List from "./List.js";
import CreateList from "./CreateList.js";
import Notes from "./Notes.js";

class ListsView extends Component {
  render() {
    const { user, lists, loading } = this.props;

    if (loading) {
      return <Loading />;
    }

    return (
      <ColumnContainer>
        <Row>
          <RowContent>
            Du är: {user.nick}
          </RowContent>
        </Row>

        <MainContainer>
          <ListContainer width={(lists.length - 2) * 20}>
            {lists.map(list => <List key={list.id} list={list} user={user} />)}
          </ListContainer>
          {user.isAdmin && <CreateList />}
          <Notes />
        </MainContainer>
      </ColumnContainer>
    );
  }
}

const ListContainer = Row.extend`
  margin-left: -${props => props.width}em;
`;

const MainContainer = styled(Row)`
  padding-top: 2em;
`;

export default ListsView;

Move lists to the left
Move lists to the left
