ES6 translation b00tc4mp#174

staff/aaron-barrios/unsocial/compo/Compo.js

@@ -4,24 +4,22 @@ class Compo {
         this.children = []
         this.container = container
 
-        // this.parent = null
+        this.parent = null
     }
 
     add = function (child) {
         this.children.push(child)
 
-        // child.parent = this
+        child.parent = this
 
         this.container.appendChild(child.container)
     }
 
     remove = function () {
-        // var index = this.parent.children.findIndex(function (child) {
-        //     return child === this
-        // }.bind(this))
+        const index = this.parent.children.findIndex(child => child === this)
 
-        // if (index > -1)
-        //     this.parent.children.splice(index, 1)
+        if (index > -1)
+            this.parent.children.splice(index, 1)
 
         this.container.remove()
     }

staff/aaron-barrios/unsocial/compo/PasswordInput.js

@@ -4,17 +4,17 @@ class PasswordInput extends Compo {
         super(document.createElement('div'))
         this.container.style.display = 'flex'
 
-        var input = new Input('password', id)
+        const input = new Input('password', id)
         input.container.style.paddingRight = '18px'
         this.add(input)
 
-        var span = new Span('🔒')
+        const span = new Span('🔒')
         span.container.style.cursor = 'pointer'
         span.container.style.position = 'absolute'
         span.container.style.right = '10px'
         this.add(span)
 
-        span.addBehavior('click', function () {
+        span.addBehavior('click', () => {
             if (span.getText() === '🔒') {
                 input.setType('text')
                 span.setText('👁️‍🗨️')

staff/aaron-barrios/unsocial/compo/Preformatted.js

@@ -0,0 +1,16 @@
+class Preformatted extends Compo {
+    constructor(text) {
+        super(document.createElement('pre'))
+
+        this.container.innerText = text
+    }
+
+    setText = function (text) {
+        this.container.innerText = text
+    }
+
+    getText = function () {
+        return this.container.innerText
+    }
+
+}

staff/aaron-barrios/unsocial/compo/Snippet.js

@@ -0,0 +1,14 @@
+class Snippet extends Compo {
+    constructor(title, text) {
+        super(document.createElement('div'))
+
+        var title = new Heading(title, 4)
+        this.add(title)
+
+        var pre = new Preformatted('')
+        var code = new Code(text)
+        pre.add(code)
+
+        this.add(pre)
+    }
+}

staff/aaron-barrios/unsocial/compo/main.js

@@ -4,25 +4,36 @@ const title = new Heading('Compo', 1)
 page.add(title)
 
 {
-    var inputTitle = new Heading('Input', 2)
+    const inputTitle = new Heading('Input', 2)
     page.add(inputTitle)
 
-    var input = new Input('password', 'password')
+    const snippet = new Snippet('Demo', 'var input = new Input(\'password\', \'password\')\npage.add(input)')
+    page.add(snippet)
+
+    const input = new Input('password', 'password')
     page.add(input)
 }
 
 {
-    var linkTitle = new Heading('Link', 2)
+    const linkTitle = new Heading('Link', 2)
     page.add(linkTitle)
 
-    var link = new Link('Google')
+    const snippet = new Snippet('Demo', 'var link = new Link(\'Google\')\npage.add(link)')
+    page.add(snippet)
+
+
+    const link = new Link('Google')
     page.add(link)
 }
 
 {
-    var passwordInputTitle = new Heading('PasswordInput', 2)
+    const passwordInputTitle = new Heading('PasswordInput', 2)
     page.add(passwordInputTitle)
 
-    var passwordInput = new PasswordInput('password')
+    const snippet = new Snippet('Demo', 'var passwordInput = new PasswordInput(\'password\')\npage.add(passwordInput)')
+    page.add(snippet)
+
+
+    const passwordInput = new PasswordInput('password')
     page.add(passwordInput)
 }

staff/aaron-barrios/unsocial/data/posts.js

@@ -1,4 +1,4 @@
-var posts = [
+const posts = [
     {
         image:
             'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',

staff/aaron-barrios/unsocial/data/users.js

@@ -1,5 +1,5 @@
 //USUARIOS POR DEFECTO
-var users = [
+const users = [
     { name: 'Juan Pablo', email: '[email protected]', username: 'juanpablo', password: '123' },
     { name: 'Aaron', email: '[email protected]', username: 'aaron', password: '123' },
     { name: 'Claudi', email: '[email protected]', username: 'claudi', password: '123' }

staff/aaron-barrios/unsocial/index.html

@@ -35,6 +35,8 @@
     <script src="compo/ListItem.js"></script>
     <script src="compo/Paragraph.js"></script>
     <script src="compo/PasswordInput.js"></script>
+    <script src="compo/Preformatted.js"></script>
+    <script src="compo/Snippet.js"></script>
     <script src="compo/Span.js"></script>
     <script src="compo/Time.js"></script>
     <script src="compo/UnorderedList.js"></script>

staff/aaron-barrios/unsocial/logic/authenticateUser.js

@@ -1,10 +1,9 @@
-function authenticateUser(username, password) {
+const authenticateUser = (username, password) => {
     if (username.length < 4 || username.length > 12)
         throw new Error('Invalid username')
 
-    var user = users.find(function (user) {
-        return user.username === username && user.password === password
-    })
+    const user = users.find(user => user.username === username && user.password === password)
+
 
     if (user === undefined)
         throw new Error('Wrong credentials')

staff/aaron-barrios/unsocial/logic/createPost.js

@@ -1,12 +1,12 @@
 // ----- POSTS STUFF ------
-function createPost(username, image, text) {
+const createPost = (username, image, text) => {
 
     if (username.length < 4 || username.length > 12)
         throw new Error('Invalid username')
 
     //TO DO: input validation (and throw error)
 
-    var post = {
+    const post = {
         image: image,
         text: text,
         username: username,

staff/aaron-barrios/unsocial/logic/getPosts.js

@@ -1,3 +1 @@
-function getPosts() {
-    return posts
-}
+const getPosts = () => posts

staff/aaron-barrios/unsocial/logic/registerUser.js

@@ -1,4 +1,4 @@
-function registerUser(name, email, username, password, passwordRepeat) {
+const registerUser = (name, email, username, password, passwordRepeat) => {
     //CONDICIONALES PARA EL REGISTER
     //----- MÍNIMO DE LETRAS PARA EL NAME -----
     if (name.length < 2)
@@ -23,9 +23,7 @@ function registerUser(name, email, username, password, passwordRepeat) {
         throw new Error('Password does not match!')
     }
 
-    var user = users.find(function (user) {
-        return user.username === username || user.email === email
-    })
+    let user = users.find(user => user.username === username || user.email === email)
 
     if (user !== undefined) {
         if (user.username === username)

staff/aaron-barrios/unsocial/view/CreatePost.js

@@ -3,44 +3,44 @@ class CreatePost extends Compo {
     constructor() {
         super(document.createElement('div'))
 
-        var title = new Heading('Create Post', 3)
+        const title = new Heading('Create Post', 3)
         this.add(title)
 
-        var form = new Form()
+        const form = new Form()
 
-        var imageLabel = new Label('Image', 'image')
-        var imageInput = new Input('text', 'image')
+        const imageLabel = new Label('Image', 'image')
+        const imageInput = new Input('text', 'image')
         form.add(imageLabel)
         form.add(imageInput)
 
-        var textLabel = new Label('Text', 'text')
-        var textInput = new Input('text', 'text')
+        const textLabel = new Label('Text', 'text')
+        const textInput = new Input('text', 'text')
         form.add(textLabel)
         form.add(textInput)
 
-        var submitButton = new Button('Create', 'submit')
+        const submitButton = new Button('Create', 'submit')
         form.add(submitButton)
 
         this.add(form)
 
         form.addBehavior('submit', function (event) {
             event.preventDefault()
 
-            var image = imageInput.getValue()
-            var text = textInput.getValue()
+            const image = imageInput.getValue()
+            const text = textInput.getValue()
 
             try {
                 createPost(loggedInUser.username, image, text)
 
                 this.remove()
 
-                var postList = new PostList()
+                const postList = new PostList()
                 home.add(postList)
             } catch (error) {
                 alert(error.message)
 
                 console.error(error)
             }
-        }.bind(this))
+        })
     }
 }

staff/aaron-barrios/unsocial/view/Home.js

@@ -3,16 +3,16 @@ class Home extends Compo {
     constructor() {
         super(document.createElement('section'))
 
-        var title = new Heading('Home', 2)
+        const title = new Heading('Home', 2)
         this.add(title)
 
-        var userTitle = new Heading('Hello, ' + loggedInUser.name + '!', 3)
+        const userTitle = new Heading(`Hello, ${loggedInUser.name}!`, 3)
         this.add(userTitle)
 
-        var logoutButton = new Button('Logout', 'button')
+        const logoutButton = new Button('Logout', 'button')
         this.add(logoutButton)
 
-        logoutButton.addBehavior('click', function (event) {
+        logoutButton.addBehavior('click', event => {
             event.preventDefault()
 
             loggedInUser = null
@@ -21,21 +21,21 @@ class Home extends Compo {
 
             page.add(login)
 
-        }.bind(this))
+        })
 
 
-        var addPostButton = new Button('+', 'button')
+        const addPostButton = new Button('+', 'button')
         this.add(addPostButton)
 
-        addPostButton.addBehavior('click', function (event) {
-            var createPost = new CreatePost()
+        addPostButton.addBehavior('click', event => {
+            const createPost = new CreatePost()
 
             this.children[this.children.length - 1].remove()
 
             this.add(createPost)
-        }.bind(this))
+        })
 
-        var postList = new PostList()
+        const postList = new PostList()
         this.add(postList)
     }
 }

staff/aaron-barrios/unsocial/view/Login.js

@@ -3,28 +3,28 @@ class Login extends Compo {
     constructor() {
         super(document.createElement('section'))
 
-        var title = new Heading('Login', 2)
+        const title = new Heading('Login', 2)
         this.add(title)
 
-        var form = new Form()
+        const form = new Form()
         this.add(form)
 
         form.add(new Label('Username', 'username'))
-        var usernameInput = new Input('text', 'username')
+        const usernameInput = new Input('text', 'username')
         form.add(usernameInput)
 
         form.add(new Label('Password', 'password'))
-        var passwordInput = new PasswordInput('password')
+        const passwordInput = new PasswordInput('password')
         form.add(passwordInput)
 
-        var submitButton = new Button('Login', 'submit')
+        const submitButton = new Button('Login', 'submit')
         form.add(submitButton)
 
-        form.addBehavior('submit', function (event) {
+        form.addBehavior('submit', event => {
             event.preventDefault()
 
-            var username = usernameInput.getValue()
-            var password = passwordInput.getValue()
+            const username = usernameInput.getValue()
+            const password = passwordInput.getValue()
 
             try {
                 loggedInUser = authenticateUser(username, password)
@@ -43,22 +43,21 @@ class Login extends Compo {
 
                 console.error(error)
             }
-        }.bind(this))
+        })
 
 
 
-        var registerLink = new Link('Register')
+        const registerLink = new Link('Register')
         this.add(registerLink)
 
-        registerLink.addBehavior('click', function (event) {
+        registerLink.addBehavior('click', event => {
             event.preventDefault()
 
             this.remove()
 
-            var register = new Register()
+            const register = new Register()
 
             page.add(register)
-        }.bind(this))
-
+        })
     }
 }

staff/aaron-barrios/unsocial/view/PostItem.js

@@ -3,16 +3,16 @@ class PostItem extends Compo {
     constructor(username, image, text, date) {
         super(document.createElement('div'))
 
-        var userTitle = new Heading(username, 4)
+        const userTitle = new Heading(username, 4)
         this.add(userTitle)
 
-        var picture = new Image(image)
+        const picture = new Image(image)
         this.add(picture)
 
-        var comment = new Paragraph(text)
+        const comment = new Paragraph(text)
         this.add(comment)
 
-        var time = new Time(date)
+        const time = new Time(date)
         this.add(time)
     }
 }