From acfa2ac3fa3d50e724c62d76c8c889fcada0319b Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Sun, 8 May 2022 11:14:25 +0530
Subject: [PATCH 1/7] add to sidebar

---
 components/links.js            | 16 +++++++++
 pages/bucketlist/bucketlist.js | 59 ++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 pages/bucketlist/bucketlist.js

diff --git a/components/links.js b/components/links.js
index 18824a4..07f540b 100644
--- a/components/links.js
+++ b/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',
diff --git a/pages/bucketlist/bucketlist.js b/pages/bucketlist/bucketlist.js
new file mode 100644
index 0000000..81cdcf0
--- /dev/null
+++ b/pages/bucketlist/bucketlist.js
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+
+// antd components
+import Card from 'antd/lib/card';
+import Menu from 'antd/lib/menu';
+
+import Base from '../../components/base';
+import TitleBar from '../../components/titlebar';
+import BasicSettings from '../../components/account/basicSettings';
+import ChangePassword from '../../components/account/changePassword';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+  },
+  {
+    path: '/account',
+    name: 'Account',
+  },
+  {
+    path: '/account/settings',
+    name: 'Settings',
+  },
+];
+const AccountSettings = (props) => {
+  const [current, setCurrent] = useState('basic');
+  return (
+    <Base title="Settings" {...props} verificationRequired={false}>
+      <TitleBar routes={routes} title="Account Settings" />
+      <div className="mx-4 mb-4">
+        <Card bordered={false}>
+          <div className="row">
+            <div className="col-md-3">
+              <Menu onClick={(e) => setCurrent(e.key)} selectedKeys={[current]}>
+                <Menu.Item key="basic">Update Profile</Menu.Item>
+                <Menu.Item key="change-password">Change Password</Menu.Item>
+              </Menu>
+            </div>
+            <div
+              className="col-md-9"
+              style={{
+                flex: 1,
+                paddingTop: '8px',
+                paddingRight: '40px',
+                paddingBottom: '8px',
+                paddingLeft: '40px',
+              }}
+            >
+              {current === 'basic' ? <BasicSettings /> : <ChangePassword />}
+            </div>
+          </div>
+        </Card>
+      </div>
+    </Base>
+  );
+};
+
+export default AccountSettings;

From 2b7894bfb69bd353d0eb3af067a5c856f5466f7f Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Sun, 8 May 2022 12:06:13 +0530
Subject: [PATCH 2/7] created pages

---
 pages/bucketlist/bucketlist.js  | 59 ---------------------------------
 pages/bucketlist/update-list.js | 37 +++++++++++++++++++++
 pages/bucketlist/view-list.js   | 37 +++++++++++++++++++++
 3 files changed, 74 insertions(+), 59 deletions(-)
 delete mode 100644 pages/bucketlist/bucketlist.js
 create mode 100644 pages/bucketlist/update-list.js
 create mode 100644 pages/bucketlist/view-list.js

