diff --git a/staff/rafael-infante/unsocial/compo/Button.js b/staff/rafael-infante/unsocial/compo/Button.js deleted file mode 100644 index bb66bc9..0000000 --- a/staff/rafael-infante/unsocial/compo/Button.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Builds a Button instance - * @param {string} id name the id of the Button instance - * @param {string} type name the type of Button instance - * @param {string} text text inside the Button instance - */ -class Button extends Compo { - constructor(id, type, text) { - super(document.createElement('button')) - this.container.id = id - this.container.type = type - this.container.innerText = text - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Code.js b/staff/rafael-infante/unsocial/compo/Code.js deleted file mode 100644 index e30b103..0000000 --- a/staff/rafael-infante/unsocial/compo/Code.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Builds a Code instance - * @param {string} text text inside the Code instance - */ -class Code extends Compo { - constructor(text) { - super(document.createElement('code')) - this.container.innerText = text - } - - setText(text) { - this.container.innerText = text - } - getText() { - return this.container.innerText - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Compo.js b/staff/rafael-infante/unsocial/compo/Compo.js deleted file mode 100644 index 6d837bf..0000000 --- a/staff/rafael-infante/unsocial/compo/Compo.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Builds Compo instances - * @param {HTMLElement} container The DOM container of the compo instance - */ -class Compo { - constructor(container) { - this.container = container - this.children = [] - this.parent = null - } - - add(child) { - this.children.push(child) - child.parent = this - this.container.appendChild(child.container) - } - - remove() { - var index = this.parent.children.findIndex(function (child) { - return child === this - }.bind(this)) - - if (index > -1) this.parent.children.splice(index, 1) - - this.container.remove() - } - - addBehavior(action, callback) { - this.container.addEventListener(action, callback) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Form.js b/staff/rafael-infante/unsocial/compo/Form.js deleted file mode 100644 index 7a14cb8..0000000 --- a/staff/rafael-infante/unsocial/compo/Form.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Builds a Form instance - * @param {string} className Name the CSS class of the Form instance - */ -class Form extends Compo { - constructor(className) { - super(document.createElement('form')) - this.container.classList.add(className) - } - - reset() { - this.container.reset() - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Header.js b/staff/rafael-infante/unsocial/compo/Header.js deleted file mode 100644 index fb589ec..0000000 --- a/staff/rafael-infante/unsocial/compo/Header.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Builds Header instances - * @param {string} className Name the CSS class of the Header instance - */ -class Header extends Compo { - constructor(className) { - super(document.createElement('header')) - this.container.classList.add(className) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Heading.js b/staff/rafael-infante/unsocial/compo/Heading.js deleted file mode 100644 index e38b7e0..0000000 --- a/staff/rafael-infante/unsocial/compo/Heading.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Builds a Heading instance - * @param {string} text Text inside the heading tag - * @param {number} level Size of the heading - */ -class Heading extends Compo { - constructor(text, level) { - super(document.createElement('h' + level)) - this.container.innerText = text - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Icon.js b/staff/rafael-infante/unsocial/compo/Icon.js deleted file mode 100644 index 226f6a6..0000000 --- a/staff/rafael-infante/unsocial/compo/Icon.js +++ /dev/null @@ -1,8 +0,0 @@ -class Icon extends Compo { - constructor() { - super(document.createElement('i')) - this.container.classList.add('far') - this.container.classList.add('fa-eye') - this.container.id = 'icon' - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Input.js b/staff/rafael-infante/unsocial/compo/Input.js deleted file mode 100644 index 0a593bf..0000000 --- a/staff/rafael-infante/unsocial/compo/Input.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Builds an Input instance - * @param {string} id Name the id attribute of the Input instance - * @param {string} type Name the type of input - * @param {string} placeholder Text inside the Input instance - * @param {boolean} required Gives required attribute to the Input instance - */ -class Input extends Compo { - constructor(id, type, placeholder, required) { - super(document.createElement('input')) - this.container.id = id - this.container.type = type - this.container.placeholder = placeholder - this.container.required = required - } - - getValue() { - return this.container.value - } - setValue(value) { - this.container.value = value - } - setType(type) { - this.container.type = type - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Label.js b/staff/rafael-infante/unsocial/compo/Label.js deleted file mode 100644 index 41c7c63..0000000 --- a/staff/rafael-infante/unsocial/compo/Label.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Builds a Label instance - * @param {string} id Name the for attribute of the Label instance - * @param {string} text Text inside the label tag - */ -class Label extends Compo { - constructor(id, text) { - super(document.createElement('label')) - this.container.htmlFor = id - this.container.innerText = text - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Link.js b/staff/rafael-infante/unsocial/compo/Link.js deleted file mode 100644 index f11b0c4..0000000 --- a/staff/rafael-infante/unsocial/compo/Link.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Builds a Link instance - * @param {string} text text inside the Link instance - * @param {string} href URL of the Link instance - */ -class Link extends Compo { - constructor(text, href) { - super(document.createElement('a')) - this.container.innerText = text - this.container.href = href - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Paragraph.js b/staff/rafael-infante/unsocial/compo/Paragraph.js deleted file mode 100644 index cc7db7a..0000000 --- a/staff/rafael-infante/unsocial/compo/Paragraph.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Builds a Paragraph instance - * @param {string} text text inside the Paragraph instance - */ -class Paragraph extends Compo { - constructor(text) { - super(document.createElement('p')) - this.container.innerText = text - } - - setText(text) { - this.container.innerText = text - } - getText() { - return this.container.innerText - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/PasswordInput.js b/staff/rafael-infante/unsocial/compo/PasswordInput.js deleted file mode 100644 index 9e1d73a..0000000 --- a/staff/rafael-infante/unsocial/compo/PasswordInput.js +++ /dev/null @@ -1,31 +0,0 @@ -class Passwordinput extends Compo { - constructor(className, id, type, placeholder, required) { - super(document.createElement('div')) - this.container.classList.add(className) - - const input = new Input(id, type, placeholder, required) - this.add(input) - - const icon = new Icon() - this.add(icon) - - let isVisible = false - icon.addBehavior('click', function (event) { - icon.container.classList.toggle('fa-eye-slash') - if (!isVisible) { - input.setType('text') - isVisible = true - } else { - input.setType('password') - isVisible = false - } - }) - } - - getValue() { - return this.children[0].container.value - } - setValue(value) { - this.children[0].container.value = value - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Picture.js b/staff/rafael-infante/unsocial/compo/Picture.js deleted file mode 100644 index 10de5ba..0000000 --- a/staff/rafael-infante/unsocial/compo/Picture.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Builds a Picture instance - * @param {string} imageSrc directory/path of the image - * @param {string} imageClass Name the CSS class of the Picture instance - */ -class Picture extends Compo { - constructor(imageSrc, imageClass) { - super(document.createElement('img')) - this.container.src = imageSrc - this.container.classList.add(imageClass) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Preformatted.js b/staff/rafael-infante/unsocial/compo/Preformatted.js deleted file mode 100644 index b8f7449..0000000 --- a/staff/rafael-infante/unsocial/compo/Preformatted.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Builds a Preformatted instance - * @param {string} text text inside the Preformatted instance - */ -class Preformatted extends Compo { - constructor(text) { - super(document.createElement('pre')) - this.container.innerText = text - } - - setText(text) { - this.container.innerText = text - } - getText() { - return this.container.innerText - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Snippet.js b/staff/rafael-infante/unsocial/compo/Snippet.js deleted file mode 100644 index bd091f0..0000000 --- a/staff/rafael-infante/unsocial/compo/Snippet.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * - * @param {*} text - */ -class Snippet extends Compo { - constructor(title, text) { - super(document.createElement('div')) - - const caption = new Heading(title, 4) - this.add(caption) - - const pre = new Preformatted('') - const code = new Code(text) - pre.add(code) - - this.add(pre) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/Time.js b/staff/rafael-infante/unsocial/compo/Time.js deleted file mode 100644 index 2f10b8f..0000000 --- a/staff/rafael-infante/unsocial/compo/Time.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Builds a Time instance - * @param {string} text text inside the Time instance - */ -class Time extends Compo { - constructor(text) { - super(document.createElement('time')) - this.container.innerText = text - } - - setText(text) { - this.container.innerText = text - } - getText() { - return this.container.innerText - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/index.html b/staff/rafael-infante/unsocial/compo/index.html deleted file mode 100644 index 02284b1..0000000 --- a/staff/rafael-infante/unsocial/compo/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - Compo v0.0.5 - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/compo/main.js b/staff/rafael-infante/unsocial/compo/main.js deleted file mode 100644 index 3a2da65..0000000 --- a/staff/rafael-infante/unsocial/compo/main.js +++ /dev/null @@ -1,24 +0,0 @@ -const page = new Compo(document.body) - -const title = new Heading('Compo', 1) -page.add(title) - -const inputTitle = new Heading('Input', 2) -page.add(inputTitle) - -const button = new Button('button', 'button', 'Submit') -page.add(button) - -const snippet = new Snippet('Demo Input', 'var input = new Input(\'password\', \'password\')\npage.add(input)') -page.add(snippet) - -const input = new Input('password', 'password', 'Enter password', true) -page.add(input) - -const linkTitle = new Heading('Link', 2) - -const snippet2 = new Snippet('Demo Link', 'var link = new Link(\'Google\')\npage.add(link)') -page.add(snippet2) - -const link = new Link('Google') -page.add(link) \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/index.html b/staff/rafael-infante/unsocial/index.html index a913c26..72035a3 100644 --- a/staff/rafael-infante/unsocial/index.html +++ b/staff/rafael-infante/unsocial/index.html @@ -11,6 +11,7 @@ +
@@ -20,29 +21,8 @@ - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/staff/rafael-infante/unsocial/main.js b/staff/rafael-infante/unsocial/main.js index 60ac105..7b166b4 100644 --- a/staff/rafael-infante/unsocial/main.js +++ b/staff/rafael-infante/unsocial/main.js @@ -1,16 +1,105 @@ let loggedUser = null -const header = new Header('logo-container') -const picture = new Picture('images/users-avatar.png', 'logo') -header.add(picture) -const heading = new Heading('unSocial', 1) -header.add(heading) +const rootElement = document.getElementById('root') +const root = ReactDOM.createRoot(rootElement) -const login = new Login() +const title = React.createElement('h1', { style: { backgroundColor: 'white' } }, 'Hello, React!') -const page = new Compo(document.querySelector('body')) +const button = React.createElement('button', + { + type: 'button', + style: { display: 'block' }, + onClick: () => alert('Clicked!') + }, + 'Click me!') -page.add(header) -page.add(login) +const button2 = React.createElement('button', + { + type: 'button', + style: { display: 'block' }, + onClick: () => alert('Now you cliked') + }, + 'Are you serious? 😒') -let home \ No newline at end of file +const red = React.createElement('li', { style: { backgroundColor: 'red' } }, 'RED') + +const green = React.createElement('li', { style: { backgroundColor: 'green' } }, 'GREEN') + +const blue = React.createElement('li', { style: { backgroundColor: 'blue' } }, 'BLUE') + +const list = React.createElement('ul', { style: { border: '1px solid black' } }, [red, green, blue]) + +const input = React.createElement('input', + { + type: 'text', + id: 'whatever', + className: 'pepito hola', + placeholder: 'Write something' + } +) + +const submit = React.createElement('button', { + type: 'submit' +}, 'Submit') + +const form = React.createElement('form', { + onSubmit: event => { + event.preventDefault() + console.log(event.target.whatever.value) + } +}, [input, submit]) + +function ReactiveEmoji(props) { + const content = React.createElement('span', { + onClick: () => alert(`${props.emoji} Ouch!`), + style: { + cursor: 'pointer' + } + }, props.emoji) + + const box = React.createElement('div', { + style: { + border: '2px solid black', + display: 'inline-block', + padding: '3px', + backgroundColor: 'white' + } + }, content) + return box +} + +const { Component } = React +class Car extends Component { + constructor(props) { + super(props) + } + + render() { + const content = React.createElement('span', { + style: { + padding: '2px', + border: 'solid', + backgroundColor: 'white' + } + }, this.props.car) + + return content + } +} + +const blueCar = new Car({ car: '🚙' }) +const redCar = new Car({ car: '🚗' }) +const yellowCar = new Car({ car: '🚕' }) + +root.render([ + title, + button, + button2, + list, + form, + ReactiveEmoji({ emoji: '😚' }), + blueCar.render(), + redCar.render(), + yellowCar.render(), + +]) \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/view/CreatePost.js b/staff/rafael-infante/unsocial/view/CreatePost.js deleted file mode 100644 index 256795b..0000000 --- a/staff/rafael-infante/unsocial/view/CreatePost.js +++ /dev/null @@ -1,46 +0,0 @@ -class CreatePost extends Compo { - constructor(className) { - super(document.createElement('div')) - - this.container.classList.add(className) - - const title = new Heading('Create a Post', 3) - this.add(title) - - const form = new Form('form-container') - - const imageLabel = new Label('image', 'Image') - const imageInput = new Input('image', 'text', 'Select an image', true) - form.add(imageLabel) - form.add(imageInput) - - const textLabel = new Label('text', 'Text') - const textInput = new Input('text', 'text', 'Write a text', true) - form.add(textLabel) - form.add(textInput) - - const submitButton = new Button('submit', 'submit', 'Create') - form.add(submitButton) - - this.add(form) - - form.addBehavior('submit', event => { - event.preventDefault() - const image = imageInput.getValue() - const text = textInput.getValue() - - try { - createpost(loggedUser.username, image, text) - form.reset() - this.remove() - const postList = new PostList() - home.add(postList) - - } catch (error) { - alert(error.message) - - console.error(error) - } - }) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/view/Home.js b/staff/rafael-infante/unsocial/view/Home.js deleted file mode 100644 index 0870e44..0000000 --- a/staff/rafael-infante/unsocial/view/Home.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * Builds Home instances - */ -class Home extends Compo { - constructor() { - super(document.createElement('section')) - - this.container.id = 'home' - this.container.classList.add('section-container') - - const title = new Heading('Home', 2) - this.add(title) - - const text = new Heading('Hello, ' + loggedUser.name + '!', 3) - this.add(text) - - const image = new Picture('images/boy.png', 'boy') - this.add(image) - - const logoutButton = new Button('btn.logout', 'submit', 'Logout') - this.add(logoutButton) - - // Functionality of logout button - logoutButton.container.addEventListener('click', event => { - const condition = prompt('Are you sure? (y/n)') - if (condition === 'y') { - event.preventDefault() - loggedUser = null - this.remove() - page.add(login) - } - }) - - const postButton = new Button('btn-post', 'button', 'Post') - this.add(postButton) - - postButton.addBehavior('click', () => { - - const createPost = new CreatePost('section-container') - this.children[this.children.length - 1].remove() - this.add(createPost) - }) - - const postList = new PostList() - this.add(postList) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/view/Login.js b/staff/rafael-infante/unsocial/view/Login.js deleted file mode 100644 index d3a20e5..0000000 --- a/staff/rafael-infante/unsocial/view/Login.js +++ /dev/null @@ -1,70 +0,0 @@ -/** - * Builds Login instances - */ -class Login extends Compo { - constructor() { - super(document.createElement('section')) - - this.container.classList.add('section-container') - - const paragraph = document.createElement('p') - paragraph.innerText = 'Welcome !' - this.container.appendChild(paragraph) - - const title = new Heading('Sign in to unSocial', 2) - this.add(title) - - const text = new Heading('Write username and password to access', 4) - this.add(text) - - const form = (new Form('form-container')) - this.add(form) - - form.add(new Label('login-user', 'User name')) - const usernameInput = new Input('login-user', 'text', 'Enter your user name', true) - form.add(usernameInput) - - form.add(new Label('login-password', 'Password')) - const passwordInput = new Passwordinput('password-container', 'password', 'password', 'Enter your password', true) - form.add(passwordInput) - - const submitButton = new Button('btn-login', 'submit', 'Login') - form.add(submitButton) - - const anchorText = document.createElement('p') - anchorText.innerText = "Don't have an account? " - this.container.appendChild(anchorText) - - const registerLink = new Link('Register', '#') - - anchorText.appendChild(registerLink.container) - - // Send user to register section when clicking on register link - registerLink.addBehavior('click', event => { - event.preventDefault() - this.remove() - const register = new Register() - page.add(register) - }) - - // actions when submitting the login Form - form.addBehavior('submit', event => { - event.preventDefault() - const username = usernameInput.getValue() - const password = passwordInput.getValue() - - try { - loggedUser = authenticateUser(username, password) - form.container.reset() - this.remove() - home = new Home() - page.add(home) - } - catch (error) { - passwordInput.setValue('') - alert(error.message) - console.error(error) - } - }) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/view/Post.js b/staff/rafael-infante/unsocial/view/Post.js deleted file mode 100644 index ef18a24..0000000 --- a/staff/rafael-infante/unsocial/view/Post.js +++ /dev/null @@ -1,17 +0,0 @@ -class Post extends Compo { - constructor(username, image, text, date) { - super(document.createElement('div')) - - const userTitle = new Heading(username, 4) - this.add(userTitle) - - const picture = new Picture(image, 'boy') - this.add(picture) - - const comment = new Paragraph(text) - this.add(comment) - - const time = new Time(date) - this.add(time) - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/view/PostList.js b/staff/rafael-infante/unsocial/view/PostList.js deleted file mode 100644 index 9e801ea..0000000 --- a/staff/rafael-infante/unsocial/view/PostList.js +++ /dev/null @@ -1,22 +0,0 @@ -class PostList extends Compo { - constructor() { - super(document.createElement('div')) - - const title = new Heading('Posts', 3) - this.add(title) - - try { - const posts = getPosts().toReversed() - - posts.forEach(post => { - const _post = new Post(post.username, post.image, post.text, post.date) - this.add(_post) - }) - - } catch (error) { - alert(error.message) - - console.error(error) - } - } -} \ No newline at end of file diff --git a/staff/rafael-infante/unsocial/view/Register.js b/staff/rafael-infante/unsocial/view/Register.js deleted file mode 100644 index decac37..0000000 --- a/staff/rafael-infante/unsocial/view/Register.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * Builds Register instances - */ -class Register extends Compo { - constructor() { - super(document.createElement('section')) - - this.container.classList.add('section-container') - - const title = new Heading('Register to unSocial', 2) - this.add(title) - - const form = new Form('form-container') - this.add(form) - - form.add(new Label('name', 'Name')) - const nameInput = new Input('name', 'text', 'Enter your name', true) - form.add(nameInput) - - form.add(new Label('email', 'Email')) - const emailInput = new Input('email', 'email', 'Enter your email', true) - form.add(emailInput) - - form.add(new Label('username', 'User name')) - const usernameInput = new Input('username', 'text', 'Enter your user name', true) - form.add(usernameInput) - - form.add(new Label('password', 'Password')) - const passwordInput = new Input('password', 'password', 'Enter your password', true) - form.add(passwordInput) - - form.add(new Label('confirm-password', 'Confirm password')) - const confirmpasswordInput = new Input('confirm-password', 'password', 'Confirm your password', true) - form.add(confirmpasswordInput) - - const registerButton = new Button('btn-register', 'submit', 'Register') - form.add(registerButton) - - const registerAnchorText = document.createElement('p') - registerAnchorText.innerText = 'Already have an account? ' - this.container.appendChild(registerAnchorText) - - const loginLink = new Link('Login', '#') - registerAnchorText.appendChild(loginLink.container) - - loginLink.addBehavior('click', event => { - event.preventDefault(); - this.remove() - page.add(login) - }) - - // Save data of new user when clicking on register button - form.addBehavior('submit', event => { - event.preventDefault() - const name = nameInput.getValue() - const email = emailInput.getValue() - const username = usernameInput.getValue() - const password = passwordInput.getValue() - const confirmPassword = confirmpasswordInput.getValue() - - try { - registerUser(name, email, username, password, confirmPassword) - form.reset() - this.remove() - page.add(login) - } - catch (error) { - alert(error.message) - console.error(error) - } - }) - } -} \ No newline at end of file