add logic, update unsocial WIP b00tc4mp#177

juanpabloarias1 · Oct 18, 2024 · 9bbd9d0 · 9bbd9d0
1 parent 106a509
commit 9bbd9d0
Show file tree

Hide file tree

Showing 10 changed files with 683 additions and 0 deletions.
diff --git a/staff/juanp-arias/unsocialreact/.gitkeep b/staff/juanp-arias/unsocialreact/.gitkeep
diff --git a/staff/juanp-arias/unsocialreact/data.js b/staff/juanp-arias/unsocialreact/data.js
@@ -0,0 +1,41 @@
+const users = [
+    {
+        id: 'm2erhpwihme',
+        name: 'Juan Pablo',
+        email: '[email protected]',
+        username: 'juanpablo', password: '123456',
+        repeatpassword: '123456'
+    },
+    {
+        id: 'm2erhsskj6q',
+        name: 'Pepito',
+        email: '[email protected]',
+        username: 'pepito',
+        password: '123456',
+        repeatpassword: '123456'
+    }
+]
+
+let posts = [
+    {
+        id: 'm2eseacb6',
+        image: 'https://cdn.aarp.net/content/dam/aarp/travel/budget_travel/2022/06/1140-big-ben-hero.jpg',
+        text: 'Hey London',
+        author: 'm2erhpwihme',
+        date: new Date().toDateString()
+    },
+    {
+        id: 'm2esebkkge',
+        image: 'https://hips.hearstapps.com/hmg-prod/images/barcelona-city-skyline-with-sagrada-familia-royalty-free-image-1692960079.jpg',
+        text: 'Hey Barcelona',
+        author: 'm2erhsskj6q',
+        date: new Date().toDateString()
+    },
+    {
+        id: 'm2esebkige',
+        image: 'https://media.cntraveller.com/photos/665ee92a9421aab48dea082c/16:9/w_2560%2Cc_limit/venice-GettyImages-941234062.jpeg',
+        text: 'Hey Venice',
+        author: 'm2erhpwihme',
+        date: new Date().toDateString()
+    }
+]
diff --git a/staff/juanp-arias/unsocialreact/index.html b/staff/juanp-arias/unsocialreact/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UNSOCIAL</title>
+    <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style2.css">
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script src="data.js"></script>
+
+    <script src="logic/userLogic.js"></script>
+    <script src="logic/getUserName.js"></script>
+    <script src="logic/createPostLogic.js"></script>
+    <script src="logic/registerLogic.js"></script>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <script src="main.jsx" type='text/babel'></script>
+</body>
+
+</html>
diff --git a/staff/juanp-arias/unsocialreact/logic/createPostLogic.js b/staff/juanp-arias/unsocialreact/logic/createPostLogic.js
@@ -0,0 +1,13 @@
+const createPost = (username, image, text) => {
+    const post = {
+        image: image,
+        text: text,
+        username: username,
+        date: new Date
+    }
+
+    posts.push(post)
+}
+
+const getPosts = () => posts
+
diff --git a/staff/juanp-arias/unsocialreact/logic/getUserName.js b/staff/juanp-arias/unsocialreact/logic/getUserName.js
@@ -0,0 +1,21 @@
+const getUserName = userId => {
+    if (typeof userId !== 'string') throw new Error('invalid user')
+    // const users = JSON.parse(localStorage.users)
+
+    const user = users.find(user => user.id === userId)
+
+    if (!user) throw new Error('user not found')
+
+    return user.name
+}
+
+const getUserUsername = userId => {
+    if (typeof userId !== 'string') throw new Error('invalid user')
+    // const users = JSON.parse(localStorage.users)
+
+    const user = users.find(user => user.id === userId)
+
+    if (!user) throw new Error('user not found')
+
+    return user.username
+}
diff --git a/staff/juanp-arias/unsocialreact/logic/registerLogic.js b/staff/juanp-arias/unsocialreact/logic/registerLogic.js
@@ -0,0 +1,27 @@
+const registerUser = (name, email, username, password, repeatpassword) => {
+    if (name.length < 2)
+        throw new Error('invalid name')
+
+    //RegEx (condiciones que evaluan el cumplimiento de distintos caracteres en el email)
+    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+        throw new Error('invalid e-mail')
+
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 3)
+        throw new Error('invalid password')
+
+    if (password !== repeatpassword)
+        throw new Error('passwords do not match')
+
+    let user = users.find(function (user) {
+        return user.username === username || user.email === email
+    })
+
+    if (user !== undefined)
+        throw new Error('user already exists')
+
+    user = { name: name, email: email, username: username, password: password, repeatpassword: repeatpassword }
+    users.push(user)
+}
diff --git a/staff/juanp-arias/unsocialreact/logic/userLogic.js b/staff/juanp-arias/unsocialreact/logic/userLogic.js
@@ -0,0 +1,12 @@
+function authenticateUser(username, password) {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    const user = users.find(function (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('User not found')
+    return user
+}
diff --git a/staff/juanp-arias/unsocialreact/logic/uuid.js b/staff/juanp-arias/unsocialreact/logic/uuid.js
@@ -0,0 +1 @@
+const uuid = () => (Date.now() + Math.random()).toString(36).replace('.', '')
diff --git a/staff/juanp-arias/unsocialreact/main.jsx b/staff/juanp-arias/unsocialreact/main.jsx
@@ -0,0 +1,217 @@
+let loggedInUser = null
+
+const rootElement = document.getElementById('root')
+const root = ReactDOM.createRoot(rootElement)
+
+const { Component } = React
+
+class PasswordInput extends Component {
+    constructor(props) {
+        console.log('PasswordInput -> constructor') // chivato para ver como construye la password input
+
+        super(props) // es igual que this.props = props
+        this.state = { status: '😊', type: 'password' }
+    }
+    render() {
+
+        return <div>
+            <input type={this.state.type} id={this.props.id} />
+            <span className="emoji"
+                style={{ cursor: 'pointer', position: 'absolute', right: '10px' }}
+                onClick={() => this.setState({
+                    status: this.state.status === '😊' ? '🫥' : '😊',
+                    type: this.state.type === 'password' ? 'text' : 'password'
+                })}
+            >{this.state.status}</span>
+        </div>
+    }
+}
+
+function Login(props) {
+    return <section className="section-container">
+        <h2>LOGIN</h2>
+
+        <form onSubmit={event => {
+            event.preventDefault()
+
+            const { target: { username: { value: username }, password: { value: password } } } = event
+
+            try {
+                loggedInUser = authenticateUser(username, password)
+
+                event.target.reset()
+
+                props.onLoggedIn()
+            } catch (error) {
+
+                alert(error.message)
+
+                console.error(error)
+            }
+        }}>
+            <label htmlFor="username">Username</label>
+            <input type="text" id="username"></input>
+
+            <label htmlFor="password">Password</label>
+            <PasswordInput id="password" />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <h4>Don't have an account?</h4>
+        <a href="" onClick={
+            event => {
+                event.preventDefault()
+                props.onRegisterClick()
+            }
+        }>Register</a>
+
+    </section>
+}
+
+function Register(props) {
+    return <section className="section-container" id="register">
+        <h2>REGISTER</h2>
+
+        <form onSubmit={event => {
+            event.preventDefault()
+
+            const { target: { name: { value: name },
+                email: { value: email },
+                username: { value: username },
+                password: { value: password },
+                ['password-repeat']: { value: repeatpassword }
+            } } = event
+
+            try {
+                registerUser(name, email, username, password, repeatpassword)
+                event.target.reset()
+
+                props.onRegistered()
+            } catch (error) {
+
+                alert(error.message)
+
+                console.error(error)
+            }
+        }}>
+            <label htmlFor="name">Name</label>
+            <input type="text" id="name" />
+
+            <label htmlFor="email">E-mail</label>
+            <input type="email" id="email" />
+
+            <label htmlFor="username">Username</label>
+            <input type="text" id="username" />
+
+            <label htmlFor="password">Password</label>
+            <PasswordInput id="password" />
+
+            <label htmlFor="password-repeat">Repeat Password</label>
+            <PasswordInput id="password-repeat" />
+
+            <button type="submit">Register</button>
+        </form>
+        <a href="" onClick={
+            event => {
+                event.preventDefault()
+
+                props.onLoginClick()
+            }}>Login</a>
+    </section>
+}
+
+class Home extends Component {
+    constructor(props) {
+        super(props)
+
+        let name
+
+        try {
+            name = getUserName(loggedInUser.id)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+
+        this.state = { name: name, view: 'list' }
+    }
+
+    render() {
+
+        return <section className="section-container">
+            <h2>HOME</h2>
+
+            <h3>Welcome, {this.state.name}! </h3>
+
+            <button type="button"
+                onClick={() => {
+                    loggedInUser = null
+
+                    this.props.logoutClick()
+
+                }}>Logout</button>
+            <button type="button">+</button>
+
+            {this.state.view === 'list' && <PostList />}
+
+        </section>
+    }
+}
+
+function PostList() {
+
+    let posts
+
+    try {
+        posts = getPosts().reverse()
+    } catch (error) {
+        alert(error.message)
+
+        console.error(error)
+    }
+
+    return <div>
+        <h3>POSTS</h3>
+
+        {posts.map(post => <div className="post-container">
+            <h4>{getUserUsername(post.author)}</h4>
+            <img src={post.image} style={{ width: "100%" }} />
+            <span>😊</span>
+            <p>{post.text}</p>
+            <time>{post.date}</time>
+        </div>)}
+    </div>
+}
+
+class App extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = { view: 'login' }
+    }
+
+    render() {
+        return <div>
+            <h1 className="header">UNSOCIAL</h1>
+
+            {this.state.view === 'login' && <Login
+                onLoggedIn={() => this.setState({ view: 'home' })}
+                onRegisterClick={() => this.setState({ view: 'register' })}
+            />}
+            {this.state.view === 'register' && <Register
+                onLoginClick={() => this.setState({ view: 'login' })}
+                onRegistered={() => this.setState({ view: 'login' })}
+            />}
+            {this.state.view === 'home' && <Home
+                logoutClick={() => this.setState({ view: 'login' })}
+            />}
+        </div>
+    }
+}
+
+
+root.render(
+    <App />
+)