From daaef029dc168b6dde0be13f87e6f270f8e239ba Mon Sep 17 00:00:00 2001 From: Adrian Date: Wed, 8 May 2024 09:07:50 +0200 Subject: [PATCH] create cancel button and refresh the page #140 --- .../socialcode/app/component/component.js | 6 ++++ .../socialcode/app/component/core/Button.css | 3 +- .../socialcode/app/component/core/Button.js | 4 ++- .../app/component/core/SubmitButton.js | 3 +- .../component/library/FormWithFeedback.css | 4 ++- staff/adrian-martin/socialcode/app/data.js | 22 ++++++++++++- .../app/home/components/CreatePostForm.js | 20 +++++++++--- .../app/home/components/CreatepostForm.css | 9 ++++++ .../socialcode/app/home/components/Post.css | 31 +++++++++++++++++++ .../socialcode/app/home/components/Post.js | 23 ++++++++++++++ .../app/home/components/PostList.js | 23 ++++++++++++++ .../socialcode/app/home/index.css | 19 ++++++++++-- .../socialcode/app/home/index.html | 8 +++-- .../socialcode/app/home/index.js | 28 ++++++++++------- staff/adrian-martin/socialcode/app/logic.js | 9 +++++- 15 files changed, 185 insertions(+), 27 deletions(-) create mode 100644 staff/adrian-martin/socialcode/app/home/components/CreatepostForm.css create mode 100644 staff/adrian-martin/socialcode/app/home/components/Post.css create mode 100644 staff/adrian-martin/socialcode/app/home/components/PostList.js diff --git a/staff/adrian-martin/socialcode/app/component/component.js b/staff/adrian-martin/socialcode/app/component/component.js index aa4359d27..6ba9204ea 100644 --- a/staff/adrian-martin/socialcode/app/component/component.js +++ b/staff/adrian-martin/socialcode/app/component/component.js @@ -29,6 +29,12 @@ class Component { this.container.removeChild(child.container) } + removeAll() { + const children = this.children.concat() + + this.children.forEach(child => this.remove(child)) + } + setText(text) { this.container.innerText = text } diff --git a/staff/adrian-martin/socialcode/app/component/core/Button.css b/staff/adrian-martin/socialcode/app/component/core/Button.css index c99f8e4cf..793f937f7 100644 --- a/staff/adrian-martin/socialcode/app/component/core/Button.css +++ b/staff/adrian-martin/socialcode/app/component/core/Button.css @@ -1,5 +1,6 @@ .Button{ background-color: transparent; border: 1px solid var(--first-color); - padding: .6rem .7rem; + padding: .4rem .7rem; + cursor: pointer; } \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/component/core/Button.js b/staff/adrian-martin/socialcode/app/component/core/Button.js index 6acbefc57..25ba6b6d3 100644 --- a/staff/adrian-martin/socialcode/app/component/core/Button.js +++ b/staff/adrian-martin/socialcode/app/component/core/Button.js @@ -1,8 +1,10 @@ class Button extends Component { - constructor() { + constructor(text) { super('button') this.addClass('Button') + + if (text) this.setText(text) } setType(type) { diff --git a/staff/adrian-martin/socialcode/app/component/core/SubmitButton.js b/staff/adrian-martin/socialcode/app/component/core/SubmitButton.js index 5b5cfe46d..d7d966825 100644 --- a/staff/adrian-martin/socialcode/app/component/core/SubmitButton.js +++ b/staff/adrian-martin/socialcode/app/component/core/SubmitButton.js @@ -1,10 +1,9 @@ class SubmitButton extends Button{ constructor(text){ - super() + super(text) this.addClass('SubmitButton') this.setType('submit') - this.setText(text) } } \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/component/library/FormWithFeedback.css b/staff/adrian-martin/socialcode/app/component/library/FormWithFeedback.css index 3967b0ab3..5e94a9bb2 100644 --- a/staff/adrian-martin/socialcode/app/component/library/FormWithFeedback.css +++ b/staff/adrian-martin/socialcode/app/component/library/FormWithFeedback.css @@ -1,8 +1,10 @@ .FormWithFeedback{ - padding: rem; + + text-align: center; width: 400px; } + .FormWithFeedback .Input { background-color:var(--fourth-color); font-size: 1rem; diff --git a/staff/adrian-martin/socialcode/app/data.js b/staff/adrian-martin/socialcode/app/data.js index 0a4e3ac84..b471c9711 100644 --- a/staff/adrian-martin/socialcode/app/data.js +++ b/staff/adrian-martin/socialcode/app/data.js @@ -27,7 +27,7 @@ data.insertUser = user => { } data.findPosts = callback => { - const postsJson = localStorage.posts + let postsJson = localStorage.posts if(!postsJson) postsJson = '[]' @@ -45,9 +45,29 @@ data.insertPost = post => { const posts = JSON.parse(postsJson) + post.id = `${Math.random().toString().slice(2)}-${Date.now()}` + posts.push(post) postsJson = JSON.stringify(posts) localStorage.posts = postsJson +} + +data.deletePost = callback => { + let postsJson = localStorage.posts + + if(!postsJson) postsJson = '[]' + + const posts = JSON.parse(postsJson) + + const index = posts.findIndex(callback) + + if(index > -1){ + posts.splice(index, 1) + + postsJson = JSON.stringify(posts) + + localStorage.posts = postsJson + } } \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/home/components/CreatePostForm.js b/staff/adrian-martin/socialcode/app/home/components/CreatePostForm.js index d5d4937bb..93e366cb0 100644 --- a/staff/adrian-martin/socialcode/app/home/components/CreatePostForm.js +++ b/staff/adrian-martin/socialcode/app/home/components/CreatePostForm.js @@ -10,14 +10,20 @@ class CreatePostForm extends FormWithFeedback { const imageField = new Field('image', 'text', 'Image') imageField.setPlaceholder('image') - const descriptcionField = new Field('description', 'text', 'Descriptcion') - descriptcionField.setPlaceholder('descriptcion') + const descriptionField = new Field('description', 'text', 'Descriptcion') + descriptionField.addClass('DescriptionField') + descriptionField.setPlaceholder('descriptcion') + + const cancelButton = new Button('Cancel') + cancelButton.setType('button') + this.cancelButton = cancelButton const submitButton = new SubmitButton('Create') this.add(titleField) this.add(imageField) - this.add(descriptcionField) + this.add(descriptionField) + this.add(cancelButton) this.add(submitButton) } @@ -35,8 +41,12 @@ class CreatePostForm extends FormWithFeedback { } getDescription() { - const descriptcionField = this.children[2] + const descriptionField = this.children[2] - return descriptcionField.getValue() + return descriptionField.getValue() + } + + onCancelClick(listener) { + this.cancelButton.onClick(listener) } } diff --git a/staff/adrian-martin/socialcode/app/home/components/CreatepostForm.css b/staff/adrian-martin/socialcode/app/home/components/CreatepostForm.css new file mode 100644 index 000000000..09d0b0f00 --- /dev/null +++ b/staff/adrian-martin/socialcode/app/home/components/CreatepostForm.css @@ -0,0 +1,9 @@ +.CreatePostForm{ + position: fixed; + bottom: 4rem; + width: 100%; + left: 0; + background-color: var(--fourth-color); + border-top: 4px double var(--first-color); + border-bottom: 4px double var(--first-color); +} diff --git a/staff/adrian-martin/socialcode/app/home/components/Post.css b/staff/adrian-martin/socialcode/app/home/components/Post.css new file mode 100644 index 000000000..0d378bebf --- /dev/null +++ b/staff/adrian-martin/socialcode/app/home/components/Post.css @@ -0,0 +1,31 @@ +.Post{ + background-color: var(--fourth-color); + border: 10px double var(--first-color); + border-radius: 20px; + margin-bottom: 50px; + background-color: rgb(9, 0, 17); + padding: 40px; +} + +.AuthorTitle{ + color: aliceblue; + text-align: left; +} + +.PostTitle{ + color: var(--first-color); +} + +.Image{ + border: 2px solid var(--first-color); + border-radius: 15px; +} + +.Post .deleteButton{ + float: right; +} + +.deleteButton{ + margin-right: auto; + font-size: 17px; +} \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/home/components/Post.js b/staff/adrian-martin/socialcode/app/home/components/Post.js index cfed05610..18ba531f6 100644 --- a/staff/adrian-martin/socialcode/app/home/components/Post.js +++ b/staff/adrian-martin/socialcode/app/home/components/Post.js @@ -1,15 +1,20 @@ class Post extends Component{ constructor(post){ super('article') + + this.addClass('Post') const authorTitle = new Component authorTitle.setText(post.author) + authorTitle.addClass('AuthorTitle') const postTitle = new Component('h2') postTitle.setText(post.title) + postTitle.addClass('PostTitle') const postImage = new Image postImage.setUrl(post.image) + postImage.addClass('Image') const postDescription = new Component('p') postDescription.setText(post.description) @@ -22,5 +27,23 @@ class Post extends Component{ this.add(postImage) this.add(postDescription) this.add(postDate) + + if (post.author === logic.getLoggedInUsername()){ + const deleteButton = new Button('Delete') + + deleteButton.addClass('deleteButton') + + deleteButton.onClick(() => { + logic.deletePost(post.id) + + this.onPostDeletedListener() + }) + + this.add(deleteButton) + } + } + + onPostDeleted(listener) { + this.onPostDeletedListener = listener } } \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/home/components/PostList.js b/staff/adrian-martin/socialcode/app/home/components/PostList.js new file mode 100644 index 000000000..0e50e6fc4 --- /dev/null +++ b/staff/adrian-martin/socialcode/app/home/components/PostList.js @@ -0,0 +1,23 @@ +class PostList extends Component { + constructor() { + super('section') + + this.addClass('PostList') + + this.load() + } + + load() { + this.removeAll() + + const posts = logic.getAllPosts() + + posts.forEach(post => { + const post2 = new Post(post) + + post2.onPostDeleted(() => this.load()) + + this.add(post2) + }); + } +} \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/home/index.css b/staff/adrian-martin/socialcode/app/home/index.css index fc7882c57..51d81c309 100644 --- a/staff/adrian-martin/socialcode/app/home/index.css +++ b/staff/adrian-martin/socialcode/app/home/index.css @@ -10,12 +10,13 @@ display: flex; gap: 1rem; width: 100%; - justify-content: right; + justify-content: space-between; position: fixed; top: 0; padding: .5rem; box-sizing: border-box; border-bottom: 2px solid var(--first-color); + background-color: black; } .Footer{ @@ -26,4 +27,18 @@ bottom: 0; padding: 1rem; border-top: 2px solid var(--first-color); -} \ No newline at end of file + background-color: black; +} + +.SocialCode { + color: aliceblue; + margin-right: auto; +} + +.FormWithFeedback .Field .Input { + width: 500px; +} + +/* .FormWithFeedback .Field .Input .DescriptionField{ + width: 00px !important; +} */ \ No newline at end of file diff --git a/staff/adrian-martin/socialcode/app/home/index.html b/staff/adrian-martin/socialcode/app/home/index.html index d3bed430a..a8ccef801 100644 --- a/staff/adrian-martin/socialcode/app/home/index.html +++ b/staff/adrian-martin/socialcode/app/home/index.html @@ -15,14 +15,17 @@ + + - - + + + @@ -36,6 +39,7 @@ + diff --git a/staff/adrian-martin/socialcode/app/home/index.js b/staff/adrian-martin/socialcode/app/home/index.js index 2468d1783..065bf2346 100644 --- a/staff/adrian-martin/socialcode/app/home/index.js +++ b/staff/adrian-martin/socialcode/app/home/index.js @@ -12,6 +12,10 @@ const userName = logic.getUsername() const usernameTitle = new Heading(3) usernameTitle.setText(userName) +const appTitle = new Heading(3) +appTitle.setText('SocialCode') +appTitle.addClass('SocialCode') + const logoutButton = new Button logoutButton.setText('Logout') @@ -23,18 +27,9 @@ logoutButton.onClick( () => { const main = new Component('main') -const postList = new Component('section') - +const postList = new PostList() main.add(postList) -const posts = logic.getAllPosts() - -posts.forEach(post => { - const post2 = new Post(post) - - postList.add(post2) -}); - const createPostForm = new CreatePostForm createPostForm.onSubmit(event => { @@ -47,7 +42,11 @@ createPostForm.onSubmit(event => { try{ logic.createPost(title, image, description) + createPostForm.clear() + main.remove(createPostForm) + + postList.load() }catch (error){ if (error instanceof ContentError) createPostForm.setFeedback(error.message + '. please, repeat it') @@ -57,7 +56,11 @@ createPostForm.onSubmit(event => { } }) -main.add(createPostForm) +createPostForm.onCancelClick(event => { + event.preventDefault() + + main.remove(createPostForm) +}) const footer = new Component('footer') footer.addClass('Footer') @@ -65,6 +68,9 @@ footer.addClass('Footer') const addPostButton = new Button addPostButton.setText('+') +addPostButton.onClick(() => main.add(createPostForm)) + +header.add(appTitle) header.add(logoutButton) header.add(usernameTitle) diff --git a/staff/adrian-martin/socialcode/app/logic.js b/staff/adrian-martin/socialcode/app/logic.js index 23cbc727a..66b7e42db 100644 --- a/staff/adrian-martin/socialcode/app/logic.js +++ b/staff/adrian-martin/socialcode/app/logic.js @@ -90,6 +90,7 @@ const NAME_REGEX = /^[a-zA-Z=\[\]\{\}\<\>\(\)]{1,}$/ if(typeof description !== 'string' || !description.length || description.length > 200) throw new ContentError('description is not valid') const post = { + id: Date.now(), author: sessionStorage.username, title, image, @@ -98,4 +99,10 @@ const NAME_REGEX = /^[a-zA-Z=\[\]\{\}\<\>\(\)]{1,}$/ } data.insertPost(post) - } \ No newline at end of file + } + + logic.getLoggedInUsername = () => sessionStorage.username + + logic.deletePost = id => data.deletePost(post => post.id === id) + +