Skip to content

Commit 2c92bae

Browse files
michaelNgirimichaelNgiri
committed
2 parents 0821718 + 70aa4c2 commit 2c92bae

19 files changed

+499
-345
lines changed

‎.idea/workspace.xml

+249-147
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
# Fetch-API-Client
2-
A front end client that makes request to a backend API using fetch
2+
An ES6 front end API client that makes request to a backend API using fetch
33

4-
homepage: http://devpool-client.herokuapp.com
4+
homepage: http://devpool-client.herokuapp.com
5+
6+
7+
8+
[![Maintainability](https://api.codeclimate.com/v1/badges/c15ab3b0f6907b1526ce/maintainability)](https://codeclimate.com/github/michaelNgiri/Fetch-API-Client/maintainability)

‎all-questions.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@
3636
</ul>
3737
</div>
3838

39-
<script type="text/javascript" src="scripts/queries.js"></script>
40-
<script type="text/javascript" src="scripts/questions.js"></script>
41-
<script type="text/javascript" src="scripts/all-questions.js"></script>
42-
<script defer type="text/javascript" src="scripts/misc.js"></script>
39+
<script type="text/javascript" src="scripts/misc.js"></script>
40+
<script defer type="text/javascript" src="scripts/queries.js"></script>
41+
<script defer type="text/javascript" src="scripts/auth.js"></script>
42+
<script defer type="text/javascript" src="scripts/questions.js"></script>
43+
<script defer type="text/javascript" src="scripts/all-questions.js"></script>
4344
</body>
4445
</html>

‎ask-question.html

+6-8
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,15 @@ <h3>Ask a question</h3>
3636
<form method="post" onsubmit="return false" class="ask-question-form">
3737
<label for="ask-question-title">Title</label><br>
3838
<input onchange="checkValidQuestion()" type="text" name="question_title" id="ask-question-title"><br>
39-
<label id="ask-question-body-label" for="ask-question-body">Enter your Question here:</label><br>
40-
<textarea onchange="checkValidQuestion()" name="question" id="question-body" aria-invalid="false"> </textarea>
39+
<label id="ask-question-body-label" for="question-body">Enter your Question here:</label><br>
40+
<textarea onmouseout="checkValidQuestion()" onchange="checkValidQuestion()" name="question" id="question-body" aria-invalid="false"> </textarea>
4141
<input type="hidden" name="user_id" id="featured-question-id"><br>
42-
<button id="ask-question-submit-button" disabled="true" onclick="submitQuestion()">Submit</button>
42+
<button id="ask-question-submit-button" onclick="submitQuestion()">Submit</button><span id="saving-question-text">saving...</span>
4343
</form>
4444
</div>
4545

46-
47-
<script type="text/javascript" src="scripts/queries.js"></script>
48-
<script type="text/javascript" src="scripts/questions.js"></script>
49-
<!-- <script type="text/javascript" src="scripts/app.js"></script> -->
50-
<script defer type="text/javascript" src="scripts/misc.js"></script>
46+
<script type="text/javascript" src="scripts/misc.js"></script>
47+
<script defer type="text/javascript" src="scripts/ask-question.js"></script>
48+
<script type="text/javascript" src="scripts/auth.js"></script>
5149
</body>
5250
</html>

‎css/main.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -189,4 +189,4 @@ footer {
189189
width: 44vw;
190190
height: 4em;
191191
border-radius: 20px;
192-
}
192+
}

‎css/question.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,8 @@ height: 2em
2525
}
2626
#ask-question-submit-button:hover{
2727
background: #f3f3f3;
28-
cursor: not-allowed;
28+
/*cursor: not-allowed;*/
29+
}
30+
#saving-question-text{
31+
visibility: hidden;
2932
}

‎index.html

+4-6
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,7 @@
3434
<hr class="hr">
3535
<section>
3636

