fix(avatar): fixing avatar and adding logout button (WIP)

src/components/AccountSummary/AccountSummary.svelte

@@ -1,19 +1,34 @@
 <script>
 	import { Service } from 'services/Service';
-	import { isFetchingData, organizations } from 'shared/stores/default.store';
+	import { isFetchingData, organizations, projects, pullRequests, repositories } from 'shared/stores/default.store';
 	import Settings from './settings.svg';
 	import Modale from 'components/Modale';
 	import AccountTitle from 'components/AccountTitle';
-	export let profile;
 	import {
 		checkOrganization,
 		checkProject,
 		checkRepository,
 		deleteRepository,
 	} from 'utils';
+	import type { ProviderEnum } from 'models/skizzle/ProviderEnum';
+	import { client } from 'shared/stores/authentication.store';
+	import type { ProfileType } from 'models/skizzle/ProfileType';
 
+	export let profile: ProfileType;
 	let isSettingsDisplayed = false;
+
 	const onModaleClose = () => (isSettingsDisplayed = false);
+
+	const logout = (provider: ProviderEnum) => {
+		organizations.reset(provider);
+		projects.reset(provider);
+		repositories.reset(provider);
+		pullRequests.reset(provider);
+		client.update(n => ({
+			...n,
+			[provider]: {},
+		}));
+	}
 </script>
 
 <style>
@@ -97,11 +112,7 @@
 
 <div class="container">
 	<div class="avatar">
