-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of github.com:rohithaug/UCSD-CSE-210-Team-12 into…
… tests-and-ci-setup
- Loading branch information
Showing
6 changed files
with
394 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| // IMPORT LIBRARIES | ||
| import React from "react"; | ||
|
|
||
| const SortButtonIcon = (props) => { | ||
| return ( | ||
| <svg | ||
| class="w-3 h-3 ms-1.5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 24 24" | ||
| {...props} | ||
| > | ||
| <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export default SortButtonIcon; |
183 changes: 183 additions & 0 deletions
183
client/src/pages/dashboard/components/blogPostMetrics.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| // IMPORT LIBRARIES | ||
| import React, { useState, useEffect } from 'react'; | ||
|
|
||
| // IMPORT ICONS | ||
| import SortButtonIcon from '@/assets/icons/sortButton'; | ||
|
|
||
| const BlogPostMetrics = () => { | ||
| const [blogPostMetrics, setBlogPostMetrics] = useState([]); | ||
| const [sortDirection, setSortDirection] = useState({ key: null, ascending: true }); | ||
|
|
||
| useEffect(() => { | ||
| const blogPostMetrics = [ | ||
| { | ||
| id: "blog-post-id", | ||
| name: "Blog Post Title", | ||
| visits: 0, | ||
| likes: 0, | ||
| dislikes: 0, | ||
| source: { | ||
| email: 0, | ||
| direct: 0, | ||
| home: 0 | ||
| } | ||
| }, | ||
| { | ||
| id: "blog-post-id", | ||
| name: "Blog Post Title", | ||
| visits: 5, | ||
| likes: 0, | ||
| dislikes: 0, | ||
| source: { | ||
| email: 1, | ||
| direct: 4, | ||
| home: 0 | ||
| } | ||
| }, | ||
| { | ||
| id: "blog-post-id", | ||
| name: "Blog Post Title", | ||
| visits: 4, | ||
| likes: 0, | ||
| dislikes: 0, | ||
| source: { | ||
| email: 0, | ||
| direct: 7, | ||
| home: 0 | ||
| } | ||
| } | ||
| ]; | ||
|
|
||
| setBlogPostMetrics(blogPostMetrics); | ||
| }, []); | ||
|
|
||
| const sortBlogPostMetrics = (key, subkey = null) => { | ||
| let tempBlogPostMetrics = [...blogPostMetrics]; | ||
| let newSortDirection = { key, ascending: true }; | ||
|
|
||
| if (key === "source") { | ||
| if (sortDirection.key === key && sortDirection.ascending) { | ||
| newSortDirection = { key, ascending: false }; | ||
| tempBlogPostMetrics.sort((a, b) => a.source[subkey] - b.source[subkey]); | ||
| } else { | ||
| tempBlogPostMetrics.sort((a, b) => b.source[subkey] - a.source[subkey]); | ||
| } | ||
| } else { | ||
| if (sortDirection.key === key && sortDirection.ascending) { | ||
| newSortDirection = { key, ascending: false }; | ||
| tempBlogPostMetrics.sort((a, b) => a[key] - b[key]); | ||
| } else { | ||
| tempBlogPostMetrics.sort((a, b) => b[key] - a[key]); | ||
| } | ||
| } | ||
|
|
||
| setBlogPostMetrics(tempBlogPostMetrics); | ||
| setSortDirection(newSortDirection); | ||
| } | ||
|
|
||
| return ( | ||
| <div class="relative overflow-x-auto shadow-md sm:rounded-lg mb-8"> | ||
| <table class="w-full text-sm text-left text-gray-500"> | ||
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | ||
| <tr> | ||
| <th scope="col" class="px-6 py-3"> | ||
| Blog Title | ||
| </th> | ||
| <th scope="col" class="px-6 py-3"> | ||
| <div class="flex items-center"> | ||
| Number of Views | ||
| <div | ||
| onClick={() => sortBlogPostMetrics("visits")} | ||
| > | ||
| <SortButtonIcon /> | ||
| </div> | ||
| </div> | ||
| </th> | ||
| <th scope="col" class="px-6 py-3"> | ||
| <div class="flex items-center"> | ||
| Source - Email | ||
| <div | ||
| onClick={() => sortBlogPostMetrics("source", "email")} | ||
| > | ||
| <SortButtonIcon /> | ||
| </div> | ||
| </div> | ||
| </th> | ||
| <th scope="col" class="px-6 py-3"> | ||
| <div class="flex items-center"> | ||
| Source - Direct | ||
| <div | ||
| onClick={() => sortBlogPostMetrics("source", "direct")} | ||
| > | ||
| <SortButtonIcon /> | ||
| </div> | ||
| </div> | ||
| </th> | ||
| <th scope="col" class="px-6 py-3"> | ||
| <div class="flex items-center"> | ||
| Source - Home | ||
| <div | ||
| onClick={() => sortBlogPostMetrics("source", "home")} | ||
| > | ||
| <SortButtonIcon /> | ||
| </div> | ||
| </div> | ||
| </th> | ||
| <th scope="col" class="px-6 py-3"> | ||
| <div class="flex items-center"> | ||
| Number of Likes | ||
| <div | ||
| onClick={() => sortBlogPostMetrics("likes")} | ||
| > | ||
| <SortButtonIcon /> | ||
| </div> | ||
| </div> | ||
| </th> | ||
| <th scope="col" class="px-6 py-3"> | ||
| <div class="flex items-center"> | ||
| Number of dislikes | ||
| <div | ||
| onClick={() => sortBlogPostMetrics("dislikes")} | ||
| > | ||
| <SortButtonIcon /> | ||
| </div> | ||
| </div> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody> | ||
| {blogPostMetrics.map((item, idx) => { | ||
| return ( | ||
| <tr key={idx} class="bg-white border-b"> | ||
| <th scope="row" class="px-6 py-4"> | ||
| <a href={`dashboard/${item.id}`} class="font-medium text-gray-900 whitespace-nowrap hover:text-blue-900 hover:underline">{item.name}</a> | ||
| </th> | ||
| <td class="px-6 py-4"> | ||
| {item.visits} | ||
| </td> | ||
| <td class="px-6 py-4"> | ||
| {item.source.email} | ||
| </td> | ||
| <td class="px-6 py-4"> | ||
| {item.source.direct} | ||
| </td> | ||
| <td class="px-6 py-4"> | ||
| {item.source.home} | ||
| </td> | ||
| <td class="px-6 py-4"> | ||
| {item.likes} | ||
| </td> | ||
| <td class="px-6 py-4"> | ||
| {item.dislikes} | ||
| </td> | ||
| </tr> | ||
| ) | ||
| })} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BlogPostMetrics; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.