88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
import IdeasApi from '../services/ideasApi';
|
|
import IdeaList from './IdeaList';
|
|
|
|
class IdeaForm {
|
|
constructor() {
|
|
this._formModal = document.querySelector('#form-modal');
|
|
//instantiating the idea list since it is a class
|
|
this._ideaList = new IdeaList();
|
|
}
|
|
|
|
//add all event listeners in a function
|
|
addEventListeners() {
|
|
this._form.addEventListener('submit', this.handleSubmit.bind(this));
|
|
}
|
|
|
|
async handleSubmit(e) {
|
|
//made this function async because we are dealing with a promise (axios)
|
|
e.preventDefault(); //stops the submit and allows us to determine when it should run
|
|
|
|
if (
|
|
!this._form.elements.text.value ||
|
|
!this._form.elements.tag.value ||
|
|
!this._form.elements.username.value
|
|
) {
|
|
alert('Please enter all fields');
|
|
return;
|
|
}
|
|
|
|
//save user to local storage
|
|
localStorage.setItem('username', this._form.elements.username.value);
|
|
|
|
//grabs values from the form
|
|
const idea = {
|
|
text: this._form.elements.text.value,
|
|
tag: this._form.elements.tag.value,
|
|
username: this._form.elements.username.value,
|
|
};
|
|
|
|
//add idea to database
|
|
const newIdea = await IdeasApi.createIdea(idea);
|
|
|
|
//add idea to list and call render on the DOM
|
|
this._ideaList.addIdeaToList(newIdea.data.data_base);
|
|
|
|
//clear form fields after submit
|
|
this._form.elements.text.value = '';
|
|
this._form.elements.tag.value = '';
|
|
this._form.elements.username.value = '';
|
|
this.render();
|
|
|
|
//using the dispatch event method of the document object to dispatch a custom event
|
|
//to the Modal from the IdeaForm, telling the Modal to close the form on submit
|
|
document.dispatchEvent(new Event('closemodal'));
|
|
}
|
|
|
|
//create a render function like react that will output the HTML
|
|
//adding a turnary to check for username and saved in localstorage
|
|
render() {
|
|
this._formModal.innerHTML = `
|
|
<form id="idea-form">
|
|
<div class="form-control">
|
|
<label for="idea-text">Enter a Username</label>
|
|
<input type="text" name="username" id="username"
|
|
value="${
|
|
localStorage.getItem('username')
|
|
? localStorage.getItem('username')
|
|
: ''
|
|
}" />
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="idea-text">What's Your Idea?</label>
|
|
<textarea name="text" id="idea-text"></textarea>
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="tag">Tag</label>
|
|
<input type="text" name="tag" id="tag" />
|
|
</div>
|
|
<button class="btn" type="submit" id="submit">Submit</button>
|
|
</form>`;
|
|
|
|
this._form = document.querySelector('#idea-form');
|
|
this.addEventListeners(); //added within the render function because the HTML above is only available
|
|
//in the DOM after the render function is called.
|
|
}
|
|
}
|
|
|
|
export default IdeaForm;
|