Feature Wikis

package.json

@@ -35,8 +35,10 @@
     "react-ga": "^3.1.2",
     "react-icons": "^3.10.0",
     "react-images": "^1.1.7",
+    "react-loading-overlay": "^1.0.1",
     "react-lottie": "^1.2.3",
-    "react-markdown-editor-lite": "^1.1.4",
+    "react-markdown": "^4.3.1",
+    "react-mde": "^10.2.1",
     "react-moment": "^0.9.7",
     "react-redux": "^7.2.0",
     "react-responsive": "^8.0.3",

src/actions/types.js

@@ -53,5 +53,6 @@ export const GET_DEVICE_ANALYTICS ="GET_DEVICE_ANALYTICS"
 export const GET_MOSTVIEWED_ANALYTICS ="GET_MOSTVIEWED_ANALYTICS"
 export const GET_PROPOSALVIEW_ANALYTICS="GET_PROPOSALVIEW_ANALYTICS"
 export const ACTIVATE_DEACTIVATE_ACCOUNT_TOGGLER = "ACTIVATE_DEACTIVATE_ACCOUNT_TOGGLER";
+export const GET_WIKIS = "GET_WIKIS";
 export const CLEAR_INVITE_LINK = "CLEAR_INVITE_LINK";
 export const GET_LOGIN_OPTIONS = "GET_LOGIN_OPTIONS";

src/actions/wikisAction.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { GET_WIKIS } from "./types";
+import { BASE_URL } from "./baseApi";
+import { errorHandler } from "../utils/errorHandler";
+
+export const getWikis = () => async (dispatch) => {
+  try {
+    const res = await axios.get(`${BASE_URL}/wikis`);
+    dispatch({
+      type: GET_WIKIS,
+      payload: res.data.wikis,
+    });
+  } catch (error) {
+    dispatch(errorHandler(error));
+  }
+};

src/reducers/index.js

@@ -14,6 +14,7 @@ import proposalReducer from "./proposalReducer";
 import adminReducers from "./adminReducers";
 import commentReducer from "./commentReducer";
 import analyticsReducer from './analyticsReducer';