diff --git a/pages/bucketlist/bucketlist.js b/pages/bucketlist/bucketlist.js
deleted file mode 100644
index 81cdcf0..0000000
--- a/pages/bucketlist/bucketlist.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-
-// antd components
-import Card from 'antd/lib/card';
-import Menu from 'antd/lib/menu';
-
-import Base from '../../components/base';
-import TitleBar from '../../components/titlebar';
-import BasicSettings from '../../components/account/basicSettings';
-import ChangePassword from '../../components/account/changePassword';
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-  },
-  {
-    path: '/account',
-    name: 'Account',
-  },
-  {
-    path: '/account/settings',
-    name: 'Settings',
-  },
-];
-const AccountSettings = (props) => {
-  const [current, setCurrent] = useState('basic');
-  return (
-    <Base title="Settings" {...props} verificationRequired={false}>
-      <TitleBar routes={routes} title="Account Settings" />
-      <div className="mx-4 mb-4">
-        <Card bordered={false}>
-          <div className="row">
-            <div className="col-md-3">
-              <Menu onClick={(e) => setCurrent(e.key)} selectedKeys={[current]}>
-                <Menu.Item key="basic">Update Profile</Menu.Item>
-                <Menu.Item key="change-password">Change Password</Menu.Item>
-              </Menu>
-            </div>
-            <div
-              className="col-md-9"
-              style={{
-                flex: 1,
-                paddingTop: '8px',
-                paddingRight: '40px',
-                paddingBottom: '8px',
-                paddingLeft: '40px',
-              }}
-            >
-              {current === 'basic' ? <BasicSettings /> : <ChangePassword />}
-            </div>
-          </div>
-        </Card>
-      </div>
-    </Base>
-  );
-};
-
-export default AccountSettings;
diff --git a/pages/bucketlist/update-list.js b/pages/bucketlist/update-list.js
new file mode 100644
index 0000000..01973fb
--- /dev/null
+++ b/pages/bucketlist/update-list.js
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+// antd components
+import Card from 'antd/lib/card';
+import Menu from 'antd/lib/menu';
+
+import Base from '../../components/base';
+import TitleBar from '../../components/titlebar';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+  },
+  {
+    path: '/bucketlist',
+    name: 'Bucketlist',
+  },
+  {
+    path: '/bucketlist/update-list',
+    name: 'Update Bucketlist',
+  },
+];
+const Updatelist = (props) => {
+  const [current, setCurrent] = useState('basic');
+  return (
+    <Base title="Update list" {...props}>
+      <TitleBar
+        routes={routes}
+        title="Update Bucketlist"
+      />
+Update
+    </Base>
+  );
+};
+
+export default Updatelist;
diff --git a/pages/bucketlist/view-list.js b/pages/bucketlist/view-list.js
new file mode 100644
index 0000000..415adca
--- /dev/null
+++ b/pages/bucketlist/view-list.js
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+// antd components
+import Card from 'antd/lib/card';
+import Menu from 'antd/lib/menu';
+
+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 Viewlist = (props) => {
+  const [current, setCurrent] = useState('basic');
+  return (
+    <Base title="View list" {...props}>
+      <TitleBar
+        routes={routes}
+        title="View Bucketlist"
+      />
+Hi
+    </Base>
+  );
+};
+
+export default Viewlist;

From 86525d5a4bc61f032e4cfd8b4d4a60e7d6cf1ac5 Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Mon, 9 May 2022 17:36:40 +0530
Subject: [PATCH 3/7] fetch data from API

---
 components/links.js             |  4 ----
 package.json                    |  1 +
 pages/bucketlist/update-list.js | 37 ---------------------------------
 pages/bucketlist/view-list.js   | 14 ++++++++++---
 4 files changed, 12 insertions(+), 44 deletions(-)
 delete mode 100644 pages/bucketlist/update-list.js

diff --git a/components/links.js b/components/links.js
index 07f540b..f620639 100644
--- a/components/links.js
+++ b/components/links.js
@@ -134,10 +134,6 @@ export const links = [
         key: 'view-list',
         title: 'View bucketlist',
       },
-      {
-        key: 'update-list',
-        title: 'Update bucketlist',
-      },
     ],
   },
   {
diff --git a/package.json b/package.json
index f40a35d..7fdd57a 100644
--- a/package.json
+++ b/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",
diff --git a/pages/bucketlist/update-list.js b/pages/bucketlist/update-list.js
deleted file mode 100644
index 01973fb..0000000
--- a/pages/bucketlist/update-list.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-
-// antd components
-import Card from 'antd/lib/card';
-import Menu from 'antd/lib/menu';
-
-import Base from '../../components/base';
-import TitleBar from '../../components/titlebar';
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-  },
-  {
-    path: '/bucketlist',
-    name: 'Bucketlist',
-  },
-  {
-    path: '/bucketlist/update-list',
-    name: 'Update Bucketlist',
-  },
-];
-const Updatelist = (props) => {
-  const [current, setCurrent] = useState('basic');
-  return (
-    <Base title="Update list" {...props}>
-      <TitleBar
-        routes={routes}
-        title="Update Bucketlist"
-      />
-Update
-    </Base>
-  );
-};
-
-export default Updatelist;
diff --git a/pages/bucketlist/view-list.js b/pages/bucketlist/view-list.js
index 415adca..18fe4e3 100644
--- a/pages/bucketlist/view-list.js
+++ b/pages/bucketlist/view-list.js
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { marked } from "marked";
 
 // antd components
 import Card from 'antd/lib/card';
