Bucketlist Integration

components/links.js

@@ -10,6 +10,7 @@ import {
   SettingOutlined,
   LogoutOutlined,
   ContainerOutlined,
+  CheckSquareOutlined,
 } from '@ant-design/icons';
 
 export const links = [
@@ -124,6 +125,21 @@ export const links = [
       },
     ],
   },
+  {
+    title: 'Bucketlist',
+    key: 'bucketlist',
+    icon: <CheckSquareOutlined />,
+    items: [
+      {
+        key: 'view-list',
+        title: 'View bucketlist',
+      },
+      {
+        key: 'update-list',
+        title: 'Update bucketlist',
+      },
+    ],
+  },
   {
     title: 'Account',
     key: 'account',
@@ -149,6 +165,10 @@ export const links = [
         key: 'manage-users',
         title: 'Manage Users',
       },
+      {
+        key: 'bucketlist-tracker',
+        title: 'Bucketlist Tracker',
+      },
     ],
   },
   // {

package.json

@@ -36,6 +36,7 @@
     "imagemin-optipng": "^7.1.0",
     "isomorphic-fetch": "^2.2.1",
     "markdown-it": "^11.0.0",
+    "marked": "^4.0.15",
     "moment": "^2.24.0",
     "moment-range": "^4.0.2",
     "next": "^9.3.5",

pages/admin/bucketlist-tracker.js

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { marked } from 'marked';
+
+// antd components
+import Card from 'antd/lib/card';
+import Input from 'antd/lib/input';
+
+import dataFetch from '../../utils/dataFetch';
+import Base from '../../components/base';
+import TitleBar from '../../components/titlebar';
+
+const { Search } = Input;
+
+const Report = (props) => {
+  const [data, setData] = useState([]);
+  const [username, setUsername] = useState('');
+  const [batch, setBatch] = useState(0);
+  const [isLoaded, setLoaded] = useState(false);
+
+  const query = `
+  query user($username: String!){
+    user(username:$username){
+      username
+      firstName
+      lastName
+      email
+      profile{
+        profilePic
+        phone
+        about
+        roll
+        batch
+        githubUsername
+        gitlabUsername
+        telegramUsername
+        twitterUsername
+        languages{
+          name
+        }
+        links{
+          link
+          portal{
+            name
+          }
+        }
+      }
+    }
+  }
+  `;
+
+  const routes = [
+    {
+      path: '/',
+      name: 'Home',
+    },
+    {
+      path: '/bucketlist-tracker/-report',
+      name: 'Bucketlist Tracker',
+    },
+  ];
+
+  const fetchData = async (variables) => dataFetch({ query, variables });
+
+  const getBucketlist = (username) => {
+    setUsername(username);
+    const variables = { username: username };
+    fetchData(variables).then((r) => {
+      if (!Object.prototype.hasOwnProperty.call(r, 'errors')) {
+        setBatch(r.data.user.profile.batch ? r.data.user.profile.batch : null);
+        setLoaded(true);
+      }
+    });
+    fetch(
+      `https://gitlab.com/api/v4/projects/20528933/repository/files/${batch}%2f${username}.md/raw?private_token=glpat-TA_ZW_66kKtazaexHVCu&ref=master`
+    )
+      .then((response) => response.text())
+      .then((data) => setData(marked.parse(data)));
+  };
+
+  return (
+    <Base title=" Report | Bucketlist " {...props}>
+      <TitleBar
+        routes={routes}
+        title=" Bucketlist Tracker"
+        subTitle="Get bucketlist and corresponding stats of every member"
+      />
+      <div className="col-md-6 p-2">
+        <Search
+          placeholder="Search Member"
+          onSearch={(value) => getBucketlist(value)}
+          style={{ width: 350 }}
+          enterButton
+        />
+      </div>
+      <Card loading={!isLoaded} type="inner">
+        <div dangerouslySetInnerHTML={{ __html: data }}></div>
+      </Card>
+    </Base>
+  );
+};
+
+export default Report;

pages/bucketlist/view-list.js

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import { marked } from 'marked';
+import Cookies from 'universal-cookie';
+import dataFetch from '../../utils/dataFetch';
+
+const cookies = new Cookies();
+
+// antd components
+import Card from 'antd/lib/card';
+
+import Base from '../../components/base';
+import TitleBar from '../../components/titlebar';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+  },
+  {
+    path: '/bucketlist',
+    name: 'Bucketlist',
+  },
+  {
+    path: '/bucketlist/view-list',
+    name: 'View Bucketlist',
+  },
+];
+
+const query = `
+query user($username: String!){
+  user(username:$username){
+    username
+    firstName
+    lastName
+    email
+    profile{
+      profilePic
+      phone
+      about
+      roll
+      batch
+      githubUsername
+      gitlabUsername
+      telegramUsername
+      twitterUsername
+      languages{
+        name
+      }
+      links{
+        link
+        portal{
+          name
+        }
+      }
+    }
+  }
+}
+`;
+
+const Viewlist = (props) => {
+  const [data, setData] = useState([]);
+  const [batch, setBatch] = useState(0);
+  const [isLoaded, setLoaded] = useState(false);
+  const usernameCookie = cookies.get('username');
+  const variables = { username: usernameCookie };
+
+  const fetchData = async (variables) => dataFetch({ query, variables });
+
+  fetchData(variables).then((r) => {
+    if (!Object.prototype.hasOwnProperty.call(r, 'errors')) {
+      setBatch(r.data.user.profile.batch ? r.data.user.profile.batch : null);
+      setLoaded(true);
+    }
+  });
+
+  useEffect(() => {
+    fetch(
+      `https://gitlab.com/api/v4/projects/20528933/repository/files/${batch}%2f${usernameCookie}.md/raw?private_token=glpat-TA_ZW_66kKtazaexHVCu&ref=master`
+    )
+      .then((response) => response.text())
+      .then((data) => setData(marked.parse(data)));
+  }, [batch]);
+
+  return (
+    <Base title="View list" {...props}>
+      <TitleBar routes={routes} title="View Bucketlist" />
+      <div className="m-4">
+        <Card loading={!isLoaded} type="inner">
+          <div dangerouslySetInnerHTML={{ __html: data }}></div>
+        </Card>
+      </div>
+    </Base>
+  );
+};
+
+export default Viewlist;

utils/dataFetch.js

@@ -2,7 +2,7 @@ import fetch from 'isomorphic-fetch';
 import Cookies from 'universal-cookie';
 
 const cookies = new Cookies();
-const API_URL = 'https://api.amfoss.in/';
+const API_URL = 'http://localhost:8000/';
 
 export default ({ query, variables }) => {
   const body = {