fixed all issues, updated css

components/add-reply.js

@@ -2,21 +2,25 @@ import MyEditor from "./markdown";
 
 export default function AddReply() {
   return (
-    <div>
+    <div className="pagetwo">
       <div className="columns">
-        <div className="column col-12 con">
-          <div className="columns gapless inner">
+        <div className="column col-12 two">
+          <div className="columns gapless">
             <div className="col-6">
               <div className="go-left">
-                <figure data-initial="S" className="avatar avatar-md" />
+                <figure
+                  data-initial="S"
+                  className="avatar avatar-md"
+                  style={{ backgroundColor: "#00b65b" }}
+                />
                 <p className="username">Shreya Laheri</p>
               </div>
             </div>
           </div>
         </div>
 
-        <div className="column col-12 det">
-          <div className="qdetail">
+        <div className="column col-12 three">
+          <div className="question-detail">
             <div>
               <MyEditor />
             </div>

components/post-description.js

@@ -1,47 +1,51 @@
 export default function PostDescription() {
   return (
-    <div>
+    <div className="pagetwo">
       <br />
       <br />
       <br />
       <br />
       <div className="columns">
-        <div className="column col-12 t">
-          <p className="qname">Lorem ipsum dolor sit amet</p>
+        <div className="column col-12 one">
+          <p className="question-name">Lorem ipsum dolor sit amet</p>
           <div className="hide-sm">
             <ul>
-              <li className="cat">General</li>
+              <li className="category-type">General</li>
             </ul>
           </div>
           <div className="show-sm">
             <ul>
-              <li className="cat">General</li>
+              <li className="category-type">General</li>
             </ul>
           </div>
           <hr className="divide" />
         </div>
 
-        <div className="column col-12 con">
-          <div className="columns gapless inner">
+        <div className="column col-12 two">
+          <div className="columns gapless">
             <div className="col-6">
               <div className="go-left">
-                <figure data-initial="S" className="avatar avatar-md" />
+                <figure
+                  data-initial="S"
+                  className="avatar avatar-md"
+                  style={{ backgroundColor: "#00b65b" }}
+                />
                 <p className="username">Shreya Laheri</p>
               </div>
             </div>
             <div className="col-6">
               <div className="go-right">
                 <button className="btn btn-action btn-sm edit">
-                  <i className="icon  icon-edit" />
+                  <i className="icon icon-edit" />
                 </button>
                 <p className="smalldate">14th May</p>
               </div>
             </div>
           </div>
         </div>
 
-        <div className="column col-12 det">
-          <div className="qdetail">
+        <div className="column col-12 three">
+          <div className="question-detail">
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
@@ -53,9 +57,9 @@ export default function PostDescription() {
               elit
             </p>
             <div className="replyicon">
-              <button className="btn btn-action r">
+              <button className="btn btn-action ">
                 {" "}
-                <i className="material-icons r">reply</i>
+                <i className="material-icons">reply</i>
               </button>
               <p className="replytext">Reply</p>
             </div>

components/post.js

@@ -7,17 +7,20 @@ export default function Post() {
     router.push("/post-detail");
   };
   return (
-    <div>
-      <div onClick={handleClick} className="columns gapless a">
+
+    <div className="post">
+      <div onClick={handleClick} className="columns gapless one">
         <div className="column col-sm-12 col-7 ">
-          <p className="q">Lorem ipsum dolor sit amet</p>
-          <ul>
-            <li className="cat">General</li>
-          </ul>
+          <p className="question-title">Lorem ipsum dolor sit amet</p>
+          <div className="question-category">
+            <ul>
+              <li className="category-type">General</li>
+            </ul>
+          </div>
         </div>
         <div className="column col-sm-12 col-5 ">
           <div className="columns gapless">
-            <div className="col-sm-4 col-3 k">
+            <div className="col-sm-4 col-3 one">
               <figure
                 className="avatar avatar-md"
                 data-initial="S"
@@ -35,7 +38,7 @@ export default function Post() {
               />
             </div>
             <div className="col-sm-4 col-3">
-              <h3 className="num">4</h3>
+              <h3 className="count">4</h3>
               <p className="replies">replies</p>
             </div>
             <div className="col-3 hide-sm">

components/replies.js

@@ -1,16 +1,20 @@
 export default function DisplayReplies() {
   return (
-    <div>
+    <div className="pagetwo">
       <div className="columns">
-        <div className="column col-12 t">
-          <p className="qname">Replies</p>
+        <div className="column col-12 one">
+          <p className="question-name">Replies</p>
           <hr className="divide" />
         </div>
-        <div className="column col-12 con">
-          <div className="columns gapless inner">
+        <div className="column col-12 two">
+          <div className="columns gapless ">
             <div className="col-6">
               <div className="go-left">
-                <figure data-initial="S" className="avatar avatar-md" />
+                <figure
+                  data-initial="S"
+                  className="avatar avatar-md"
+                  style={{ backgroundColor: "#00b65b" }}
+                />
                 <p className="username">Shreya Laheri</p>
               </div>
             </div>
@@ -25,18 +29,18 @@ export default function DisplayReplies() {
           </div>
         </div>
 
-        <div className="column col-12 det">
-          <div className="qdetail">
+        <div className="column col-12 three">
+          <div className="question-detail">
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
               enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
             </p>
             <div className="replyicon">
-              <button className="btn btn-action r">
+              <button className="btn btn-action ">
                 {" "}
-                <i className="material-icons r">reply</i>
+                <i className="material-icons">reply</i>
               </button>
               <p className="replytext">Reply</p>
             </div>

components/select.js

@@ -1,14 +1,12 @@
 export default function Select() {
   return (
-    <div>
-      <br />
-
+    <div className="filter_panel">
       <br />
       <br />
       <br />
       <div className="columns">
         <div className="column col-xs-7 col-sm-8 col-md-6 col-lg-11">
-          <div className="padding a">
+          <div className="padding">
             <div className="has-icon-left">
               <input type="text" className="form-input" placeholder="Search" />
               <i className="form-icon icon icon-search"></i>
@@ -34,16 +32,16 @@ export default function Select() {
           </div>
           <button className="btn hide-sm">
             {" "}
-            <i className="icon icon-plus" />
+            <i className="icon icon-plus one" />
             New Topic
           </button>
-          <button className="btn btn-action show-sm">
-            <i className="icon icon-plus a"></i>
+          <button className="btn btn-action show-sm one">
+            <i className="icon icon-plus two"></i>
           </button>
-          <button className="btn btn-action show-sm a">
-            <div className="diva"></div>
-            <div className="div"></div>
-            <div className="divb"></div>
+          <button className="btn btn-action show-sm two">
+            <div className="div top"></div>
+            <div className="div mid"></div>
+            <div className="div bottom"></div>
           </button>
         </div>
       </div>

components/topbar.js

@@ -1,13 +1,12 @@
 export default function TopBar() {
   return (
-    <div>
+    <div className="topbar">
       <div className="columns">
         <div className="column col-12">
-          <header className="navbar a">
+          <header className="navbar">
             <section className="navbar-section">
               <div className="padding">
                 <img
-                  style={{ marginTop: "5px", marginBottom: "5px" }}
                   src="/logo-black.svg"
                   className="logo"
                   alt="SpaceUpCloud"
@@ -17,14 +16,14 @@ export default function TopBar() {
 
             <section className="navbar-section">
               <div className="hide-sm" style={{ marginRight: "40px" }}>
-                <div className="company top">
+                <div className="company-name top">
                   <p className="copyrights">Powered by Space Cloud</p>
                   <img src="/spaceship.jpg" className="spaceship" alt="oops" />
                 </div>
               </div>
               <div className="dropdown ">
                 <a href="#" className="dropdown-toggle" tabIndex="0">
-                  <figure className="avatar avatar-lg a">
+                  <figure className="avatar avatar-lg ">
                     <i className="material-icons">perm_identity</i>
                   </figure>
                 </a>
@@ -38,7 +37,7 @@ export default function TopBar() {
           </header>
         </div>
         <div className="column col-12 footer show-xs">
-          <div className="company">
+          <div className="company-name">
             <p>Powered by Space Cloud</p>
             <img src="/spaceship.jpg" className="spaceship" alt="oops" />
           </div>

services/service.js

@@ -1,10 +1,13 @@
 import { ApolloClient } from "apollo-client";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import { HttpLink } from "apollo-link-http";
+
+import gql from "graphql-tag";
 //import { setContext } from 'apollo-link-context';
 function initClient(projectId, url) {
   const httpLink = new HttpLink({
     uri: `${url}/v1/api/${projectId}/graphql`
+
   });
 
   /*// Middleware to pass token in each HTTP request
@@ -25,7 +28,10 @@ function initClient(projectId, url) {
   // Instantiate client
   const client = new ApolloClient({
     cache: new InMemoryCache({ addTypename: false }),
+
+
     link: httpLink
+
   });
   return client;
 }
@@ -34,4 +40,48 @@ export default class Service {
   constructor(projectId, url) {
     this.client = initClient(projectId, url);
   }
+
+
+ getAllPosts() {
+    return new Promise((resolve, reject) => {
+      this.client
+        .query({
+          query: gql`
+        query{
+          post @postgres{
+            id
+            title
+            category
+            content
+            ts
+            views
+            author{
+              id
+              name
+            }
+            replies{
+              author{
+                id
+                name
+              }
+            }
+
+          }
+        } @backend{
+          status
+          error
+        }`
+        })
+        .then(({ status, data }) => {
+          console.log(data.post);
+          if (status !== 200) {
+            reject("Error in fetching data");
+            return;
+          }
+          resolve(data);
+        })
+        .catch((ex) => reject(ex));
+    });
+  }
+
 }