@@ -22,14 +23,21 @@ const routes = [
   },
 ];
 const Viewlist = (props) => {
-  const [current, setCurrent] = useState('basic');
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    fetch('https://gitlab.com/api/v4/projects/20528933/repository/files/2020%2fadvaith.md/raw?private_token=glpat-TA_ZW_66kKtazaexHVCu&ref=master')
+    .then(response => response.text())
+    .then(data => setData(marked.parse(data)))
+  },[])
+
   return (
     <Base title="View list" {...props}>
       <TitleBar
         routes={routes}
         title="View Bucketlist"
       />
-Hi
+      <article dangerouslySetInnerHTML={{__html: data}}></article>
     </Base>
   );
 };

From 42b3d48c36028d729dbf98f52214a74bea77c617 Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Tue, 10 May 2022 18:19:38 +0530
Subject: [PATCH 4/7] fixed front-end

---
 pages/bucketlist/view-list.js | 63 ++++++++++++++++++++++++++++++++---
 1 file changed, 59 insertions(+), 4 deletions(-)

diff --git a/pages/bucketlist/view-list.js b/pages/bucketlist/view-list.js
index 18fe4e3..45dccef 100644
--- a/pages/bucketlist/view-list.js
+++ b/pages/bucketlist/view-list.js
@@ -1,9 +1,12 @@
 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 Menu from 'antd/lib/menu';
 
 import Base from '../../components/base';
 import TitleBar from '../../components/titlebar';
@@ -22,14 +25,59 @@ const routes = [
     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/2020%2fadvaith.md/raw?private_token=glpat-TA_ZW_66kKtazaexHVCu&ref=master')
+    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}>
@@ -37,7 +85,14 @@ const Viewlist = (props) => {
         routes={routes}
         title="View Bucketlist"
       />
-      <article dangerouslySetInnerHTML={{__html: data}}></article>
+        <div className="m-4" >
+          <Card
+            loading={!isLoaded}
+            type="inner"
+          >
+            <div dangerouslySetInnerHTML={{__html: data}}></div>
+          </Card>
+        </div>
     </Base>
   );
 };

From fcae3894d848703941f713590616d095609989ef Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Thu, 12 May 2022 17:37:52 +0530
Subject: [PATCH 5/7] admin mode

---
 components/links.js             | 4 ++++
 pages/bucketlist/update-list.js | 0
 utils/dataFetch.js              | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 pages/bucketlist/update-list.js

diff --git a/components/links.js b/components/links.js
index f620639..07f540b 100644
--- a/components/links.js
+++ b/components/links.js
@@ -134,6 +134,10 @@ export const links = [
         key: 'view-list',
         title: 'View bucketlist',
       },
+      {
+        key: 'update-list',
+        title: 'Update bucketlist',
+      },
     ],
   },
   {
diff --git a/pages/bucketlist/update-list.js b/pages/bucketlist/update-list.js
new file mode 100644
index 0000000..e69de29
diff --git a/utils/dataFetch.js b/utils/dataFetch.js
index cb455f8..b8bec2a 100644
--- a/utils/dataFetch.js
+++ b/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 = {

From d543880305ada6123f32e56c28ba55b13f931e15 Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Sat, 28 May 2022 11:28:37 +0530
Subject: [PATCH 6/7] bucketlist tracking

---
 components/links.js               |   4 ++
 pages/admin/bucketlist-tracker.js | 110 ++++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 pages/admin/bucketlist-tracker.js

diff --git a/components/links.js b/components/links.js
index 07f540b..99e925d 100644
--- a/components/links.js
+++ b/components/links.js
@@ -165,6 +165,10 @@ export const links = [
         key: 'manage-users',
         title: 'Manage Users',
       },
+      {
+        key: 'bucketlist-tracker',
+        title: 'Bucketlist Tracker',
+      },
     ],
   },
   // {
