Merge pull request EliasAfara#2 from EliasAfara/ui-refactor

UI refactor
Goooyi · Nov 8, 2023 · 03520ee · 03520ee
2 parents b6871a8 + 6888095
commit 03520ee
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 41 deletions.
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
@@ -35,24 +35,51 @@
     height: 60px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     background-color: #1976d2;
     color: white;
     font-weight: 600;
+    padding: 0 16px;
   }
 
   .toolbar img {
-    margin: 0 16px;
+    margin-right: 16px;
   }
 </style>
 
 <!-- Toolbar -->
 <div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-  <span>Products</span>
+  <div style="display: flex; align-items: center; justify-content: center">
+    <img
+      width="40"
+      alt="Angular Logo"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+    />
+    <span>Product Hunt Visualizer</span>
+  </div>
+  <div>
+    <a
+      mat-button
+      href="https://github.com/EliasAfara/product-hunt-visualizer"
+      target="_blank"
+    >
+      <span
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: aliceblue;
+        "
+        ><img
+          src="assets/github-circle-white-transparent.svg"
+          alt="github logo"
+          aria-hidden="true"
+          style="margin-right: 10px"
+        />
+        Github</span
+      >
+    </a>
+  </div>
 </div>
 
 <app-posts></app-posts>
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
@@ -4,6 +4,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { NgApexchartsModule } from 'ng-apexcharts';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { GraphQLModule } from './graphql.module';
 
@@ -19,6 +21,8 @@ import { PostsComponent } from './posts/posts.component';
     InfiniteScrollModule,
     NgApexchartsModule,
     MatProgressSpinnerModule,
+    MatButtonModule,
+    MatIconModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/client/src/app/posts/posts.component.css b/client/src/app/posts/posts.component.css
@@ -1,17 +1,25 @@
 /* Styling for the main container using CSS Grid */
 .main {
   display: grid;
-  grid-template-columns: 2fr 2fr;
+  grid-template-columns: 2fr;
   grid-gap: 10px;
   align-items: start;
 
   /* Optional: Set a max-width for the main container to prevent it from becoming too wide */
-  max-width: 1500px;
+  max-width: 1300px;
   margin: 0 auto;
   margin-top: 60px;
   padding: 10px;
 }
 
