aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/center/CenterBoards.tsx
blob: f5200415a5014ba58859a70d300f48c956c6923a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React from "react";
import { Row, Col } from "react-bootstrap";
import { useTranslation } from "react-i18next";

import { pushAlert } from "@/services/alert";
import { useUserLoggedIn } from "@/services/user";

import { getHttpTimelineClient } from "@/http/timeline";
import { getHttpBookmarkClient } from "@/http/bookmark";
import { getHttpHighlightClient } from "@/http/highlight";

import TimelineBoard from "./TimelineBoard";

const CenterBoards: React.FC = () => {
  const { t } = useTranslation();

  const user = useUserLoggedIn();

  return (
    <>
      <Row className="justify-content-center">
        <Col xs="12" md="6">
          <Row>
            <Col xs="12" className="my-2">
              <TimelineBoard
                title={t("home.bookmarkTimeline")}
                load={() => getHttpBookmarkClient().list()}
                editHandler={{
                  onDelete: (timeline) => {
                    return getHttpBookmarkClient()
                      .delete(timeline)
                      .catch((e) => {
                        pushAlert({
                          message: "home.message.deleteBookmarkFail",
                          type: "danger",
                        });
                        throw e;
                      });
                  },
                  onMove: (timeline, index, offset) => {
                    return getHttpBookmarkClient()
                      .move(
                        { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1
                      )
                      .catch((e) => {
                        pushAlert({
                          message: "home.message.moveBookmarkFail",
                          type: "danger",
                        });
                        throw e;
                      });
                  },
                }}
              />
            </Col>
            <Col xs="12" className="my-2">
              <TimelineBoard
                title={t("home.highlightTimeline")}
                load={() => getHttpHighlightClient().list()}
                editHandler={
                  user.hasHighlightTimelineAdministrationPermission
                    ? {
                        onDelete: (timeline) => {
                          return getHttpHighlightClient()
                            .delete(timeline)
                            .catch((e) => {
                              pushAlert({
                                message: "home.message.deleteHighlightFail",
                                type: "danger",
                              });
                              throw e;
                            });
                        },
                        onMove: (timeline, index, offset) => {
                          return getHttpHighlightClient()
                            .move(
                              { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1
                            )
                            .catch((e) => {
                              pushAlert({
                                message: "home.message.moveHighlightFail",
                                type: "danger",
                              });
                              throw e;
                            });
                        },
                      }
                    : undefined
                }
              />
            </Col>
          </Row>
        </Col>
        <Col xs="12" md="6" className="my-2">
          <TimelineBoard
            title={t("home.relatedTimeline")}
            load={() =>
              getHttpTimelineClient().listTimeline({ relate: user.username })
            }
          />
        </Col>
      </Row>
    </>
  );
};

export default CenterBoards;