From c8cc824e26d4b198fa847374b5ba6514e6a53c25 Mon Sep 17 00:00:00 2001 From: Gurkirat Singh Date: Mon, 21 Jun 2021 00:23:36 +0530 Subject: [PATCH 1/3] auth fix + GithubAPI + Types --- .eslintrc.js | 1 + package-lock.json | 11 +++++-- package.json | 1 + src/App.vue | 14 +++++++++ src/api/github.ts | 27 +++++++++++++++++ src/api/helper.ts | 20 +++++++++++++ src/components/TheNavbar.vue | 43 ++++++++++++++++++++++++++-- src/components/TheNewProjectForm.vue | 27 +++++++++-------- src/router/index.ts | 6 ++-- src/store/index.ts | 42 +++++++++++++++------------ src/utils/types.ts | 15 ++++++++++ src/views/NewProject.vue | 14 +++++++++ 12 files changed, 183 insertions(+), 38 deletions(-) create mode 100644 src/api/github.ts create mode 100644 src/api/helper.ts create mode 100644 src/utils/types.ts create mode 100644 src/views/NewProject.vue diff --git a/.eslintrc.js b/.eslintrc.js index d7fea5f..118a649 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,5 +14,6 @@ module.exports = { rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + '@typescript-eslint/no-explicit-any': 'off', }, }; diff --git a/package-lock.json b/package-lock.json index e124a9c..3e7b0e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3223,6 +3223,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "babel-code-frame": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", @@ -6495,8 +6503,7 @@ "follow-redirects": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", - "dev": true + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" }, "for-in": { "version": "1.0.2", diff --git a/package.json b/package.json index a9e8dad..b769afa 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "axios": "^0.21.1", "core-js": "^3.6.5", "firebase": "^8.6.8", "vue": "^2.6.11", diff --git a/src/App.vue b/src/App.vue index da6f1ea..16e2e1d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,6 @@ diff --git a/src/components/TheNewProjectForm.vue b/src/components/TheNewProjectForm.vue index ce10843..30653c0 100644 --- a/src/components/TheNewProjectForm.vue +++ b/src/components/TheNewProjectForm.vue @@ -52,19 +52,22 @@ diff --git a/src/router/index.ts b/src/router/index.ts index 6744d81..1bfcb13 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -11,13 +11,13 @@ const routes: Array = [ component: Home, }, { - path: '/about', - name: 'About', + path: '/new-project', + name: 'New', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => - import(/* webpackChunkName: "about" */ '../views/About.vue'), + import(/* webpackChunkName: "about" */ '../views/NewProject.vue'), }, ]; diff --git a/src/store/index.ts b/src/store/index.ts index 4d6db0d..4934a3a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,16 +1,17 @@ import Vue from 'vue'; import Vuex from 'vuex'; import firebase from 'firebase'; -import { auth, provider, usersCollection } from '@/firebase' +import { auth, provider, usersCollection } from '@/firebase'; import router from '@/router'; Vue.use(Vuex); export default new Vuex.Store({ state: { + authLoading: false, authenticated: false, - accessToken: "", // github access token to acces the github api - userProfile: {} // user profile object + accessToken: '', // github access token to acces the github api + userProfile: {}, // user profile object }, mutations: { setUserProfile(state, val) { @@ -21,50 +22,55 @@ export default new Vuex.Store({ }, setAuthenticated(state, val: boolean) { state.authenticated = val; - } + }, + setAuthLoading(state, val: boolean) { + state.authLoading = val; + }, }, actions: { async login({ dispatch, commit }) { try { - const result = await auth.signInWithPopup(provider) + commit('setAuthLoading', true); + const result = await auth.signInWithPopup(provider); /** @type {firebase.auth.OAuthCredential} */ - const credential = result.credential; - // This gives you a GitHub Access Token. You can use it to access the GitHub API. + const credential = ( + result.credential + ); + const user = result.user; const token = credential.accessToken; dispatch('fetchUserProfile', user); commit('setAccessToken', token); } catch (error) { - // Handle Errors here. + commit('setAuthLoading', false); const errorCode = error.code; const errorMessage = error.message; - // // The email of the user's account used. const email = error.email; - // // The firebase.auth.AuthCredential type that was used. const credential = error.credential; } }, async fetchUserProfile({ commit }, user) { - const userProfile = await usersCollection.doc(user.uid).get() + const userProfile = await usersCollection.doc(user.uid).get(); if (!userProfile.exists) { usersCollection.doc(user.uid).set({ username: user.displayName, - email: user.email - }) + email: user.email, + }); } - commit('setUserProfile', userProfile.data()) + commit('setUserProfile', userProfile.data()); commit('setAuthenticated', true); - router.push('/') + commit('setAuthLoading', false); + router.push('/'); }, - async signOut({ commit }) { + async logout({ commit }) { try { - const result = await auth.signOut() + const result = await auth.signOut(); commit('setAuthenticated', false); } catch (error) { const errorCode = error.code; const errorMessage = error.message; } - } + }, }, modules: {}, }); diff --git a/src/utils/types.ts b/src/utils/types.ts new file mode 100644 index 0000000..7eeb67b --- /dev/null +++ b/src/utils/types.ts @@ -0,0 +1,15 @@ +export interface User { + uid: string; + name: string; + email: string; +} + +export interface Repo { + uid: string; + name: string; + ownerUID: string; + shortDes: string; + longDes: string; + link: string; + topics: string[]; +} diff --git a/src/views/NewProject.vue b/src/views/NewProject.vue new file mode 100644 index 0000000..6f10aa6 --- /dev/null +++ b/src/views/NewProject.vue @@ -0,0 +1,14 @@ + + + From 2df3a5ed84d5148e5f6356bac208e97762bdf84c Mon Sep 17 00:00:00 2001 From: Gurkirat Singh Date: Mon, 21 Jun 2021 00:50:46 +0530 Subject: [PATCH 2/3] add Link Parser --- src/api/github.ts | 23 +++++++++++++---------- src/utils/parsers.ts | 19 +++++++++++++++++++ src/utils/types.ts | 5 +++++ src/views/Home.vue | 15 ++++++++++++--- 4 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 src/utils/parsers.ts diff --git a/src/api/github.ts b/src/api/github.ts index 1f0cfb0..845ad60 100644 --- a/src/api/github.ts +++ b/src/api/github.ts @@ -1,21 +1,24 @@ import { Repo } from '@/utils/types'; -import { AxiosRequestConfig } from 'axios'; import apiHelpers from './helper'; +import { GithubRepoIndentifier } from '@/utils/types'; -const defaultConfig: AxiosRequestConfig = { - headers: { - Accept: 'application/vnd.github.v3+json', - }, -}; +const baseURL = 'https://api.github.com'; const GithubAPI = { - async getRepo(repoLink: string): Promise> { - const repoRes = await apiHelpers.get(repoLink, defaultConfig); + async getRepo(repoIden: GithubRepoIndentifier): Promise> { + const repoRes = await apiHelpers.get( + baseURL + `/repos/${repoIden.owner}/${repoIden.repo}`, + { + headers: { + Accept: 'application/vnd.github.v3+json', + }, + } + ); const repo: Partial = { name: repoRes.name, shortDes: repoRes.description, - link: repoLink, - topics: repoRes.topics, + link: repoRes.html_url, + topics: repoRes.topics || [], }; const readmeLink = `https://raw.githubusercontent.com/${repoRes.owner.login}/${repo.name}/${repoRes.default_branch}/README.md`; const readmeString = await apiHelpers.get(readmeLink); diff --git a/src/utils/parsers.ts b/src/utils/parsers.ts new file mode 100644 index 0000000..036e7df --- /dev/null +++ b/src/utils/parsers.ts @@ -0,0 +1,19 @@ +import { GithubRepoIndentifier } from './types'; + +const Parsers = { + parseRepoLink(link: string): GithubRepoIndentifier | null { + const url = new URL(link); + + if (url.host != 'github.com') return null; + else { + const split = url.pathname.split('/'); + const repo: GithubRepoIndentifier = { + owner: split[1], + repo: split[2], + }; + return repo; + } + }, +}; + +export default Parsers; diff --git a/src/utils/types.ts b/src/utils/types.ts index 7eeb67b..ff64f54 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -13,3 +13,8 @@ export interface Repo { link: string; topics: string[]; } + +export type GithubRepoIndentifier = { + owner: string; + repo: string; +}; diff --git a/src/views/Home.vue b/src/views/Home.vue index 091eb3c..116c5cc 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,18 +1,27 @@