add create post with click, refresh list and other details; #129

staff/jose-pozo/socialcode/app/components/Component.js

@@ -11,7 +11,7 @@ class Component {
     }
 
     add(child) {
-        if (!(child instanceof Component)) throw new error TypeErrror('child is not component')
+        if (!(child instanceof Component)) throw new TypeError('child is not component')
 
         this.children.push(child)
 
@@ -26,7 +26,8 @@ class Component {
         if (index > -1)
             this.children.splice(index, 1)
 
-        this.container.removeChild(child.container)
+        if (this.container.contains(child.container))
+            this.container.removeChild(child.container)
     }
 
     setText(text) {

staff/jose-pozo/socialcode/app/components/core/Button.css

@@ -1,6 +1,7 @@
 .Button {
     padding: .4rem;
-    background-color: transparent;
+    background-color: #17191e;
     font-size: 1rem;
     border: 1px solid var(--first-color);
+    border-radius: 0.3rem;
 }

staff/jose-pozo/socialcode/app/components/core/Field.js

@@ -4,11 +4,11 @@ class Field extends Component {
 
         this.addClass('Field')
 
-        const label = new label
+        const label = new Label
         label.setText(text)
         label.setFor(id)
 
-        const input = new input
+        const input = new Input
         input.setId(id)
         input.setType(type)
 

staff/jose-pozo/socialcode/app/components/core/Input.css

@@ -3,4 +3,5 @@
     background-color: transparent;
     font-size: 1rem;
     border: 1px solid var(--first-color);
+    border-radius: 0.3rem;
 }

staff/jose-pozo/socialcode/app/components/core/Input.js

@@ -1,4 +1,4 @@
-class Input extends Compnent {
+class Input extends Component {
     constructor() {
         super('input')
 

staff/jose-pozo/socialcode/app/components/core/Label.js

@@ -1,6 +1,8 @@
 class Label extends Component {
     constructor() {
         super('label')
+
+        this.addClass('Label')
     }
 
     setFor(id) {

staff/jose-pozo/socialcode/app/components/core/SubmitButton.js

@@ -2,7 +2,7 @@ class SubmitButton extends Button {
     constructor(text) {
         super()
 
-        this.addClass('submitButton')
+        this.addClass('SubmitButton')
 
         this.setType('submit')
         this.setText(text)

staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.js

@@ -4,15 +4,15 @@ class FormWithFeedback extends Form {
 
         this.addClass('FormWithFeedback')
 
-        const feedbackPanel = new CompositionEvent('p')
+        const feedbackPanel = new Component('p')
         feedbackPanel.addClass('Feedback')
 
         this.feedbackPanel = feedbackPanel
     }
 
     setFeedback(message, level) {
-        if (level === 'succes')
-            this.feedbackPanel.addClass('succes')
+        if (level === 'success')
+            this.feedbackPanel.addClass('success')
 
         this.feedbackPanel.setText(message)
 
@@ -23,7 +23,7 @@ class FormWithFeedback extends Form {
         super.clear()
 
         this.feedbackPanel.setText('')
-        this.feedbackPanel.removeClass('succes')
+        this.feedbackPanel.removeClass('success')
 
         this.remove(this.feedbackPanel)
     }

staff/jose-pozo/socialcode/app/data.js

@@ -0,0 +1,53 @@
+const data = {}
+
+data.findUser = callback => {
+    let usersJson = localStorage.users
+
+    if (!usersJson) usersJson = '[]'
+
+    const users = JSON.parse(usersJson)
+
+    const user = users.find(callback)
+
+    return user
+}
+
+data.insertUser = user => {
+    let usersJson = localStorage.users
+
+    if (!usersJson) usersJson = '[]'
+
+    const users = JSON.parse(usersJson)
+
+    users.push(user)
+
+    usersJson = JSON.stringify(users)
+
+    localStorage.users = usersJson
+}
+
+data.findPosts = callback => {
+    let postsJson = localStorage.posts
+
+    if (!postsJson) postsJson = '[]'
+
+    const posts = JSON.parse(postsJson)
+
+    const filtered = posts.filter(callback)
+
+    return filtered
+}
+
+data.insertPost = post => {
+    let postsJson = localStorage.posts
+
+    if (!postsJson) postsJson = '[]'
+
+    const posts = JSON.parse(postsJson)
+
+    posts.push(post)
+
+    postsJson = JSON.stringify(posts)
+
+    localStorage.posts = postsJson
+}

staff/jose-pozo/socialcode/app/errors.js

@@ -0,0 +1,24 @@
+class ContentError extends Error {
+    constructor(messsage) {
+        super(message)
+
+        //this.name = ContentError.name
+        this.name = this.constructor.name
+    }
+}
+
+class MatchError extends Error {
+    constructor(message) {
+        super(message)
+
+        this.name = this.constructor.name
+    }
+}
+
+class DuplicityError extends Error {
+    constructor(message) {
+        super(message)
+
+        this.name = this.constructor.name
+    }
+}

staff/jose-pozo/socialcode/app/global.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap');
+
+/* @import url('https://fonts.googleapis.com/css2?family=Workbench&display=swap'); */
+
+:root {
+    --first-color: #7799E5;
+    --second-color: #17191e;
+}
+
+* {
+    font-family: Freeman;
+    color: var(--first-color);
+}
+
+body {
+    background-color: var(--second-color);
+    margin: 0;
+}

staff/jose-pozo/socialcode/app/home/components/CreatePostForm.css

@@ -0,0 +1,17 @@
+.CreatePostForm {
+    width: 85%;
+    margin-top: 6rem;
+    position: fixed;
+    top: 6rem;
+    background: #17191e;
+    border: 1px solid #7799E5;
+    border-radius: 0.3rem;
+}
+
+.Button.SubmitButton.create-post {
+    width: 100%;
+    margin-top: 2rem;
+    /*color: #ff6022;*/
+    color: #00E8C4;
+    ;
+}

staff/jose-pozo/socialcode/app/home/components/CreatePostForm.js

@@ -0,0 +1,43 @@
+class CreatePostForm extends FormWithFeedback {
+    constructor() {
+        super()
+
+        this.addClass('CreatePostForm')
+
+        const titleField = new Field('title', 'text', 'Title')
+        titleField.setPlaceholder('title')
+
+        const imageField = new Field('image', 'text', 'Image')
+        imageField.setPlaceholder('image')
+
+        const descriptionField = new Field('description', 'text', 'Desciption')
+        descriptionField.setPlaceholder('description')
+
+        const submitButton = new SubmitButton('Create')
+        //submitButton.addClass('SubmitButton')
+        submitButton.addClass('create-post');
+
+        this.add(titleField)
+        this.add(imageField)
+        this.add(descriptionField)
+        this.add(submitButton)
+    }
+
+    getTitle() {
+        const titleField = this.children[0]
+
+        return titleField.getValue()
+    }
+
+    getImage() {
+        const imageField = this.children[1]
+
+        return imageField.getValue()
+    }
+
+    getDescription() {
+        const descriptionField = this.children[2]
+
+        return descriptionField.getValue()
+    }
+}

staff/jose-pozo/socialcode/app/home/components/Post.css

@@ -0,0 +1,54 @@
+.Post {}
+
+.LoggedUser {
+    color: #70FACB;
+    margin-top: 2rem;
+    margin-bottom: 0;
+}
+
+.PostHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    margin-top: 2rem;
+    margin-bottom: 0;
+}
+
+.AuthorTitle {
+    color: #2AC195;
+}
+
+.edit-icon {
+    width: 1rem;
+}
+
+.edit-list {
+    list-style: none;
+    position: absolute;
+    right: 5%;
+    text-align: right;
+    font-size: 1.5rem;
+}
+
+.PostTitle {
+    color: #f4f4f4;
+    display: flex;
+    align-items: center;
+}
+
+.PostImage {
+    width: 100%;
+    border-radius: 5px;
+}
+
+.PostDescription {
+    color: #f4f4f4;
+}
+
+.PostDate {
+    color: #8190BB;
+}
+
+.StraightLine {
+    border-color: #7799E5;
+}