37-
<h2 style="float: right;">
38-
39-
</h2>
37+
4038
<!--heading-->
4139
<!--<h2 class="featured-heading">Featured question</h2>-->
4240
<h1 class="featured-question-title" id="featured-question-title"></h1>
@@ -78,9 +76,9 @@ <h3 id="answer-title">Answer this question</h3>
7876
<!--container for social links-->
7977

8078
</footer>
81-
<script defer type="text/javascript" src="scripts/misc.js"></script>
82-
<script type="text/javascript" src="scripts/queries.js"></script>
83-
<script type="text/javascript" src="scripts/app.js"></script>
79+
<script type="text/javascript" src="scripts/misc.js"></script>
80+
<script defer type="text/javascript" src="scripts/app.js"></script>
81+
<script defer type="text/javascript" src="scripts/queries.js"></script>
8482
<script defer type="text/javascript" src="scripts/main.js"></script>
8583
<script defer type="text/javascript" src="scripts/auth.js"></script>
8684
</body>

‎login.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,8 @@
4242
</form>
4343
</div>
4444

45-
46-
<script type="text/javascript" src="scripts/queries.js"></script>
47-
<script defer type="text/javascript" src="scripts/misc.js"></script>
45+
<script type="text/javascript" src="scripts/misc.js"></script>
46+
<script defer type="text/javascript" src="scripts/queries.js"></script>
4847
<script defer type="text/javascript" src="scripts/auth.js"></script>
4948
</body>
5049
</html>

‎my-questions.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
fetchAllQuestions()
3737
});
3838
</script>
39-
<script type="text/javascript" src="scripts/queries.js"></script>
40-
<script type="text/javascript" src="scripts/questions.js"></script>
41-
<script defer type="text/javascript" src="scripts/misc.js"></script>
39+
<script type="text/javascript" src="scripts/misc.js"></script>
40+
<script defer type="text/javascript" src="scripts/queries.js"></script>
41+
<script defer type="text/javascript" src="scripts/questions.js"></script>
4242
</body>
4343
</html>

‎profile.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
<a href="https://devpool-client.herokuapp.com/"><img class="profile-pic" src="img/avatar.jpg" alt="profile photo"></a>
2020
<div class="intro-summary">
2121
<ul class="menu-items-ul">
22-
<li role="menuitem"><a href="profile.html"><span class="menu-item">My Profile</span></a></li>
22+
<li role="menuitem"><a href="profile.html"><span class="menu-item">My Profile</span></a>
23+
24+
</li>
2325
<li><a href="ask-question.html"><span class="menu-item">Ask a question</span></a></li>
2426
<li><a href="my-questions.html"><span class="menu-item">My Questions</span></a></li>
2527
<li><a href="all-questions.html"><span class="menu-item">All Questions</span></a></li>
@@ -31,12 +33,11 @@
3133
</header>
3234
<hr class="hr">
3335
<div class="Profile">
34-
36+
<span></span>
3537
</div>
3638

37-
<script type="text/javascript" src="scripts/queries.js"></script>
38-
<script defer type="text/javascript" src="scripts/misc.js"></script>
39+
<script type="text/javascript" src="scripts/misc.js"></script>
40+
<script defer type="text/javascript" src="scripts/queries.js"></script>
3941
<script defer type="text/javascript" src="scripts/profile.js"></script>
40-
</script>
4142
</body>
4243
</html>

‎scripts/all-questions.js

-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +0,0 @@
1-
document.addEventListener("DOMContentLoaded", function(){
2-
fetchAllQuestions().then(
3-
console.log('all questions fetched')
4-
.catch(err =>{
5-
console.log(err);
6-
})
7-
)
8-
});

‎scripts/app.js

