Calendar

package.json

@@ -9,14 +9,17 @@
     "@types/node": "^12.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/react": "^16.9.53",
+    "@types/react-calendar-timeline": "^0.26.3",
     "@types/react-dom": "^16.9.8",
     "axios": "^0.21.1",
     "bootstrap": "^4.5.3",
     "d3-timeline": "^1.0.1",
     "d3-timeline-chart": "^1.3.0",
     "htmr": "^0.9.2",
+    "interactjs": "^1.10.2",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
+    "react-calendar-timeline": "^0.27.0",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.9",
     "react-horizontal-timeline": "^1.5.3",

src/components/Calendar/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Timeline from "react-calendar-timeline";
+import "react-calendar-timeline/lib/Timeline.css";
+import "../../index.css";
+import moment from "moment";
+import Back from "../Back";
+
+import { CalendarItem, CalendarGroup, ProposalDetail } from "../../types";
+
+const Calendar = (props: {
+  proposals: ProposalDetail[];
+  now: number;
+  block: number;
+}) => {
+  const { block, now, proposals } = props;
+
+  const startTime = now - block * 6000;
+  let groups: CalendarGroup[] = [{ id: 1, title: "RuntimeUpgrade" }];
+  let items: CalendarItem[] = [];
+
+  const selectGroup = (title: string) => {
+    const exists = groups.find((g) => g.title === title);
+    if (exists) return exists.id;
+    const group = { id: groups.length + 1, title };
+    groups.push(group);
+    return group.id;
+  };
+
+  proposals.map(
+    (p) =>
+      p &&
+      items.push({
+        id: p.id,
+        group: selectGroup(p.type),
+        start_time: moment(startTime + p.createdAt * 6000).valueOf(),
+        end_time: p.finalizedAt
+          ? moment(startTime + p.finalizedAt * 6000).valueOf()
+          : moment().valueOf(),
+        title: p.title,
+      })
+  );
+
+  const first = items.sort((a, b) => a.end_time - b.end_time)[0];
+
+  return (
+    <div>
+      <Timeline
+        groups={groups}
+        items={items}
+        defaultTimeStart={moment(first.start_time).add(-1, "day")}
+        defaultTimeEnd={moment().add(15, "day")}
+      />
+      <Back />
+    </div>
+  );
+};
+
+export default Calendar;

src/components/Dashboard/index.tsx

@@ -7,18 +7,6 @@ import moment from "moment";
 
 const Dashboard = (props: IState) => {
   const { block, now, domain, handles, members, proposals, tokenomics } = props;
-  const start = now - block * 6000;
-
-  let times = [];
-  proposals.map(
-    (p) =>
-      p &&
-      times.push({
-        starting_time: moment(start + p.createdAt * 6000).valueOf(),
-        display: "circle",
-      })
-  );
-
   return (
     <div className="w-100 flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
       <div className="box position-abasolute" style={{ top: "0", right: "0" }}>

src/components/Routes/index.tsx

@@ -1,5 +1,6 @@
 import { Switch, Route } from "react-router-dom";
 import {
+  Calendar,
   Councils,
   Dashboard,
   Forum,
@@ -38,6 +39,7 @@ const Routes = (props: IState) => {
         render={(routeprops) => <Member {...routeprops} {...props} />}
       />
       <Route path="/members" render={() => <Members {...props} />} />
+      <Route path="/calendar" render={() => <Calendar {...props} />} />
       <Route path="/timeline" render={() => <Timeline {...props} />} />
       <Route path="/" render={() => <Dashboard {...props} />} />
     </Switch>

src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as Back } from "./Back";
+export { default as Calendar } from "./Calendar";
 export { default as Routes } from "./Routes";
 export { default as Council } from "./Council";
 export { default as Councils } from "./Councils";

src/index.css

@@ -75,6 +75,16 @@ table td {
   min-width: 75px;
 }
 
+
+/* calendar */
+
+.rct-sidebar-row {
+    color: #fff;
+}
+
+
+/* timeline */
+
 .member-tooltip .tooltip-inner div {
     width: 350px !important;
 }

src/types.ts

@@ -247,3 +247,16 @@ export interface Event {
     text: string;
   };
 }
+
+export interface CalendarItem {
+  id: number;
+  group: number;
+  title: string;
+  start_time: number;
+  end_time: number;
+}
+
+export interface CalendarGroup {
+  id: number;
+  title: string;
+}