fix(js): index.js to index.ts and add type

src/App.svelte

@@ -12,8 +12,8 @@
 		[Views.Settings]: Settings,
 	};
 
-	let currentView = Views.List;
-	const onViewChange = view => (currentView = view);
+	let currentView: Views = Views.List;
+	const onViewChange = (view: Views) => (currentView = view);
 </script>
 
 <style>

src/components/Accounts/index.ts

@@ -0,0 +1 @@
+export { default } from './Accounts.svelte';

src/components/List/index.ts

@@ -0,0 +1 @@
+export { default } from './List.svelte';

src/components/Main/index.ts

@@ -0,0 +1 @@
+export { default } from './Main.svelte';

src/components/Navigation/Navigation.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import Icons from '../icons';
 	import { Views } from 'models/skizzle/ViewsEnum';
-	export let currentView;
-	export let onViewChange;
+	
+	export let currentView: Views;
+	export let onViewChange: Function;
 
-	const setView = view => () => onViewChange(view);
-	$: getClass = view => `${view} ${currentView === view ? 'selected' : ''}`;
-	$: getColor = view => (currentView === view ? `#fff` : '#d3d3d3');
+	const setView = (view: Views) => () => onViewChange(view);
+	$: getClass = (view: Views) => `${view} ${currentView === view ? 'selected' : ''}`;
+	$: getColor = (view: Views) => (currentView === view ? `#fff` : '#d3d3d3');
 </script>
 
 <style>

src/components/Navigation/index.ts

@@ -0,0 +1 @@
+export { default } from './Navigation.svelte';

src/components/Pullrequest/Pullrequest.svelte

@@ -3,8 +3,18 @@
   import type { PullRequestType } from "models/skizzle/PullRequestType";
   import { Service } from "services/Service";
   import Labels from '../Labels';
+  import { createEventDispatcher } from "svelte";
+  import { isFetchingData } from '../../shared/stores/default.store';
 
   export let pullRequest: PullRequestType;
+
+  const dispatch = createEventDispatcher();
+
+	const getComments = (pullRequest: PullRequestType) => {
+		dispatch('comments', {
+			fetchedComment: Service.getComments(pullRequest.provider, { pullRequest })
+		});
+	}
 </script>
 
 <style src="./PullRequest.scss"></style>
@@ -37,6 +47,7 @@
     <p class="skz-pullrequest__repo">{pullRequest.repositoryName}</p>
     <div class="skz-pullrequest-infos">
       <Labels labels={pullRequest.labels} />
+      <button on:click={() => getComments(pullRequest)} disabled={$isFetchingData}>Comments</button>
     </div>
 	</div>
-</div>
+</div>

src/components/Settings/index.ts

@@ -0,0 +1 @@
+export { default } from './Settings.svelte';

src/components/icons/accounts.svelte

@@ -1,5 +1,5 @@
-<script>
-	export let color;
+<script lang="ts">
+	export let color: string;
 </script>
 
 <svg

src/components/icons/list.svelte

@@ -1,5 +1,5 @@
-<script>
-	export let color;
+<script lang="ts">
+	export let color: string;
 </script>
 
 <svg

src/components/icons/settings.svelte

@@ -1,5 +1,5 @@
-<script>
-	export let color;
+<script lang="ts">
+	export let color: string;
 </script>
 
 <svg

src/pages/Home.svelte

@@ -1,8 +1,28 @@
 <script lang="ts">
 	import { pullRequests } from '../shared/stores/default.store';
 	import PullRequest from '../components/PullRequest';
+	import type { CommentType } from 'models/skizzle/CommentType';
+import { Service } from 'services/Service';
+
+	$: fetchedComments = Promise.resolve<CommentType[]>([])
 </script>
 
 {#each $pullRequests.sort((a, b) => Date.parse(b.date) - Date.parse(a.date)) as pullRequest}
-    <PullRequest {pullRequest} />
-{/each}
+    <PullRequest {pullRequest} on:comments={(event) => fetchedComments = event.detail.fetchedComment}/>
+{/each}
+
+<div style="color: white;">
+	{#await fetchedComments then comments}
+		{#each comments as comment}
+			{#await Service.getAvatar(comment.provider, comment.author.avatar, comment.organizationName) then avatar}
+				<img width="64" height="64" src={avatar} alt={comment.author.displayName} />
+			{/await}
+			<p>Name: {comment.author.displayName}</p>
+			<p>Date: {comment.date}</p>
+			<p>Text: {comment.text}</p>
+			<p>Provider: {comment.provider}</p>
+		{:else}
+			<p>Aucun commentaire</p>
+		{/each}
+	{/await}
+</div>