+import wikisReducer from './wikisReducer';
 
 const rootReducer = combineReducers({
   auth: authReducers,
@@ -22,6 +23,7 @@ const rootReducer = combineReducers({
   notification: notificationReducer,
   error: errorReducer,
   dashboard: dashboardReducer,
+  wikis: wikisReducer,
   insight: insightReducer,
   org: orgReducer,
   event: eventReducer,

src/reducers/wikisReducer.js

@@ -0,0 +1,20 @@
+import { GET_WIKIS } from "../actions/types";
+const initialState = {
+  wikis: "",
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case GET_WIKIS: {
+      console.log(`Action Recieved in reducer! ${action.type}`);
+      console.log(action.payload);
+      return {
+        ...state,
+        wikis: action.payload,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};

src/router.js

@@ -5,6 +5,7 @@ import Dashboard from "./user/dashboard/dashboard";
 import PinnedPosts from "./user/pinned-posts/pinned-posts";
 import Profile from "./user/profile/profile";
 import Organization from "./user/organization/organization";
+import Wikis from "./user/wikis/Wikis";
 import NotFound from "./404/notFound";
 import Settings from "./user/dashboard/settings/Settings";
 import Projects from "./user/projects/projects";
@@ -35,6 +36,7 @@ const Router = () => (
       <PrivateRoute exact path="/profile/:id" component={Profile} />
       <PrivateRoute exact path="/:id/proj-info" component={ProjInfo} />
       <PrivateRoute exact path="/organization" component={Organization} />
+      <PrivateRoute exact path="/wikis" component={Wikis} />
       <PrivateRoute exact path="/settings" component={Settings} />
       <PrivateRoute exact path="/projects" component={Projects} />
       <PrivateRoute exact path="/events" component={Events} />

src/user/dashboard/navigation/navigation.js

@@ -105,7 +105,11 @@ class Navigation extends Component {
               className={this.props.org ? "active" : "inactive"}
               link="/organization"
             />
-
+            <ListItem
+              name="Wikis"
+              className={this.props.wikis ? "active" : "inactive"}
+              link="/wikis"
+            />
             <ListItem
               name="Events"
               className={this.props.event ? "active" : "inactive"}
@@ -200,7 +204,12 @@ class Navigation extends Component {
               link="/organization"
               isMobile="true"
             />
-
+            <ListItem
+              name="Wikis"
+              className={this.props.wikis ? "active" : "inactive"}
+              link="/wikis"
+              isMobile="true"
+            />
             <ListItem
               name="Events"
               className={this.props.event ? "active" : "inactive"}

src/user/wikis/Editor/Editor.js

@@ -0,0 +1,118 @@
+import React, { Component } from "react";
+import DeleteOutlinedIcon from "@material-ui/icons/DeleteOutlined";
+import CancelButton from "@material-ui/icons/ClearOutlined";
+import SaveButton from "@material-ui/icons/SaveOutlined";
+import "react-mde/lib/styles/css/react-mde-all.css";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import * as Showdown from "showdown";
+import ReactMde from "react-mde";
+import "./Editor.scss";
+
+class Editor extends Component {
+  constructor(props) {
+    super(props);
+    const { page } = this.props;
+    this.state = {
+      comments: "",
+      selectedTab: "write",
+      title: page?.title,
+      content: page?.content,
+    };
+  }
+
+  handleSave = () => {
+    const { title, content, comments } = this.state;
+    const { page, newPage, sidebar, save } = this.props;
+    save(
+      {
+        title,
+        content,
+        comments,
+        history: page?.history,
+      },
+      newPage,
+      sidebar
+    );
+  };
+
+  setContent = (content) => this.setState({ content });
+
+  setTitle = (evt) => this.setState({ title: evt.target.value });
+
+  setSelectedTab = (selectedTab) => this.setState({ selectedTab });
+
+  setComments = (evt) => this.setState({ comments: evt.target.value });
+
+  render() {
+    const converter = new Showdown.Converter({
+      tables: true,
+      tasklists: true,
+      strikethrough: true,
+      simplifiedAutoLink: true,
+    });
+    const { title, content, selectedTab, comments } = this.state;
+    const { deletePage, sidebar, newPage, page, cancel } = this.props;
+    return (
+      <div className="wiki-editor">
+        <div className="wikis-top-controls">
+          <Button
+            variant="outline-danger"
+            onClick={deletePage}
+            disabled={sidebar || newPage || page.title === "Home"}
+          >
+            <span className="vc">
+              <DeleteOutlinedIcon />
+              Delete
+            </span>
+          </Button>
+          <Button onClick={cancel} variant="light">
+            <span className="vc">
+              <CancelButton />
+              Cancel
+            </span>
+          </Button>
+        </div>
+        <Form>
+          <Form.Label className="field-title">Page Title</Form.Label>
+          <Form.Control
+            as="input"
+            name="pageTitle"
+            className="searchbar"
+            value={title}
+            onChange={this.setTitle}
+            readOnly={!newPage}
+          />
+        </Form>
+        <ReactMde
+          onChange={this.setContent}
+          value={content}
+          onTabChange={this.setSelectedTab}
+          selectedTab={selectedTab}
+          generateMarkdownPreview={(markdown) =>
+            Promise.resolve(converter.makeHtml(markdown))
+          }
+        />
+        <Form>
+          <Form.Label className="field-title">Comments</Form.Label>
+          <Form.Control
+            as="input"
+            name="comments"
+            className="searchbar"
+            value={comments}
+            onChange={this.setComments}
+          />
+        </Form>
+        <div className="wikis-top-controls">
+          <Button variant="primary" onClick={this.handleSave}>
+            <span className="vc">
+              <SaveButton /> Save
+            </span>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Editor;

src/user/wikis/Editor/Editor.scss

@@ -0,0 +1,50 @@
+.wiki-editor {
+  padding: 50px 50px;
+  .wikis-top-controls {
+    display: flex;
+    margin-bottom: 50px;
+    justify-content: flex-end;
+    .vc {
+      display: flex;
+      align-items: center;
+    }
+    * {
+      margin: 0 5px;
+      display: flex;
+      align-items: center;
+    }
+    .btn {
+      padding-left: 0.25rem;
+    }
+  }
+  form {
+    display: flex;
+    align-items: center;
+    label {
+      margin: 0;
+      height: 100%;
+      width: 150px;
+      display: flex;
+      align-items: center;
+    }
+    margin-bottom: 50px;
+  }
+  .react-mde {
+    margin-bottom: 50px;
+    .mde-header {
+      .mde-tabs {
+        * {
+          padding: 0 10px;
+          margin-bottom: 0;
+        }
+        .selected {
+          border: none;
+          background-color: #ffffff;
+        }
+      }
+      .mde-tabs:active {
+        border: none;
+      }
+    }
+  }
+}

src/user/wikis/History/History.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "./History.scss";
+import "antd/dist/antd.css";
+import { Timeline } from "antd";
+import Moment from 'react-moment'
+
+const History = (props) => {
+  const { page, view } = props;
+  return (
+    <div className="history">
+      <Timeline>
+        {page.history.map((ele, index) => {
+          const body = JSON.parse(ele.body);
+          return (
+            <Timeline.Item key={index}>
+              <div className="history-item" onClick={() => view(body.commit)}>
+                <div className="line">
+                  <h5>{ele.user.login}</h5>
+                  <h5><Moment format="DD MMM YYYY">{ele.created_at}</Moment></h5>
+                </div>
+                <div className="line">
+                  <p>{body.comment}</p>
+                  <a
+                    href={`${ele.html_url.substring(
+                      0,
+                      ele.html_url.indexOf("/issues")
+                    )}/commit/${body.commit}`}
+                  >
+                    <p>{body.commit.substring(0, 8)}</p>
+                  </a>
+                </div>
+              </div>
+            </Timeline.Item>
+          );
+        })}
+      </Timeline>
+    </div>
+  );
+};
+
+export default History;

src/user/wikis/History/History.scss

@@ -0,0 +1,20 @@
+#wikis {
+  .history {
+    .history-item {
+      .line {
+        display: flex;
+        cursor: pointer;
+        font-family: Inter;
+        align-items: center;
+        justify-content: space-between;
+        * {
+          margin: 0px 10px;
+          text-align: justify;
+        }
+      }
+    }
+    .history-item:hover {
+      background-color: rgba(26, 115, 232, 0.1);
+    }
+  }
+}