add initial code for socialcode app b00tc4mp#145

staff/daniel-guillen/socialcode/app/components/Component.js

@@ -0,0 +1,60 @@
+class Component {
+    constructor(tagNameOrContainer = 'div') {
+        if (typeof tagNameOrContainer === 'string')
+            this.container = document.createElement(tagNameOrContainer)
+        else if (tagNameOrContainer instanceof HTMLElement || tagNameOrContainer instanceof HTMLDocument)
+            this.container = tagNameOrContainer
+        else
+            throw new Error('tagNameOrContainer is not a tagName or container')
+
+        this.children = []
+    }
+
+    add(child) {
+        if (!(child instanceof Component)) throw new TypeError('child is not component')
+
+        this.children.push(child)
+
+        this.container.appendChild(child.container)
+    }
+
+    remove(child) {
+        if (!(child instanceof Component)) throw new TypeError('child is not component')
+
+        const index = this.children.indexOf(child)
+
+        if (index > -1)
+            this.children.splice(index, 1)
+
+        if (this.container.contains(child.container))
+            this.container.removeChild(child.container)
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    setId(id) {
+        this.container.id = id
+    }
+
+    addClass(clazz) {
+        this.container.classList.add(clazz)
+    }
+
+    removeClass(clazz) {
+        this.container.classList.remove(clazz)
+    }
+
+    onClick(listener) {
+        this.container.addEventListener('click', listener)
+    }
+
+    onKeyDown(listener) {
+        this.container.addEventListener('keydown', listener)
+    }
+
+    onKeyUp(listener) {
+        this.container.addEventListener('keyup', listener)
+    }
+}

staff/daniel-guillen/socialcode/app/components/Post.js

@@ -0,0 +1,22 @@
+class Post extends Component {
+    constructor(post) {
+        super('article')
+
+        const authorTitle = new Component('p')
+        authorTitle.setText(post.author)
+
+        const postTitle = new Component('h2')
+        postTitle.setText(post.title)
+
+        const postImage = new Image
+        postImage.setUrl(post.image)
+
+        const postText = new Component('p')
+        postText.setText(post.text)
+
+        this.add(authorTitle)
+        this.add(postTitle)
+        this.add(postImage)
+        this.add(postText)
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Button.css

@@ -0,0 +1,6 @@
+.Button {
+    padding: .4rem;
+    background-color: transparent;
+    font-size: 1rem;
+    border: 1px solid var(--first-color);
+}

staff/daniel-guillen/socialcode/app/components/core/Button.js

@@ -0,0 +1,11 @@
+class Button extends Component {
+    constructor() {
+        super('button')
+
+        this.addClass('Button')
+    }
+
+    setType(type) {
+        this.container.type = type
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Field.css

@@ -0,0 +1,5 @@
+.Field {
+    display: flex;
+    flex-direction: column;
+    margin: .25rem 0;
+}

staff/daniel-guillen/socialcode/app/components/core/Field.js

@@ -0,0 +1,28 @@
+class Field extends Component {
+    constructor(id, type, text) {
+        super('div')
+
+        this.addClass('Field')
+
+        const label = new Label
+        label.setText(text)
+        label.setFor(id)
+
+        const input = new Input
+        input.setId(id)
+        input.setType(type)
+
+        this.add(label)
+        this.add(input)
+    }
+
+    setPlaceholder(placeholder) {
+        this.children[1].setPlaceholder(placeholder)
+    }
+
+    getValue() {
+        const input = this.children[1]
+
+        return input.getValue()
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Form.css

@@ -0,0 +1,5 @@
+.Form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

staff/daniel-guillen/socialcode/app/components/core/Form.js

@@ -0,0 +1,15 @@
+class Form extends Component {
+    constructor() {
+        super('form')
+
+        this.addClass('Form')
+    }
+
+    onSubmit(listener) {
+        this.container.addEventListener('submit', listener)
+    }
+
+    clear() {
+        this.container.reset()
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Heading.js

@@ -0,0 +1,5 @@
+class Heading extends Component {
+    constructor(level) {
+        super('h' + level)
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Image.css

@@ -0,0 +1,3 @@
+.Image {
+    width: 100%;
+}

staff/daniel-guillen/socialcode/app/components/core/Image.js

@@ -0,0 +1,15 @@
+class Image extends Component {
+    constructor() {
+        super('img')
+
+        this.addClass('Image')
+    }
+
+    setUrl(url) {
+        this.container.src = url
+    }
+
+    setAltText(altText) {
+        this.container.alt = altText
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Input.css

@@ -0,0 +1,6 @@
+.Input {
+    padding: .4rem;
+    background-color: transparent;
+    font-size: 1rem;
+    border: 1px solid var(--first-color);
+}

staff/daniel-guillen/socialcode/app/components/core/Input.js

@@ -0,0 +1,19 @@
+class Input extends Component {
+    constructor() {
+        super('input')
+
+        this.addClass('Input')
+    }
+
+    setType(type) {
+        this.container.type = type
+    }
+
+    setPlaceholder(placeholder) {
+        this.container.placeholder = placeholder
+    }
+
+    getValue() {
+        return this.container.value
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Label.js

@@ -0,0 +1,9 @@
+class Label extends Component {
+    constructor() {
+        super('label')
+    }
+
+    setFor(id) {
+        this.container.htmlFor = id
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/Link.js

@@ -0,0 +1,15 @@
+class Link extends Component {
+    constructor() {
+        super('a')
+
+        this.setUrl('')
+    }
+
+    setUrl(url) {
+        this.container.href = url
+    }
+
+    setTarget(target) {
+        this.container.target = target
+    }
+}

staff/daniel-guillen/socialcode/app/components/core/SubmitButton.css

@@ -0,0 +1,3 @@
+.SubmitButton {
+    margin: .5rem 0;
+}

staff/daniel-guillen/socialcode/app/components/core/SubmitForm.js

@@ -0,0 +1,10 @@
+class SubmitButton extends Button {
+    constructor(text) {
+        super()
+
+        this.addClass('SubmitButton')
+
+        this.setType('submit')
+        this.setText(text)
+    }
+}

staff/daniel-guillen/socialcode/app/components/library/FormWithFeedback.css

@@ -0,0 +1,11 @@
+.FormWithFeedback {
+    padding: 1rem;
+}
+
+.FormWithFeedback .Feedback {
+    color: tomato;
+}
+
+.FormWithFeedback .Feedback.success {
+    color: greenyellow;
+}

staff/daniel-guillen/socialcode/app/components/library/FormWithFeedback.js

@@ -0,0 +1,30 @@
+class FormWithFeedback extends Form {
+    constructor() {
+        super()
+
+        this.addClass('FormWithFeedback')
+
+        const feedbackPanel = new Component('p')
+        feedbackPanel.addClass('Feedback')
+
+        this.feedbackPanel = feedbackPanel
+    }
+
+    setFeedback(message, level) {
+        if (level === 'success')
+            this.feedbackPanel.addClass('success')
+
+        this.feedbackPanel.setText(message)
+
+        this.add(this.feedbackPanel)
+    }
+
+    clear() {
+        super.clear()
+
+        this.feedbackPanel.setText('')
+        this.feedbackPanel.removeClass('success')
+
+        this.remove(this.feedbackPanel)
+    }
+}

staff/daniel-guillen/socialcode/app/data.js

@@ -0,0 +1,53 @@
+const data = {}
+
+data.findUser = callback => {
+    const 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 => {
+    const 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
+}