Function MatrixView

apps/web/ui/MatrixView/index.tsx:16–157

({
  currentCommunity,
  api,
}: {
  currentCommunity: SerializedAccount;
  api: ApiClient;
})

import ConfirmationModal from '@/ConfirmationModal';

export default function MatrixView({
  currentCommunity,
  api,
}: {
  currentCommunity: SerializedAccount;
  api: ApiClient;
}) {
  const [modal, setModal] = useState(false);
  const [{ value: keys }, callback] = useAsyncFn(() =>
    api.getIntegrationMatrix({ accountId: currentCommunity.id })
  );

  useEffect(() => {
    callback();
  }, []);

  return (
    <div className={styles.container}>
      <StickyHeader className={styles.header}>
        <div className={styles.title}>Matrix integration</div>
      </StickyHeader>

      <div className={styles.content}>
        {!keys ? (
          <div className={styles.italic}>Loading...</div>
        ) : keys?.length ? (
          <table className={styles.table}>
            <tr className={styles.tr}>
              <th>Server</th>
              <th>Enabled</th>
              <th>Created</th>
              <th>Updated</th>
              <th></th>
            </tr>
            <tbody className={styles.tbody}>
              {keys.map((k) => {
                return (
                  <tr key={k.id}>
                    <td>{k.matrixUrl}</td>
                    <td>
                      <div className={styles.toggle}>
                        <Toggle
                          checked={k.enabled}
                          onChange={async (val) => {
                            try {
                              await api.updateIntegrationMatrix({
                                accountId: currentCommunity.id,
                                enabled: val,
                                id: k.id,
                              });
                              await callback();
                            } catch (error) {
                              handleError(error);
                            }
                          }}
                        />
                      </div>
                    </td>