create cancel button and refresh the page b00tc4mp#140

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
     }

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;
 }

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) {

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)
     }
 }

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;

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
+    }
 }

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)
         }
     }

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);
+}

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;
+}

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
     }
 }

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)
+        });
+    }
+}

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);
-}
+    background-color: black;
+}
+
+.SocialCode {
+    color: aliceblue;
+    margin-right: auto;
+}
+
+.FormWithFeedback .Field .Input {
+    width: 500px;
+}
+
+/* .FormWithFeedback .Field .Input .DescriptionField{
+    width: 00px !important;
+} */

staff/adrian-martin/socialcode/app/home/index.html

@@ -15,14 +15,17 @@
     <link rel="stylesheet" href="../component/core/SubmitButton.css">
     <!-- <link rel="stylesheet" href="../component/core/Form.css"> -->
 
+    <link rel="stylesheet" href="./components/Post.css">
     <link rel="stylesheet" href="../component/library/FormWithFeedback.css">
+    <link rel="stylesheet" href="./components/CreatepostForm.css">
 
 
 </head>
 <body>
-    <script src="../data.js"></script>
-
+    <script src="../data.js"></script>     
     <script src="../logic.js"></script>
+    <script src="../error.js"></script>
+
     <script src="../component/component.js"></script>
     <script src="../component/core/Button.js"></script>
     <script src="../component/core/Heading.js"></script>
@@ -36,6 +39,7 @@
 
     <script src="./components/Post.js"></script>
     <script src="./components/CreatePostForm.js"></script>
+    <script src="./components/PostList.js"></script>
 
     <script src="./index.js"></script>
 

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,14 +56,21 @@ createPostForm.onSubmit(event => {
     }
 })
 
-main.add(createPostForm)
+createPostForm.onCancelClick(event => {
+    event.preventDefault()
+
+    main.remove(createPostForm)
+})
 
 const footer = new Component('footer')
 footer.addClass('Footer')
 
 const addPostButton = new Button
 addPostButton.setText('+')
 
+addPostButton.onClick(() => main.add(createPostForm))
+
+header.add(appTitle)
 header.add(logoutButton)
 header.add(usernameTitle)