Skip to content

Commit 47fa616

Browse files
author
Tim Cuthbert
committed
basic questions - answers integration
1 parent faf9316 commit 47fa616

File tree

12 files changed

+147
-95
lines changed

12 files changed

+147
-95
lines changed

‎app/public/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body {
99
margin: 0;
1010
padding: 24px;
1111
box-sizing: border-box;
12-
max-width: 1200px;
12+
max-width: 900px;
1313
margin: 0 auto;
1414
}
1515

‎app/src/App.svelte‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// Search post from extension.ts on showInputBox()
1717
window.addEventListener("message", event => {
1818
eventAction = event.data.action;
19-
console.log("searchQuery", searchQuery);
19+
2020
if (event.data.action === "topPick") {
2121
questionId = event.data.questionId;
2222
gif = event.data.gif;
@@ -27,11 +27,11 @@
2727
searchQuery = event.data.query;
2828
section = "search";
2929
30-
const baseUri = "https://api.stackexchange.com/2.2/";
30+
const baseUri = "https://api.stackexchange.com/2.2";
3131
const filter = "!E-NkAUAPp-dl_BLxWqa1LE5g5C*VNBzgv9-ThQ";
3232
const key = "VP5SbX4dbH8MJUft7hjoaA((";
3333
const site = "stackoverflow";
34-
const uri = `${baseUri}search/advanced?q=${searchQuery}&page=1&pagesize=10&order=desc&sort=relevance&site=${site}&filter=${filter}&key=${key}`;
34+
const uri = `${baseUri}/search/advanced?q=${searchQuery}&page=1&pagesize=10&order=desc&sort=relevance&site=${site}&filter=${filter}&key=${key}`;
3535
3636
fetch(uri).then(response => {
3737
if (response.status === 200) {
@@ -40,7 +40,6 @@
4040
.json()
4141
.then(
4242
data => {
43-
console.log("searchData", data);
4443
searchData = data.items;
4544
totalResults = data.total;
4645
isLoading = false;
@@ -68,6 +67,11 @@
6867
function handleGotoSearch() {
6968
section = "search";
7069
}
70+
71+
// /common/tag
72+
function handleTagSearch(tag) {
73+
console.log("tag", tag.detail.tag);
74+
}
7175
</script>
7276

7377
<style>
@@ -115,6 +119,7 @@
115119
{:else if section === 'search'}
116120
<Search
117121
on:gotoQuestion={handleGotoQuestion}
122+
on:searchByTag={handleTagSearch}
118123
{searchQuery}
119124
{vscode}
120125
{searchData}

app/src/question/QuestionComments.svelte renamed to app/src/common/Comments.svelte

File renamed without changes.

‎app/src/common/Tag.svelte‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎app/src/common/Tags.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script>
2+
import { createEventDispatcher } from "svelte";
3+
export let tags;
4+
5+
const dispatch = createEventDispatcher();
6+
function searchByTag(tag) {
7+
dispatch("searchByTag", { tag: tag });
8+
}
9+
</script>
10+
11+
<style>
12+
.tag {
13+
background-color: var(--vscode-badge-background);
14+
color: var(--vscode-badge-foreground);
15+
padding: 0 4px 2px;
16+
margin-right: 4px;
17+
border-radius: 2px;
18+
font-size: 11px;
19+
cursor: pointer;
20+
}
21+
</style>
22+
23+
{#each tags as tag}
24+
<strong class="tag" on:click={() => searchByTag(tag)}>{tag}</strong>
25+
{/each}

app/src/question/QuestionUser.svelte renamed to app/src/common/User.svelte

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
export let user;
44
export let createdDate;
55
6+
console.log("user", user);
7+
68
const date = fromUnixTime(createdDate);
79
$: atTime = `asked ${format(date, "MMM dd")} '${format(
810
date,
@@ -49,18 +51,30 @@
4951
<div>
5052
{atTime}
5153
<br />
52-
<img
53-
src={user.profile_image}
54-
alt={user.display_name}
55-
height="32"
56-
width="32" />
57-
<a href={user.link} title="External Link: {user.link}">{user.display_name}</a>
54+
55+
{#if user.profile_image}
56+
<img
57+
src={user.profile_image}
58+
alt={user.display_name}
59+
height="32"
60+
width="32" />
61+
{/if}
62+
63+
{#if user.link}
64+
<a href={user.link} title="External Link: {user.link}">
65+
{user.display_name}
66+
</a>
67+
{:else}{user.display_name}{/if}
5868
<br />
59-
<strong>{rep}</strong>
60-
<span class="gold">●</span>
61-
{user.badge_counts.gold}
62-
<span class="silver">●</span>
63-
{user.badge_counts.silver}
64-
<span class="bronze">●</span>
65-
{user.badge_counts.bronze}
69+
{#if rep}
70+
<strong>{rep}</strong>
71+
{/if}
72+
{#if user.badge_counts}
73+
<span class="gold">●</span>
74+
{user.badge_counts.gold}
75+
<span class="silver">●</span>
76+
{user.badge_counts.silver}
77+
<span class="bronze">●</span>
78+
{user.badge_counts.bronze}
79+
{/if}
6680
</div>

‎app/src/question/Question.svelte‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<script>
22
import { createEventDispatcher } from "svelte";
33
import { fade } from "svelte/transition";
4-
import QuestionComments from "./QuestionComments.svelte";
5-
import QuestionUser from "./QuestionUser.svelte";
4+
import Comments from "../common/Comments.svelte";
5+
import User from "../common/User.svelte";
6+
import Tags from "../common/Tags.svelte";
67
import QuestionTitle from "./QuestionTitle.svelte";
78
import QuestionAnswer from "./QuestionAnswer.svelte";
89
import QuestionIndices from "./QuestionIndices.svelte";
910
import QuestionNotice from "./QuestionNotice.svelte";
1011
import QuestionClosed from "./QuestionClosed.svelte";
11-
import Tag from "../common/Tag.svelte";
1212
1313
export let questionId;
1414
export let gif;
1515
export let vscode;
1616
let question;
17+
let answers;
1718
18-
const baseUri = "https://api.stackexchange.com/2.2/";
19+
const baseUri = "https://api.stackexchange.com/2.2";
1920
const filter =
2021
"!846.ilK3D.2Pl0pgfPfmnelLqFsIyM(vhzUILxWBbRUYVMGZZc56l7wJcBD70KfJmVD"; // NB!! If this is changed PLEASE UPDATE the filters.md
2122
const key = "VP5SbX4dbH8MJUft7hjoaA((";
2223
const site = "stackoverflow";
23-
const uri = `${baseUri}questions/${questionId}?order=desc&sort=activity&site=${site}&filter=${filter}&key=${key}`;
24+
const uri = `${baseUri}/questions/${questionId}?order=desc&sort=activity&site=${site}&filter=${filter}&key=${key}`;
2425
2526
vscode.postMessage({
2627
command: "progress",
@@ -38,13 +39,7 @@
3839
.json()
3940
.then(questionData => {
4041
question = questionData.items[0];
41-
// Fetch answers page 1
42-
// const baseUriAnswers = "https://api.stackexchange.com/2.2/";
43-
// const filterAnswers =
44-
// "!*i5bc-n8Kaka(2FRl(J-bw8Z3rwRuHp(OQGhtQ6ITye3YjQT1q7a5PTE9i1E8.eAJPcta5"; // NB!! If this is changed PLEASE UPDATE the filters.md
45-
// const keyAnswers = "VP5SbX4dbH8MJUft7hjoaA((";
46-
// const siteAnswers = "stackoverflow";
47-
// const uriAnswers = `${baseUri}answers/${questionId}?order=desc&sort=votes&site=${site}&filter=${filter}&key=${key}`; */
42+
4843
vscode.postMessage({
4944
command: "progress",
5045
action: "stop"
@@ -127,19 +122,15 @@
127122
</div>
128123

129124
<div class="tags">
130-
{#each question.tags as tag}
131-
<Tag {tag} />
132-
{/each}
125+
<Tags tags={question.tags} />
133126
</div>
134127

135128
<div class="question-left-bottom">
136129
<div class="view-online">
137130
<a href={question.link} target="_blank">view online</a>
138131
</div>
139132

140-
<QuestionUser
141-
user={question.owner}
142-
createdDate={question.creation_date} />
133+
<User user={question.owner} createdDate={question.creation_date} />
143134
</div>
144135

145136
{#if question.closed_details}
@@ -153,7 +144,7 @@
153144
<QuestionNotice notice={question.notice} />
154145
{/if}
155146

156-
<QuestionComments comments={question.comments} />
147+
<Comments comments={question.comments} />
157148

158149
</div>
159150

@@ -162,18 +153,15 @@
162153
<div class="answers-count-container">
163154
{#if question.answer_count > 0}
164155
<h2>{question.answer_count} Answers</h2>
156+
{:else}
157+
<h1>No Answers</h1>
165158
{/if}
166159
</div>
167160

168-
<!-- <h2>{question.answer_count} Answers</h2>
169-
170-
{#if question.answers.length > 0}
171-
{#each question.answers as answer, i}
172-
{#if i < 10}
173-
<QuestionAnswer {answer} />
174-
{/if}
175-
{/each}
176-
{/if} -->
161+
<!-- ANSWERS -->
162+
{#if question.answer_count > 0}
163+
<QuestionAnswer {questionId} />
164+
{/if}
177165
{:else}
178166
<p>Loading Question...</p>
179167
{/if}

‎app/src/question/QuestionAnswer.svelte‎

Lines changed: 57 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,31 @@
11
<script>
2-
import QuestionComments from "./QuestionComments.svelte";
3-
import QuestionUser from "./QuestionUser.svelte";
4-
export let answer;
2+
import Comments from "../common/Comments.svelte";
3+
import User from "../common/User.svelte";
4+
import Tags from "../common/Tags.svelte";
5+
6+
export let questionId;
7+
let answers;
8+
9+
console.log("questionId", questionId);
10+
11+
// Fetch answers page 1
12+
const baseUri = "https://api.stackexchange.com/2.2";
13+
const filter = "!M7iu1KROAgtzactMhHlgZ19xUsGuQJ(WdBhiYR*(Bw_PhIcdWN*FF1u"; // NB!! If this is changed PLEASE UPDATE the filters.md
14+
const key = "VP5SbX4dbH8MJUft7hjoaA((";
15+
const site = "stackoverflow";
16+
const uri = `${baseUri}/questions/${questionId}/answers?order=desc&sort=activity&site=${site}&filter=${filter}&key=${key}`;
17+
18+
fetch(uri).then(response => {
19+
if (response.status === 200) {
20+
response
21+
.clone()
22+
.json()
23+
.then(answersData => {
24+
console.log("answers", answersData);
25+
answers = answersData.items;
26+
});
27+
}
28+
});
529
</script>
630

731
<style>
@@ -10,27 +34,34 @@
1034
}
1135
</style>
1236

13-
<div>
14-
<h2>
15-
<small>⯅</small>
16-
{answer.score}
17-
{#if answer.is_accepted}
18-
<svg
19-
aria-hidden="true"
20-
class="svg-icon iconCheckmarkLg"
21-
width="36"
22-
height="36"
23-
viewBox="0 0 36 36">
24-
<path d="M6 14l8 8L30 6v8L14 30l-8-8v-8z" />
25-
</svg>
37+
{#if answers}
38+
{#each answers as answer, i}
39+
<div>
40+
<h2>
41+
<small>⯅</small>
42+
{answer.score}
43+
{#if answer.is_accepted}
44+
<svg
45+
aria-hidden="true"
46+
class="svg-icon iconCheckmarkLg"
47+
width="36"
48+
height="36"
49+
viewBox="0 0 36 36">
50+
<path d="M6 14l8 8L30 6v8L14 30l-8-8v-8z" />
51+
</svg>
52+
{/if}
53+
</h2>
54+
</div>
55+
<div>
56+
{@html answer.body}
57+
</div>
58+
{#if answer.tags}
59+
<Tags tags={answer.tags} />
60+
{/if}
61+
<User user={answer.owner} createdDate={answer.creation_date} />
62+
<br />
63+
{#if answer.comments}
64+
<Comments comments={answer.comments} />
2665
{/if}
27-
</h2>
28-
<p>last activity: {answer.is_accepted}</p>
29-
<div>
30-
{@html answer.body}
31-
</div>
32-
<QuestionUser user={answer.owner} />
33-
<br />
34-
<h1>{answer.comment_count}</h1>
35-
<QuestionComments comments={answer.comments} />
36-
</div>
66+
{/each}
67+
{/if}

‎app/src/question/QuestionTitle.svelte‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
export let asked;
88
export let active;
99
export let viewed;
10+
11+
$: totalViews = kFormatter(viewed);
12+
13+
function kFormatter(num) {
14+
return Math.abs(num) > 999
15+
? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
16+
: Math.sign(num) * Math.abs(num);
17+
}
1018
</script>
1119

1220
<style>
@@ -40,7 +48,7 @@
4048
</span>
4149
Viewed
4250
<span>
43-
<strong>{viewed}</strong>
51+
<strong>{totalViews}</strong>
4452
times
4553
</span>
4654
</div>

‎app/src/search/Search.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@
2020
{:else if !isLoading && searchData.length === 0}
2121
<SearchNoResults {searchQuery} />
2222
{:else}
23-
<SearchResultBlock {searchData} on:gotoQuestion on:navigateBack />
23+
<SearchResultBlock {searchData} on:gotoQuestion on:searchByTag/>
2424
{/if}

0 commit comments

Comments
 (0)