-		{#if $organizations.length > 0}
-			{#await Service.getAvatar(profile.provider, profile.avatar, $organizations[0].organizationName) then avatar}
-				<img width="64" height="64" src={avatar} alt={profile.name} />
-			{/await}
-		{/if}
+		<img width="64" height="64" src={profile.avatar} alt={profile.name} />
 	</div>
 	<div class="user">
 		<span class="name">{profile.name}</span>
@@ -110,6 +121,8 @@
 	<button
 		class="settings"
 		on:click={() => (isSettingsDisplayed = !isSettingsDisplayed)}><Settings /></button>
+	<button
+		on:click={() => logout(profile.provider)}>Déconnexion</button>	
 </div>
 {#if isSettingsDisplayed}
 	<Modale onClose={onModaleClose}>
@@ -118,7 +131,7 @@
 		{:then organizations}
 			<div class="container header">
 				<div class="avatar big">
-					{#await Service.getAvatar(profile.provider, profile.avatar, organizations[0].organizationName) then avatar}
+					{#await Service.getAvatar(profile.provider, profile.descriptor, organizations[0].organizationName) then avatar}
 						<img width="64" height="64" src={avatar} alt={profile.name} />
 					{/await}
 				</div>

src/mappers/ProfileMapper.ts

@@ -8,11 +8,19 @@ export class ProfileMapper {
 	public to(o: AzureDevOpsProfileApiType, params: any): ProfileType;
 	public to(o: GithubProfileApiType, params: any): ProfileType;
 	public to(o: any, params: any): ProfileType {
+		let avatar = o.coreAttributes?.Avatar?.value?.value;
+
+		if (avatar) {
+			avatar = `data:image/png;base64,${avatar}`;
+		} else {
+			avatar = o.avatar_url;
+		}
+
 		return {
 			email: o.email || o.emailAddress,
 			id: o.id,
 			name: o.name || o.displayName,
-			avatar: o.avatar_url,
+			avatar: avatar,
 			...params,
 		};
 	}

src/mappers/PullRequestMapper.ts

@@ -25,7 +25,7 @@ export class PullRequestMapper {
 				});
 
 			return {
-				id: value.pullRequestId || value.number,
+				pullRequestId: value.pullRequestId || value.number,
 				title: value.title,
 				description: value.description || value.body,
 				date: value.creationDate || value.updated_at,

src/models/api/ProfileApiType.ts

@@ -1,9 +1,22 @@
 type ProfileApiType = {};
 
+type ValueType = {
+	value: string;
+};
+
+type AvatarType = {
+	value: ValueType;
+};
+
+type CoreAttributesType = {
+	Avatar: AvatarType;
+};
+
 type AzureDevOpsProfileApiType = {
 	displayName: string;
 	emailAddress: string;
 	id: string;
+	coreAttributes: CoreAttributesType;
 } & ProfileApiType;
 
 type GithubProfileApiType = {

src/models/skizzle/CommonType.ts

@@ -0,0 +1,11 @@
+import type { ProviderEnum } from './ProviderEnum';
+
+export type CommonType = {
+	pullRequestId?: string;
+	repositoryId?: string;
+	projectId?: string;
+	organizationName?: string;
+	repositoryName?: string;
+	projectName?: string;
+	provider?: ProviderEnum;
+};

src/models/skizzle/OrganizationType.ts

@@ -1,7 +1,5 @@
-import type { ProviderEnum } from './ProviderEnum';
+import type { CommonType } from './CommonType';
 
 export type OrganizationType = {
-	organizationName?: string;
 	checked?: boolean;
-	provider?: ProviderEnum;
-};
+} & CommonType;

src/models/skizzle/ProfileType.ts

@@ -5,5 +5,6 @@ export type ProfileType = {
 	email?: string;
 	id: string;
 	avatar?: string;
+	descriptor?: string;
 	provider?: ProviderEnum;
 };

src/models/skizzle/ProjectType.ts

@@ -1,9 +1,6 @@
-import type { ProviderEnum } from './ProviderEnum';
+import type { CommonType } from './CommonType';
 
 export type ProjectType = {
-	projectId: string;
 	name: string;
-	organizationName?: string;
 	checked: boolean;
-	provider: ProviderEnum;
-};
+} & CommonType;

src/models/skizzle/PullRequestType.ts

@@ -1,4 +1,4 @@
-import type { ProviderEnum } from './ProviderEnum';
+import type { CommonType } from './CommonType';
 
 type UserType = {
 	name: string;
@@ -10,20 +10,13 @@ type LabelType = {
 };
 
 type PullRequestType = {
-	id: string;
 	title: string;
 	description: string;
 	date: string;
 	dateStr: string;
 	user: UserType;
-	repositoryId?: string;
-	projectId?: string;
-	organizationName?: string;
-	repositoryName?: string;
-	projectName?: string;
 	owner?: string;
 	labels: LabelType[];
-	provider: ProviderEnum;
-};
+} & CommonType;
 
 export type { UserType, LabelType, PullRequestType };

src/models/skizzle/RepositoryType.ts

@@ -1,13 +1,8 @@
-import type { ProviderEnum } from './ProviderEnum';
+import type { CommonType } from './CommonType';
 
 export type RepositoryType = {
-	repositoryId: string;
 	name: string;
 	fullName?: string;
-	projectId?: string;
-	projectName?: string;
-	organizationName?: string;
 	owner?: string;
 	checked: boolean;
-	provider: ProviderEnum;
-};
+} & CommonType;

src/requesters/OAuthAzureDevOps.requester.ts

@@ -45,7 +45,7 @@ export class OAuthAzureDevOpsRequester extends Requester<OAuthAzureDevOpsConfigT
 
 	public async getProfile(userId: string): Promise<AzureDevOpsProfileApiType> {
 		return super.fetch(
-			`https://app.vssps.visualstudio.com/_apis/profile/profiles/${userId}?api-version=${this.API_VERSION}`,
+			`https://app.vssps.visualstudio.com/_apis/profile/profiles/${userId}?details=true&api-version=${this.API_VERSION}`,
 		);
 	}
 

src/services/OAuthAzureDevOps.service.ts

@@ -44,7 +44,7 @@ export class OAuthAzureDevOpsService implements IService {
 
 		const profileMapped = profileMapper.to(profile, {
 			provider: this.provider,
-			avatar: descriptor,
+			descriptor,
 		});
 
 		return profileMapped;
@@ -135,13 +135,18 @@ export class OAuthAzureDevOpsService implements IService {
 	public async getComments({
 		pullRequest,
 	}: ServiceParams): Promise<CommentType[]> {
-		const { repositoryId, id, projectId, organizationName } = pullRequest;
+		const {
+			repositoryId,
+			pullRequestId,
+			projectId,
+			organizationName,
+		} = pullRequest;
 
 		const result = await this.requester.getComments(
 			organizationName,
 			projectId,
 			repositoryId,
-			id,
+			pullRequestId,
 		);
 		result.forEach(
 			comment =>

src/services/Service.ts

@@ -18,7 +18,6 @@ export type ServiceParams = {
 	repository?: RepositoryType;
 	pullRequest?: PullRequestType;
 };
-
 export interface IService {
 	getProfile(userId?: string): Promise<ProfileType>;
 	getAvatar(params: string, organizationName?: string): Promise<string>;

src/shared/stores/authentication.store.ts

@@ -19,18 +19,21 @@ import { createStore } from './store';
  */
 export const client = createStore<Dictionary<OAuthConfigType>>(
 	{},
-	'clientToken',
+	{ key: 'clientToken' },
 );
 export const clientHasProvider = (provider: ProviderEnum): boolean => {
 	const value = get(client) as Dictionary<OAuthConfigType>;
 
 	return value && value.hasOwnProperty(provider);
 };
 
-export const clientAuthenticated = createStore({
-	isGithubAuthenticated: false,
-	isAzureDevOpsAuthenticated: false,
-});
+export const clientAuthenticated = createStore(
+	{
+		isGithubAuthenticated: false,
+		isAzureDevOpsAuthenticated: false,
+	},
+	{},
+);
 
 const timer: Dictionary<NodeJS.Timeout> = {};
 

src/shared/stores/default.store.ts

@@ -1,30 +1,50 @@
+import type { CommonType } from 'models/skizzle/CommonType';
 import type { OrganizationType } from 'models/skizzle/OrganizationType';
 import type { ProjectType } from 'models/skizzle/ProjectType';
+import type { ProviderEnum } from 'models/skizzle/ProviderEnum';
 import type { PullRequestType } from 'models/skizzle/PullRequestType';
 import type { RepositoryType } from 'models/skizzle/RepositoryType';
 import type { SettingsType } from 'models/skizzle/SettingsType';
-import { Service } from 'services/Service';
+import { Service, ServiceParams } from 'services/Service';
 import { get } from 'svelte/store';
 import { createStore } from './store';
 const app = require('electron').ipcRenderer;
 
-export const isLoading = createStore<boolean>(false);
-export const isFetchingData = createStore<boolean>(false);
-export const organizations = createStore<OrganizationType[]>(
-	[],
-	'organizations',
-);
-export const projects = createStore<ProjectType[]>([], 'projects');
-export const repositories = createStore<RepositoryType[]>([], 'repositories');
-export const pullRequests = createStore<PullRequestType[]>([], 'pullRequests');
+export const isLoading = createStore<boolean>(false, {});
+export const isFetchingData = createStore<boolean>(false, {});
 export const settings = createStore<SettingsType>(
 	{
 		refresh_delay: 1,
 		proxy: '',
 	},
-	'settings',
+	{ key: 'settings' },
 );
 
+const predicate = <T extends CommonType>(
+	value: T[],
+	provider: ProviderEnum,
+): T[] => {
+	return value.filter(x => x.provider !== provider);
+};
+
+export const organizations = createStore<OrganizationType[]>([], {
+	key: 'organizations',
+	predicate,
+});
+
+export const projects = createStore<ProjectType[]>([], {
+	key: 'projects',
+	predicate,
+});
+export const repositories = createStore<RepositoryType[]>([], {
+	key: 'repositories',
+	predicate,
+});
+export const pullRequests = createStore<PullRequestType[]>([], {
+	key: 'pullRequests',
+	predicate,
+});
+
 let timer: NodeJS.Timeout;
 
 export const refreshPullRequests = async () => {
@@ -46,7 +66,10 @@ export const refreshPullRequests = async () => {
 		}
 
 		const newValues = result.filter(
-			pullRequest => !oldValues.some(({ id }) => pullRequest.id === id),
+			pullRequest =>
+				!oldValues.some(
+					({ pullRequestId }) => pullRequest.pullRequestId === pullRequestId,
+				),
 		);
 
 		if (newValues.length > 0) {

src/shared/stores/store.ts

@@ -1,7 +1,14 @@
+import type { ProviderEnum } from 'models/skizzle/ProviderEnum';
 import { addItem, getItem } from 'shared/utils';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
-export const createStore = <T>(initialValue: T, key?: string) => {
+export const createStore = <T>(
+	initialValue: T,
+	{
+		key,
+		predicate,
+	}: { key?: string; predicate?: (value?: T, provider?: ProviderEnum) => T },
+) => {
 	const storage = getItem<T>(key);
 
 	const store = writable(storage ? storage : initialValue);
@@ -15,7 +22,13 @@ export const createStore = <T>(initialValue: T, key?: string) => {
 		set,
 		subscribe,
 		update,
-		reset: () => set(initialValue),
+		reset: (provider?: ProviderEnum) => {
+			if (predicate) {
+				set(predicate(get(store), provider));
+			} else {
+				set(initialValue);
+			}
+		},
 		initialValue,
 	};
 };