+.posts-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 2fr;
+  grid-gap: 10px;
+  align-items: start;
+  padding: 10px;
+}
+
 ul {
   list-style: none;
   padding: 0;
@@ -43,6 +51,8 @@ ul {
 }
 
 .post {
+  height: 100px;
+  width: 520px;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -60,10 +70,11 @@ ul {
 
 .post-content {
   display: flex;
+  justify-content: space-between;
   flex-direction: column;
   margin-right: 10px;
-  gap: 10px;
   flex: 1;
+  height: 100%;
 }
 
 .post-title {
@@ -78,7 +89,13 @@ ul {
 
 .post-date {
   color: #777;
-  margin-top: 12px;
+}
+
+.post-action {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /* Styling for the pie chart container with fixed position */

diff --git a/client/src/app/posts/posts.component.html b/client/src/app/posts/posts.component.html
@@ -2,15 +2,15 @@
   class="main"
   infiniteScroll
   [infiniteScrollDistance]="1"
-  [infiniteScrollThrottle]="500"
+  [infiniteScrollThrottle]="400"
   (scrolled)="onScroll()"
 >
   <div *ngIf="error">
     <p>Error: {{ error }}</p>
   </div>
 
-  <div class="posts-container">
-    <div *ngIf="posts">
+  <div *ngIf="posts.length > 0; else no_posts_fetched" class="posts-wrapper">
+    <div class="posts-container">
       <div class="posts" *ngFor="let post of posts">
         <div class="post">
           <img
@@ -26,26 +26,114 @@
             }}</span>
           </div>
           <div class="post-action">
-            <button>View</button>
+            <button
+              mat-icon-button
+              aria-label="Product Hunt Link"
+              (click)="openUrl(post.node.url)"
+            >
+              <mat-icon>open_in_new</mat-icon>
+            </button>
           </div>
         </div>
       </div>
+
+      <div *ngIf="isLoading">
+        <mat-spinner></mat-spinner>
+      </div>
     </div>
 
-    <div *ngIf="isLoading">
-      <mat-spinner></mat-spinner>
+    <div class="pie-chart-container">
+      <apx-chart
+        #chart
+        [series]="chartOptions.series"
+        [chart]="chartOptions.chart"
+        [labels]="chartOptions.labels"
+        [responsive]="chartOptions.responsive"
+        [plotOptions]="chartOptions.plotOptions"
+      ></apx-chart>
     </div>
   </div>
 
-  <div class="pie-chart-container">
-    <!-- angular chart to display the number of posts in each topic from the fetched posts  -->
-    <apx-chart
-      #chart
-      [series]="chartOptions.series"
-      [chart]="chartOptions.chart"
-      [labels]="chartOptions.labels"
-      [responsive]="chartOptions.responsive"
-      [plotOptions]="chartOptions.plotOptions"
-    ></apx-chart>
-  </div>
+  <ng-template #no_posts_fetched>
+    <div
+      style="
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      "
+    >
+      <div *ngIf="isLoading; else no_data">
+        <mat-spinner></mat-spinner>
+      </div>
+
+      <ng-template #no_data>
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div>
+            <svg
+              width="184"
+              height="152"
+              viewBox="0 0 184 152"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g fill="none" fill-rule="evenodd">
+                <g transform="translate(24 31.67)">
+                  <ellipse
+                    fill-opacity=".8"
+                    fill="#F5F5F7"
+                    cx="67.797"
+                    cy="106.89"
+                    rx="67.797"
+                    ry="12.668"
+                  ></ellipse>
+                  <path
+                    d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+                    fill="#AEB8C2"
+                  ></path>
+                  <path
+                    d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
+                    fill="url(#linearGradient-1)"
+                    transform="translate(13.56)"
+                  ></path>
+                  <path
+                    d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+                    fill="#F5F5F7"
+                  ></path>
+                  <path
+                    d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+                    fill="#DCE0E6"
+                  ></path>
+                </g>
+                <path
+                  d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+                  fill="#DCE0E6"
+                ></path>
+                <g transform="translate(149.65 15.383)" fill="#FFF">
+                  <ellipse
+                    cx="20.654"
+                    cy="3.167"
+                    rx="2.849"
+                    ry="2.815"
+                  ></ellipse>
+                  <path
+                    d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"
+                  ></path>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <div>No data</div>
+        </div>
+      </ng-template>
+    </div>
+  </ng-template>
 </div>
diff --git a/client/src/app/posts/posts.component.ts b/client/src/app/posts/posts.component.ts
@@ -94,20 +94,26 @@ export class PostsComponent implements OnInit {
         query: GET_POSTS,
         variables: this.variables,
       })
-      .valueChanges.subscribe(({ data, error }: any) => {
-        // Update posts and error data
-        this.posts = data.posts.edges;
-        this.error = error;
+      .valueChanges.subscribe(
+        ({ data, error }: any) => {
+          // Update posts and error data
+          this.posts = data.posts.edges;
+          this.error = error;
 
-        // Update the cursor for the next fetch
-        this.last_post = data.posts.edges[data.posts.edges.length - 1].cursor;
+          // Update the cursor for the next fetch
+          this.last_post = data.posts.edges[data.posts.edges.length - 1].cursor;
 
-        // Count the topics
-        this.countTopics(data.posts.edges);
+          // Count the topics
+          this.countTopics(data.posts.edges);
 
-        // Complete the loading process
-        this.toggleLoading();
-      });
+          // Complete the loading process
+          this.toggleLoading();
+        },
+        (error) => {
+          console.error('There was an error sending the query', error);
+          this.toggleLoading();
+        }
+      );
   }
 
   countTopics = (data: PostEdge[]) => {
@@ -124,8 +130,6 @@ export class PostsComponent implements OnInit {
 
     this.chartOptions.labels = Object.keys(this.topics);
     this.chartOptions.series = Object.values(this.topics);
-
-    console.log(this.topics);
   };
 
   // Append more posts data when scrolling
@@ -165,6 +169,10 @@ export class PostsComponent implements OnInit {
     this.appendPostsData();
   }
 
+  openUrl(url: string) {
+    window.open(url, '_blank');
+  }
+
   constructor(private apollo: Apollo) {
     this.chartOptions = {
       series: [],

diff --git a/client/src/assets/github-circle-white-transparent.svg b/client/src/assets/github-circle-white-transparent.svg