Added Many Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-repos",
-  "version": "1.0.6",
+  "version": "1.0.11",
   "private": true,
   "scripts": {
     "serve": "node scripts/incrementVersion.js && vue-cli-service serve",

src/App.vue

@@ -1,27 +1,44 @@
 <template>
   <h1 class="display-3 fw-bold mt-5 mb-lg-10">My Repositories</h1>
-  <UserCard class="mx-auto" :user="user_data" />
+  <UserCard class="mx-auto mt-5" :user="user_data" />
   <hr class="mt-5 mb-5" />
+  <div class="input-group btn-toolbar mx-auto mb-5 justify-content-center">
+    <div class="input-group-text" id="btnGroupAddon">Sort By</div>
+    <button
+      type="button"
+      v-for="method in sortMethods"
+      :key="method.name"
+      class="btn btn-outline-secondary"
+      :class="{ active: method.name == currentSortMethods }"
+      @click="setSortMethod(method)"
+    >
+      {{ method.name }}
+    </button>
+
+    <!-- <button type="button" class="btn btn-outline-secondary">Stars</button>
+    <button type="button" class="btn btn-outline-secondary">Language</button> -->
+  </div>
   <div id="Cards" class="container-fluid row center mx-auto">
     <RepoCard
-      class="col-md-4 col-lg-3"
+      class="col-md-6 col-lg-4 col-xl-3"
       v-for="(repo, index) in repos_data"
       :key="repo.name"
       :repo="repo"
       :index="index + 1"
     />
   </div>
   <hr />
-  <form id="FooterBar" class="container-md justify-content-center">
+  <form id="FooterBar" class="container-md justify-content-center mb-2">
+    <label for="name"> Search Other User </label>
     <input
-      class="col-sm gx-5"
+      class="col-sm mx-2"
       type="text"
       id="SearchUser"
       placeholder="Leomotors"
       v-model.trim="user_to_view"
     />
     <button
-      class="col-sm gx-5 btn-success btn-sm"
+      class="col-sm mx-1 btn-success btn-sm"
       type="button"
       id="SearchBtn"
       @click.prevent="viewUser"
@@ -41,6 +58,38 @@ import { User, DefaultUser } from "@/backend/User";
 
 const default_user = "Leomotors";
 
+// * Sort from most to least
+const cmp = (a: number | string, b: number | string) => {
+  if (a > b) return -1;
+  else if (a < b) return 1;
+  else return 0;
+};
+
+const sortMethods = {
+  recent_updated: {
+    name: "Last Pushed",
+    func: (a: Repo, b: Repo): number => cmp(a.pushed_at, b.pushed_at),
+  },
+  recent_created: {
+    name: "Last Created",
+    func: (a: Repo, b: Repo): number => cmp(a.created_at, b.created_at),
+  },
+  most_stars: {
+    name: "Most Stars",
+    func: (a: Repo, b: Repo): number =>
+      cmp(a.stargazers_count, b.stargazers_count),
+  },
+  name: {
+    name: "Repo Name",
+    func: (a: Repo, b: Repo): number => cmp(b.name, a.name),
+  },
+  language: {
+    name: "Language",
+    func: (a: Repo, b: Repo): number =>
+      cmp(b.language ?? "Markdown", a.language ?? "Markdown"),
+  },
+};
+
 async function loadData(
   user: string
 ): Promise<{ user_data: User; repos_data: Repo[] }> {
@@ -78,13 +127,7 @@ async function loadData(
     if (robj.length < 100) break;
   }
 
-  repos_data.sort((a: Repo, b: Repo) => {
-    const ad = a.pushed_at;
-    const bd = b.pushed_at;
-    if (ad > bd) return -1;
-    else if (ad < bd) return 1;
-    else return 0;
-  });
+  repos_data.sort(sortMethods.recent_updated.func);
 
   console.log(`Successfully fetched all data of ${user}`);
   return { user_data, repos_data };
@@ -100,17 +143,27 @@ export default class App extends Vue {
   user_to_view = "";
   user_data: User = DefaultUser;
   repos_data: Repo[] = [];
+  sortMethods = sortMethods;
+  currentSortMethods = "Last Pushed";
 
   async created(): Promise<void> {
     const uri = window.location.search.substring(1);
     const params = new URLSearchParams(uri);
-    const target_user = params.get("user") ?? default_user;
+    const target_user = params.get("user") || default_user;
 
     const { user_data, repos_data } = await loadData(target_user);
     this.user_data = user_data;
     this.repos_data = repos_data;
   }
 
+  setSortMethod(method: {
+    name: string;
+    func: (a: Repo, b: Repo) => number;
+  }): void {
+    this.currentSortMethods = method.name;
+    this.repos_data.sort(method.func);
+  }
+
   viewUser(): void {
     window.location.href =
       window.location.href.split("?")[0] + `?user=${this.user_to_view}`;
@@ -128,8 +181,4 @@ export default class App extends Vue {
   text-align: center;
   color: #2c3e50;
 }
-
-// hr {
-//   margin: 5em;
-// }
 </style>

src/backend/Language.ts

@@ -33,9 +33,6 @@ const LanguageLogoData = {
   Dogescript: "https://dogescript.io/assets/img/logo-small.png",
 };
 
-export function LanguageLogo(lang: string): string {
-  /* eslint-disable @typescript-eslint/ban-ts-comment */
-  // @ts-ignore
+export function LanguageLogo(lang: keyof typeof LanguageLogoData): string {
   return LanguageLogoData[lang] ?? LanguageLogoData.DEFAULT;
-  /* eslint-enable */
 }

src/backend/Repo.ts

@@ -6,17 +6,7 @@ export interface UserShort {
   node_id: string;
   avatar_url: string;
   gravatar_id: string;
-  url: string;
   html_url: string;
-  followers_url: string;
-  following_url: string;
-  gists_url: string;
-  starred_url: string;
-  subscriptions_url: string;
-  organizations_url: string;
-  repos_url: string;
-  events_url: string;
-  recieved_events_url: string;
   type: string;
   site_admin: boolean;
 }
@@ -31,40 +21,6 @@ export interface Repo {
   html_url: string;
   description: string;
   fork: boolean;
-  keys_url: string;
-  collaborators_url: string;
-  teams_url: string;
-  issue_events_url: string;
-  events_url: string;
-  assignees_url: string;
-  branches_url: string;
-  tags_url: string;
-  blobs_url: string;
-  git_tags_url: string;
-  git_refs_url: string;
-  trees_url: string;
-  statuses_url: string;
-  languages_url: string;
-  stargazers_url: string;
-  contributors_url: string;
-  subscribers_url: string;
-  subscription_url: string;
-  commits_url: string;
-  git_commits_url: string;
-  comments_url: string;
-  issue_commit_url: string;
-  contents_url: string;
-  compare_url: string;
-  merges_url: string;
-  archive_url: string;
-  downloads_url: string;
-  issues_url: string;
-  pulls_url: string;
-  milestones_url: string;
-  notifications_url: string;
-  labels_url: string;
-  releases_url: string;
-  deployments_url: string;
   created_at: string;
   updated_at: string;
   pushed_at: string;

src/components/RepoCard.vue

@@ -30,7 +30,7 @@
           View Repo
         </button>
         <button
-          class="btn btn-outline-primary col-md-3"
+          class="btn btn-outline-primary col-md-3 ms-1"
           @click="openUrl(repo.homepage)"
           v-if="repo.homepage"
         >

src/components/UserCard.vue

@@ -1,29 +1,49 @@
 <template>
-  <div class="UserCard container-xl">
-    <div class="row">
-      <div
-        height="100%"
-        class="pfp col-md-2"
-        :style="{ backgroundImage: `url(${user.avatar_url})` }"
-      ></div>
-      <div class="col-lg-6">
-        <h3>{{ user.login }}</h3>
-        <p>{{ user.bio }}</p>
-        <p>Has {{ user.public_repos }} Public Repositories</p>
-        <div class="row mx-auto">
-          <button
-            class="btn btn-primary col-md-4"
-            @click="openUrl(user.html_url)"
-          >
-            Visit User Profile
-          </button>
-          <button
-            class="btn btn-outline-primary col-md-4"
-            @click="openUrl(`${user.html_url}?tab=repositories`)"
-          >
-            Visit User Repositories
-          </button>
-        </div>
+  <div class="UserCard container-xl row justify-content-start">
+    <div
+      height="100%"
+      class="pfp col-2"
+      :style="{ backgroundImage: `url(${user.avatar_url})` }"
+    ></div>
+    <div class="profile-info col-8">
+      <span class="h3 mx-1">{{ user.login }}</span>
+      <span class="h4 mx-1 text-muted" v-if="user.type == 'User' && user.name">
+        {{ user.name }}
+      </span>
+      <p class="mt-3">{{ user.bio }}</p>
+      <div class="user-repo-count d-flex flex-row justify-content-center">
+        <!-- * From F12 in https://github.com/ -->
+        <svg
+          aria-label="Repository"
+          role="img"
+          height="16"
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          data-view-component="true"
+          class="octicon octicon-repo"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
+          />
+        </svg>
+        <p>{{ user.public_repos }} Public Repositories</p>
+      </div>
+      <p v-if="user.type == 'User'">
+        {{ user.followers }} Followers {{ user.following }} Following
+      </p>
+
+      <div class="d-flex flex-row justify-content-center mx-auto">
+        <button class="btn btn-primary mx-2" @click="openUrl(user.html_url)">
+          Visit User Profile
+        </button>
+        <button
+          class="btn btn-outline-primary mx-2"
+          @click="openUrl(`${user.html_url}?tab=repositories`)"
+        >
+          Visit User Repositories
+        </button>
       </div>
     </div>
   </div>
@@ -49,29 +69,12 @@ export default class UserCard extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-#UserCard {
-  height: 200px;
-  width: 400px;
-  border-radius: 1em;
-
-  margin: 1em;
-  padding: 0.5em;
-}
-
 .pfp {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-#InnerCard {
-  display: flex;
-  flex-direction: row;
-  background-color: lavender;
-  border-radius: 1em;
-  padding: 1em;
-}
-
 a {
   color: black;
   text-decoration: none;