[UPT][#28] Handling user not found. Improved responsiveness. Added user search suggestions.

Author: ArielMAJ

vue-front/src/App.vue

@@ -5,23 +5,42 @@
       <v-text-field
         v-model="username"
         label="Search for a GitHub username"
-        hint="Write a GitHub username and press enter to visualize their account information"
+        hint="Write a GitHub username to visualize their account information"
         placeholder="ArielMAJ"
         clearable
         clear-icon="mdi-close-circle"
         type="text"
         variant="solo-filled"
-        :rules="[rules.required]"
-        @keyup.enter="search"
+        @keyup.enter="
+          pressedEnter = true;
+          search();
+        "
         @click:clear="cardOpen = false"
       >
       </v-text-field>
     </v-responsive>
     <UserCard
       :username="this.username"
       :reload-watcher="this.reloadCount"
+      :exampleUsernames="this.exampleUsernames"
       v-if="cardOpen"
     />
+    <v-responsive v-else max-width="1000" class="mx-auto">
+      <h3 class="text-center">Or choose one of the following</h3>
+      <v-chip-group class="justify-center">
+        <v-chip
+          v-for="exampleUsername in exampleUsernames"
+          :key="exampleUsername"
+          @click="
+            clickedFastSearch = true;
+            username = exampleUsername;
+            search();
+          "
+        >
+          {{ exampleUsername }}
+        </v-chip>
+      </v-chip-group>
+    </v-responsive>
   </div>
 </template>
 <script>
@@ -36,26 +55,47 @@ export default {
   data: function () {
     return {
       cardOpen: false,
-      rules: {
-        required: (value) => !!value || "Field is required",
-      },
       username: "",
       reloadCount: 0,
+      exampleUsernames: new Set([
+        "arielmaj",
+        "tauanesales",
+        "torvalds",
+        "octocat",
+        "defunkt",
+        "wouerner",
+        "mojombo",
+        "cs50",
+      ]),
+      clickedFastSearch: false,
+      pressedEnter: false,
     };
   },
   methods: {
     search() {
-      if (this.username !== "") {
-        this.reloadCount++;
-        this.cardOpen = true;
+      if (this.username === "" || this.username === null) {
+        this.cardOpen = false;
+        return;
       }
+      this.reloadCount++;
+      this.cardOpen = true;
     },
   },
   watch: {
     username: _.debounce(function () {
-      if (this.username !== "" && this.username !== null) {
-        this.search();
+      if (this.username === "" || this.username === null) {
+        this.cardOpen = false;
+        return;
+      }
+      if (this.clickedFastSearch) {
+        this.clickedFastSearch = false;
+        return;
+      }
+      if (this.pressedEnter) {
+        this.pressedEnter = false;
+        return;
       }
+      this.search();
     }, 1500),
   },
 };
@@ -89,6 +129,12 @@ body {
   justify-content: center;
 }
 
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }

vue-front/src/components/UserCard.vue

@@ -1,6 +1,11 @@
 <template>
   <v-responsive>
     <Loading v-if="this.userData === null" loadingComponentChoice="Dots" />
+    <div v-else-if="this.userData.notFound === true" class="flex-row">
+      <div class="card padding-3">
+        <h2>404: User Not Found</h2>
+      </div>
+    </div>
     <div v-else class="flex-row">
       <div class="card">
         <div class="flex-column no-wrap">
@@ -21,21 +26,25 @@
           <h2>{{ this.userData.name }}</h2>
           <p class="margin-bottom">{{ this.userData.bio }}</p>
           <ul class="margin-bottom">
-            <li><strong>Followers </strong> : {{ this.userData.followers }}</li>
-            <li><strong>Following </strong> : {{ this.userData.following }}</li>
             <li>
-              <strong>Repositories </strong> :
+              <strong>Followers:&nbsp;</strong> {{ this.userData.followers }}
+            </li>
+            <li>
+              <strong>Following:&nbsp;</strong> {{ this.userData.following }}
+            </li>
+            <li>
+              <strong>Repositories:&nbsp;</strong>
               {{ this.userData.public_repos }}
             </li>
           </ul>
           <ul class="second-desc margin-bottom">
             <li v-if="this.userData.location">
-              <strong>Location</strong> : {{ this.userData.location }}
+              <strong>Location:&nbsp;</strong> {{ this.userData.location }}
             </li>
           </ul>
           <ul class="margin-bottom">
             <li v-if="this.userData.created_at">
-              <strong>Created</strong> : {{ this.userData.created_at }}
+              <strong>Created:&nbsp;</strong> {{ this.userData.created_at }}
             </li>
           </ul>
           <Loading
@@ -52,7 +61,7 @@
             >
           </v-chip-group>
         </div>
-        <div class="external-buttons-column margin-right-auto">
+        <div class="external-buttons-column">
           <v-btn
             variant="plain"
             icon="mdi-github"
@@ -114,6 +123,10 @@ export default {
       type: Number,
       required: true,
     },
+    exampleUsernames: {
+      type: Set,
+      required: true,
+    },
   },
   data: function () {
     return { userData: null, userRepos: null, pieChartModalOpen: false };
@@ -131,7 +144,23 @@ export default {
         .then((response) => response.json())
         .then((data) => {
           this.userData = data;
-          console.log(this.userData);
+
+          if (
+            this.userData.message === "Not Found" ||
+            this.username === "" ||
+            this.username === null
+          ) {
+            this.userData = {
+              notFound: true,
+            };
+          }
+
+          this.exampleUsernames.add(this.username.toLowerCase());
+          if (this.exampleUsernames.size > 20) {
+            this.exampleUsernames.delete(
+              this.exampleUsernames.values().next().value
+            );
+          }
           moment.defaultFormat = "DD.MM.YYYY, HH:mm";
 
           this.userData.created_at = moment(this.userData.created_at).format(
@@ -201,25 +230,31 @@ export default {
 .card {
   max-width: min(85vw, 800px);
   background-color: gainsboro;
-  color: #000;
+  color: black;
   border-radius: 30px;
   box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
     0 15px 40px rgba(0, 0, 0, 0.1);
   display: flex;
   padding: 3rem;
+  padding-right: 0;
   font-size: 16px;
   margin: 20px auto;
 }
 
+.padding-3 {
+  padding: 3rem;
+}
+
 .avatar {
-  border-radius: 20%;
-  border: 10px solid #2a2a72;
+  border-radius: 30%;
+  border: 6px solid gray;
   height: 150px;
   width: 150px;
+  margin-bottom: 5px;
 }
 
 .user-info {
-  color: #000;
+  /* color: #000; */
   margin-left: 2rem;
 }
 
@@ -280,15 +315,16 @@ export default {
 .external-buttons-column {
   position: relative;
   top: -40px;
-  right: -115px;
+  right: -50px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  padding: 0px 15px;
+  /* padding: 0px 15px; */
   color: white;
+  margin: 0;
 }
 .card-external-buttons {
-  margin-right: auto;
+  margin: 0;
   margin-bottom: 10px;
 }
 
@@ -313,6 +349,7 @@ export default {
     flex-direction: column;
     align-items: center;
     padding: 1rem;
+    max-width: 90vw;
   }
 
   ul.second-desc {
@@ -325,16 +362,21 @@ export default {
   .external-buttons-column {
     flex-direction: row;
     color: black;
-    margin-top: 30px;
+    margin-right: auto;
     display: inline-block;
     top: 0;
     right: 0;
   }
+  .user-info {
+    /* color: #000; */
+    margin: auto;
+  }
 }
 
 @media (max-width: 450px) {
   .user-info ul {
-    display: none;
+    /* display: none; */
+    flex-wrap: wrap;
   }
 }
 </style>