diff --git a/pages/admin/bucketlist-tracker.js b/pages/admin/bucketlist-tracker.js
new file mode 100644
index 0000000..f41a705
--- /dev/null
+++ b/pages/admin/bucketlist-tracker.js
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { marked } from "marked";
+
+// antd components
+import Card from 'antd/lib/card';
+import Input from 'antd/lib/input';
+import Avatar from 'antd/lib/avatar';
+
+import dataFetch from '../../utils/dataFetch';
+import Base from '../../components/base';
+import TitleBar from '../../components/titlebar';
+
+const { Search } = Input;
+const { Meta } = Card;
+
+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);
+        console.log(batch)
+        console.log(username)
+      }
+    });
+    console.log(batch)
+    console.log(username)
+    fetch(`https://gitlab.com/api/v4/projects/20528933/repository/files/2020%2f${username}.md/raw?private_token=glpat-TA_ZW_66kKtazaexHVCu&ref=master`)
+    .then(response => response.text())
+    .then(data => setData(marked.parse(data)));
+    console.log(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;

From b80c30eed092cedc4315e0c680612982ddc0ce62 Mon Sep 17 00:00:00 2001
From: Pavithra Nair <pmpavithranair@gmail.com>
Date: Sat, 28 May 2022 11:41:51 +0530
Subject: [PATCH 7/7] Add ESlint and prettier config

---
 pages/admin/bucketlist-tracker.js | 44 +++++++++++++------------------
 pages/bucketlist/view-list.js     | 30 +++++++++------------
 2 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/pages/admin/bucketlist-tracker.js b/pages/admin/bucketlist-tracker.js
index f41a705..abfea23 100644
--- a/pages/admin/bucketlist-tracker.js
+++ b/pages/admin/bucketlist-tracker.js
@@ -1,17 +1,15 @@
 import React, { useState } from 'react';
-import { marked } from "marked";
+import { marked } from 'marked';
 
 // antd components
 import Card from 'antd/lib/card';
 import Input from 'antd/lib/input';
-import Avatar from 'antd/lib/avatar';
 
 import dataFetch from '../../utils/dataFetch';
 import Base from '../../components/base';
 import TitleBar from '../../components/titlebar';
 
 const { Search } = Input;
-const { Meta } = Card;
 
 const Report = (props) => {
   const [data, setData] = useState([]);
@@ -65,21 +63,18 @@ const Report = (props) => {
 
   const getBucketlist = (username) => {
     setUsername(username);
-    const variables = { 'username': 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);
-        console.log(batch)
-        console.log(username)
       }
     });
-    console.log(batch)
-    console.log(username)
-    fetch(`https://gitlab.com/api/v4/projects/20528933/repository/files/2020%2f${username}.md/raw?private_token=glpat-TA_ZW_66kKtazaexHVCu&ref=master`)
-    .then(response => response.text())
-    .then(data => setData(marked.parse(data)));
-    console.log(data)
+    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 (
@@ -89,20 +84,17 @@ const Report = (props) => {
         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>
+      <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>
   );
 };
diff --git a/pages/bucketlist/view-list.js b/pages/bucketlist/view-list.js
index 45dccef..e6a88e5 100644
--- a/pages/bucketlist/view-list.js
+++ b/pages/bucketlist/view-list.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { marked } from "marked";
+import { marked } from 'marked';
 import Cookies from 'universal-cookie';
 import dataFetch from '../../utils/dataFetch';
 
@@ -74,25 +74,21 @@ const Viewlist = (props) => {
   });
 
   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])
+    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>
+      <TitleBar routes={routes} title="View Bucketlist" />
+      <div className="m-4">
+        <Card loading={!isLoaded} type="inner">
+          <div dangerouslySetInnerHTML={{ __html: data }}></div>
+        </Card>
+      </div>
     </Base>
   );
 };