import React from 'react';
import * as Store from './dashboards-store';
import { observer } from 'mobx-react-lite';

export type Props = { store: Store.IList };

export const DashboardsList = observer((props: Props): JSX.Element => {
  if (!props.store.loaded) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {props.store.list.map((item) => {
        return (
          <li key={item.id}>
            <a href={`/dashboard/${item.id}`}>{item.title}</a>
          </li>
        );
      })}
    </ul>
  );
});