feat: add no group found and search with prefix name (#835)

Author: surnr

__tests__/groups/group.test.js

@@ -257,4 +257,13 @@ describe('Discord Groups Page', () => {
 
     expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
   });
+
+  test('Should display no group found div when no group is present', async () => {
+    await page.goto(`${PAGE_URL}/groups?dev=true&name=no-group-present`);
+    await page.waitForNetworkIdle();
+
+    const noGroupDiv = await page.$('.no-group-container');
+
+    expect(noGroupDiv).toBeTruthy();
+  });
 });

groups/createElements.js

@@ -55,6 +55,22 @@ const createLoadingCard = () => {
   return cardElement;
 };
 
+const createNoGroupFound = () => {
+  const noGroupFound = document.createElement('div');
+  noGroupFound.classList.add('no-group');
+  noGroupFound.innerHTML = `
+        <svg class="icon" fill=currentColor viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+        </svg>
+        <div class="message">
+            <h2>No groups found</h2>
+            <p>Please try a different search input</p>
+        </div>
+    `;
+
+  return noGroupFound;
+};
+
 const createNavbarProfile = (profile) => {
   const profileElement = document.createElement('div');
   profileElement.className = 'profile';
@@ -201,6 +217,7 @@ const createGroupCreationModal = (onClose = () => {}, onSubmit = () => {}) => {
 export {
   createCard,
   createLoadingCard,
+  createNoGroupFound,
   createNavbarProfile,
   createNavbarProfileLoading,
   createNavbarProfileSignin,

groups/render.js

@@ -2,6 +2,7 @@ import {
   createCard,
   createGroupCreationModal,
   createLoadingCard,
+  createNoGroupFound,
   createNavbarProfile,
   createNavbarProfileLoading,
   createNavbarProfileSignin,
@@ -96,6 +97,14 @@ const renderGroupById = ({ group, cardOnClick = () => {} }) => {
   }
 };
 
+const renderNoGroupFound = () => {
+  const mainContainer = document.querySelector('.group-container');
+  const noGroupContainer = document.createElement('div');
+  noGroupContainer.className = 'no-group-container';
+  noGroupContainer.append(createNoGroupFound());
+  mainContainer.append(noGroupContainer);
+};
+
 export {
   renderNotAuthenticatedPage,
   renderGroupCreationModal,
@@ -107,4 +116,5 @@ export {
   renderLoadingCards,
   removeLoadingCards,
   renderGroupById,
+  renderNoGroupFound,
 };

groups/script.js

@@ -6,6 +6,7 @@ import {
   renderGroupById,
   renderGroupCreationModal,
   renderLoadingCards,
+  renderNoGroupFound,
   renderLoadingNavbarProfile,
   renderNavbarProfile,
   renderNavbarProfileSignin,
@@ -60,6 +61,7 @@ const handler = {
         renderAllGroups({
           cardOnClick: groupCardOnAction,
         });
+        if (isDev && (!value || value.length == 0)) renderNoGroupFound();
         break;
       case 'search':
         if (isDev) {

groups/style.css

@@ -404,6 +404,51 @@ body {
   width: 3rem;
 }
 
+.no-group-container {
+  grid-column-start: 1;
+  grid-column-end: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.no-group {
+  display: flex;
+  align-items: flex-start;
+  max-width: 400px;
+  width: 100%;
+  padding: 1.5rem;
+  background-color: var(--color-secondary-invert);
+  border-left: 4px solid var(--color-secondary);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px var(--color-list-border);
+
+  .icon {
+    flex-shrink: 0;
+    margin-right: 1rem;
+    width: 24px;
+    height: 24px;
+    color: var(--color-secondary);
+  }
+
+  .message {
+    flex-grow: 1;
+  }
+
+  .message h2 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.25rem;
+    color: var(--color-secondary);
+  }
+
+  .message p {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--color-secondary);
+  }
+}
+
 /*
     FOR Navbar
 */

groups/utils.js

@@ -134,7 +134,7 @@ function getDiscordGroupIdsFromSearch(groups, multipleGroupSearch) {
     .map((group) => group.trim().toLowerCase());
   const matchGroups = groups.filter((group) =>
     searchGroups.some((searchGroup) =>
-      group.title.toLowerCase().includes(searchGroup),
+      group.title.toLowerCase().startsWith(searchGroup),
     ),
   );
   return matchGroups.map((group) => group.id);