+49-53
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
document.addEventListener("DOMContentLoaded", function(){
1+
2+
const answerUrl = baseUrl+'questions/answers';
3+
4+
document.addEventListener("DOMContentLoaded", function(){
25

36
fetch(baseUrl+'questions/recent').then(response => {
47
return response.json();
58
}).then(data => {
69
// Work with JSON data here
710
console.log(data);
8-
getElementById('loading').style.visibility='hidden';
9-
getElementById('featured-question-title').innerHTML=data[0]['question_title'];
10-
getElementById('featured-question-body').innerHTML=data[0]['question_body'];
11-
getElementById('featured-question-id').setAttribute('value', data[0]['id']);
12-
getElementById('featured-question-user-id').setAttribute('value', data[0]['user_id']);
11+
findDom('loading').style.visibility='hidden';
12+
findDom('featured-question-title').innerHTML=data[0]['question_title'];
13+
findDom('featured-question-body').innerHTML=data[0]['question_body'];
14+
findDom('featured-question-id').setAttribute('value', data[0]['id']);
15+
findDom('featured-question-user-id').setAttribute('value', data[0]['user_id']);
1316
console.log(data[0]['id']);
14-
document.getElementById('answer-link').style.visibility='visible';
17+
findDom('answer-link').style.visibility='visible';
1518
id = data[0]['id'];
1619
fetchRecentQuestionAnswers(id);
1720
return data;
@@ -40,75 +43,68 @@ function fetchRecentQuestionAnswers(id){
4043
}
4144

4245

43-
function saveAnswer(questionId) {
44-
questionId = getElementById('featured-question-id').value;
45-
console.log(questionId);
46-
const userId = getElementById('featured-question-user-id').value;
47-
console.log(userId);
48-
const answer = getElementById('answer-body').value;
49-
console.log(answer);
5046

51-
const answerUrl = baseUrl+'questions/answers';
52-
const queryBody = 'question_id='+questionId+'&user_id='+userId+'&answer='+answer;
53-
console.log(queryBody);
5447

48+
function saveAnswer(questionId) {
49+
questionId = findDom('featured-question-id').value;
50+
const userId = findDom('featured-question-user-id').value;
51+
const answer = findDom('answer-body').value;
52+
const queryBody = 'question_id='+questionId+'&user_id='+userId+'&answer='+answer;
5553
//check if valid characters are entered in answer text
5654
if (typeof answer === "string" && answer.trim().length >= 5) {
57-
58-
5955
fetch(answerUrl,
6056
{
6157
method: 'post',
6258
headers: {
63-
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
64-
"authorization": localStorage.Authorization
59+
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8","authorization": localStorage.Authorization
6560
},
6661
body: queryBody
67-
})
68-
.then(response => {
62+
}).then(response => {
6963
return response.json();
7064
}).then(data => {
7165
if (data['status'] === 200) {
72-
getElementById('answer-body').value = '';
73-
getElementById('answer-form').style.visibility='hidden';
74-
getElementById('answer-again').style.visibility='visible';
75-
getElementById('answer-title').style.visibility='hidden';
76-
const answerStatus = getElementById('answer-status');
77-
answerStatus.innerHTML = 'your Answer was saved succesfully';
78-
answerStatus.style.color='green';
79-
answerStatus.style.visibility='visible';
66+
indicateSuccess();
8067
}else{
81-
getElementById('answer-status').style.color='red';
82-
getElementById('answer-body').style.border='1px solid red';
83-
const answerStatus = getElementById('answer-status');
84-
answerStatus.innerHTML = 'Failed to save! Login and try again';
85-
answerStatus.style.visibility='visible';
68+
indicateError();
8669
}
87-
// Work with JSON data here
88-
console.log(data['message']);
8970
}).catch(err => {
9071
console.log(err);
91-
// Do something for an error here
9272
});
73+
}else{
74+
showAnswerSaveError();
75+
}}
9376

94-
console.log(answerUrl);
9577

96-
}else{
97-
console.log('invalid answer text');
98-
const answerStatus = getElementById('answer-status');
99-
answerStatus.innerHTML = 'please type at least 5 characters';
100-
answerStatus.style.color='orange';
101-
answerStatus.style.visibility='visible';
102-
}
103-
}
10478

10579

10680
function showAnswerForm(){
107-
getElementById('answer-form').style.visibility='visible';
108-
getElementById('answer-again').style.visibility='hidden';
81+
findDom('answer-form').style.visibility='visible';
82+
findDom('answer-again').style.visibility='hidden';
10983
}
11084

111-
function getElementById(id){
112-
const dom = document.getElementById(id);
113-
return dom;
85+
function indicateSuccess(){
86+
findDom('answer-body').value = '';
87+
findDom('answer-form').style.visibility='hidden';
88+
findDom('answer-again').style.visibility='visible';
89+
findDom('answer-title').style.visibility='hidden';
90+
const answerStatus = findDom('answer-status');
91+
answerStatus.innerHTML = 'your Answer was saved succesfully';
92+
answerStatus.style.color='green';
93+
answerStatus.style.visibility='visible';
94+
}
95+
96+
function indicateError(){
97+
findDom('answer-status').style.color='red';
98+
findDom('answer-body').style.border='1px solid red';
99+
const answerStatus = findDom('answer-status');
100+
answerStatus.innerHTML = 'Failed to save! Login and try again';
101+
answerStatus.style.visibility='visible';
102+
}
103+
104+
function showAnswerSaveError(){
105+
console.log('invalid answer text');
106+
const answerStatus = findDom('answer-status');
107+
answerStatus.innerHTML = 'please type at least 5 characters';
108+
answerStatus.style.color='orange';
109+
answerStatus.style.visibility='visible';
114110
}

‎scripts/ask-question.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// document.addEventListener("DOMContentLoaded", function(){
2+
// fetchAllQuestions();
3+
// .then(
4+
// console.log('all questions fetched')
5+
// .catch(err =>{
6+
// console.log(err);
7+
// })
8+
// )
9+
// });
10+
11+
const url = baseUrl+"questions";
12+
let text;
13+
14+
function submitQuestion(){
15+
const values = pluckFormValues();
16+
console.log(values.question);
17+
console.log(Authorization);
18+
const body = 'question_title'+'='+values.title+'&'+'question'+'='+values.question+'&id'+'=1'+'&Authorization'+'='+localStorage.Authorization;
19+
document.getElementById('saving-question-text').style.visibility='visible';
20+
postQuestion(url,body);
21+
}
22+
23+
function checkValidQuestion(){
24+
const values = pluckFormValues();
25+
console.log(values.question);
26+
const submitQuestionButton = document.getElementById('ask-question-submit-button');
27+
console.log(values.title);
28+
if (values.title === "" || values.question.trim().length < 5) {
29+
submitQuestionButton.style.cursor='disabled';
30+
submitQuestionButton.setAttribute('disabled', 'disabled');
31+
}else{
32+
submitQuestionButton.style.cursor='default';
33+
submitQuestionButton.style.background='#0b948d';
34+
submitQuestionButton.removeAttribute('disabled');
35+
submitQuestionButton.setAttribute('cursor', 'grab');
36+
}
37+
38+
}
39+
40+
function pluckFormValues(){
41+
const title = document.getElementById('ask-question-title').value;
42+
const question = document.getElementById('question-body').value;
43+
return {
44+
title: title,
45+
question: question
46+
};
47+
}
48+
49+
function postQuestion(url, body) {
50+
if (!('fetch' in window)) {
51+
console.log('Fetch API not found, try including the polyfill');
52+
alert('fetch is disabled in your browser');
53+
return;
54+
}
55+
fetch(url,
56+
{
57+
method: 'post',
58+
headers: {
59+
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
60+
},
61+
body:body
62+
})
63+
.then(response => {
64+
document.getElementById('saving-question-text').innerText='saved';
65+
return response.json();
66+
}).then(data => {
67+
// Work with JSON data here
68+
Authorization = data
69+
}).catch(err => {
70+
document.getElementById('saving-question-text').innerText='failed to save! Login and try again';
71+
console.log(err);
72+
// Do something for an error here
73+
});
74+
}

0 commit comments

Comments
 (0)