index.tsx

import React, {useEffect, useState} from "react";
import { observer } from "mobx-react";
import {Button, Space, Spin} from 'antd';
import {Link, useNavigate} from "react-router-dom";
import ConnectionListStore from './ConnectionListStore';
import config from "@dashboard/routes/config";
import ConnectionItem from "@dashboard/components/ConnectionItem";
import modalStore from "@dashboard/store/modalStore";
import NoRecordsMessage from "@dashboard/components/NoRecordsMessage";

const ConnectionListPage = observer(() => {
  const [store] = useState(() => new ConnectionListStore());

  const navigate = useNavigate();

  useEffect(() => {
    store.getAll();
  }, []);

  return (
    <div>
      <h2>
        Actions
      </h2>
      <Space>
        <Link to={config.connection_create.getLink()}>
          <Button
            type="primary"
          >
            Create new invitation
          </Button>
        </Link>
        <Button onClick={() => {
          modalStore.openReceiveInvitationDialog({
            onInvitationReceived: (connRecord) => {
              navigate(config.connection_view.getLink(connRecord.id));
            }
          });
        }}>
          Accept invitation
        </Button>
      </Space>
      <h2>Connection List</h2>
      <div>
        {store.list.map(p => (
          <ConnectionItem
            key={p.id}
            item={p}
            onClick={() => navigate(config.connection_view.getLink(p.id))}
          />
        ))}
        {!store.loading && store.list.length === 0 && (
          <NoRecordsMessage />
        )}
        {store.loading && (
          <Spin />
        )}
      </div>
    </div>
  );
});

export default ConnectionListPage;