unsociaReact b00tc4mp#179

vicko87 · Oct 16, 2024 · 109856e · 109856e
1 parent 475e2be
commit 109856e
Show file tree

Hide file tree

Showing 45 changed files with 275 additions and 48 deletions.
diff --git a/...oria-kolomytseva/unsocial/compo/Button.js → ...a-kolomytseva/unsocial.10/compo/Button.js b/...oria-kolomytseva/unsocial/compo/Button.js → ...a-kolomytseva/unsocial.10/compo/Button.js
diff --git a/...ctoria-kolomytseva/unsocial/compo/Code.js → ...ria-kolomytseva/unsocial.10/compo/Code.js b/...ctoria-kolomytseva/unsocial/compo/Code.js → ...ria-kolomytseva/unsocial.10/compo/Code.js
diff --git a/...toria-kolomytseva/unsocial/compo/Compo.js → ...ia-kolomytseva/unsocial.10/compo/Compo.js b/...toria-kolomytseva/unsocial/compo/Compo.js → ...ia-kolomytseva/unsocial.10/compo/Compo.js
diff --git a/...ctoria-kolomytseva/unsocial/compo/Form.js → ...ria-kolomytseva/unsocial.10/compo/Form.js b/...ctoria-kolomytseva/unsocial/compo/Form.js → ...ria-kolomytseva/unsocial.10/compo/Form.js
diff --git a/...ria-kolomytseva/unsocial/compo/Heading.js → ...-kolomytseva/unsocial.10/compo/Heading.js b/...ria-kolomytseva/unsocial/compo/Heading.js → ...-kolomytseva/unsocial.10/compo/Heading.js
diff --git a/...toria-kolomytseva/unsocial/compo/Image.js → ...ia-kolomytseva/unsocial.10/compo/Image.js b/...toria-kolomytseva/unsocial/compo/Image.js → ...ia-kolomytseva/unsocial.10/compo/Image.js
diff --git a/...toria-kolomytseva/unsocial/compo/Input.js → ...ia-kolomytseva/unsocial.10/compo/Input.js b/...toria-kolomytseva/unsocial/compo/Input.js → ...ia-kolomytseva/unsocial.10/compo/Input.js
diff --git a/...toria-kolomytseva/unsocial/compo/Label.js → ...ia-kolomytseva/unsocial.10/compo/Label.js b/...toria-kolomytseva/unsocial/compo/Label.js → ...ia-kolomytseva/unsocial.10/compo/Label.js
diff --git a/...ctoria-kolomytseva/unsocial/compo/Link.js → ...ria-kolomytseva/unsocial.10/compo/Link.js b/...ctoria-kolomytseva/unsocial/compo/Link.js → ...ria-kolomytseva/unsocial.10/compo/Link.js
diff --git a/...ia-kolomytseva/unsocial/compo/ListItem.js → ...kolomytseva/unsocial.10/compo/ListItem.js b/...ia-kolomytseva/unsocial/compo/ListItem.js → ...kolomytseva/unsocial.10/compo/ListItem.js
diff --git a/...a-kolomytseva/unsocial/compo/Paragraph.js → ...olomytseva/unsocial.10/compo/Paragraph.js b/...a-kolomytseva/unsocial/compo/Paragraph.js → ...olomytseva/unsocial.10/compo/Paragraph.js
diff --git a/...lomytseva/unsocial/compo/PasswordInput.js → ...ytseva/unsocial.10/compo/PasswordInput.js b/...lomytseva/unsocial/compo/PasswordInput.js → ...ytseva/unsocial.10/compo/PasswordInput.js
diff --git a/...olomytseva/unsocial/compo/Preformatted.js → ...mytseva/unsocial.10/compo/Preformatted.js b/...olomytseva/unsocial/compo/Preformatted.js → ...mytseva/unsocial.10/compo/Preformatted.js
diff --git a/...ria-kolomytseva/unsocial/compo/Snippet.js → ...-kolomytseva/unsocial.10/compo/Snippet.js b/...ria-kolomytseva/unsocial/compo/Snippet.js → ...-kolomytseva/unsocial.10/compo/Snippet.js
diff --git a/...ctoria-kolomytseva/unsocial/compo/Span.js → ...ria-kolomytseva/unsocial.10/compo/Span.js b/...ctoria-kolomytseva/unsocial/compo/Span.js → ...ria-kolomytseva/unsocial.10/compo/Span.js
diff --git a/...ctoria-kolomytseva/unsocial/compo/Time.js → ...ria-kolomytseva/unsocial.10/compo/Time.js b/...ctoria-kolomytseva/unsocial/compo/Time.js → ...ria-kolomytseva/unsocial.10/compo/Time.js
diff --git a/...lomytseva/unsocial/compo/UnorderedList.js → ...ytseva/unsocial.10/compo/UnorderedList.js b/...lomytseva/unsocial/compo/UnorderedList.js → ...ytseva/unsocial.10/compo/UnorderedList.js
diff --git a/...-kolomytseva/unsocial/compo/createPost.js → ...lomytseva/unsocial.10/compo/createPost.js b/...-kolomytseva/unsocial/compo/createPost.js → ...lomytseva/unsocial.10/compo/createPost.js
diff --git a/...ria-kolomytseva/unsocial/compo/index.html → ...-kolomytseva/unsocial.10/compo/index.html b/...ria-kolomytseva/unsocial/compo/index.html → ...-kolomytseva/unsocial.10/compo/index.html
diff --git a/...ctoria-kolomytseva/unsocial/compo/main.js → ...ria-kolomytseva/unsocial.10/compo/main.js b/...ctoria-kolomytseva/unsocial/compo/main.js → ...ria-kolomytseva/unsocial.10/compo/main.js
diff --git a/staff/victoria-kolomytseva/unsocial.10/data/posts.js b/staff/victoria-kolomytseva/unsocial.10/data/posts.js
@@ -0,0 +1,14 @@
+const posts = [
+    {
+        image: 'https://fantasiapersonajes.es/blog/wp-content/uploads/2023/11/El-Grinch-de-Navidad.jpg',
+        text: 'here i am',
+        username: 'grinch',
+        date: new Date
+    },
+    {
+        image: 'https://static.abc.es/media/play/2018/11/30/[email protected]',
+        text: 'here i am',
+        username: 'grinch',
+        date: new Date
+    }
+]
diff --git a/staff/victoria-kolomytseva/unsocial.10/data/users.js b/staff/victoria-kolomytseva/unsocial.10/data/users.js
@@ -0,0 +1,4 @@
+const users = [
+    { name: 'Grinch', email: '[email protected]', username: 'grinch', password: '123123123' },
+    { name: 'Grinch', email: '[email protected]', username: 'grinch', password: '123123123' }
+]
diff --git a/staff/victoria-kolomytseva/unsocial.10/index.html b/staff/victoria-kolomytseva/unsocial.10/index.html
@@ -0,0 +1,53 @@
+<!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="styles.css">
+</head>
+
+<body>
+
+    <script src="data/users.js"></script>
+    <script src="data/posts.js"></script>
+
+    <script src="logic/authenticateUser.js"></script>
+    <script src="logic/createPost.js"></script>
+    <script src="logic/getPosts.js"></script>
+    <script src="logic/registerUser.js"></script>
+
+    <script src="compo/Compo.js"></script>
+    <script src="compo/Button.js"></script>
+    <script src="compo/Code.js"></script>
+    <script src="compo/Form.js"></script>
+    <script src="compo/Heading.js"></script>
+    <script src="compo/Image.js"></script>
+    <script src="compo/Input.js"></script>
+    <script src="compo/Label.js"></script>
+    <script src="compo/Link.js"></script>
+    <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>
+
+
+    <script src="view/CreatePost.js"></script>
+    <script src="view/Home.js"></script>
+    <script src="view/Login.js"></script>
+    <script src="view/PostItem.js"></script>
+    <script src="view/PostList.js"></script>
+    <script src="view/Register.js"></script>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/staff/victoria-kolomytseva/unsocial.10/logic/authenticateUser.js b/staff/victoria-kolomytseva/unsocial.10/logic/authenticateUser.js
@@ -0,0 +1,14 @@
+const authenticateUser = (username, password) => {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 8)
+        throw new Error('invalid password')
+
+    const user = users.find(user => user.username === username && user.password === password)
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+}
diff --git a/staff/victoria-kolomytseva/unsocial.10/logic/getPosts.js b/staff/victoria-kolomytseva/unsocial.10/logic/getPosts.js
@@ -0,0 +1 @@
+const getPosts = () => posts
diff --git a/staff/victoria-kolomytseva/unsocial.10/logic/registerUser.js b/staff/victoria-kolomytseva/unsocial.10/logic/registerUser.js
@@ -0,0 +1,26 @@
+const registerUser = (name, email, username, password, passwordRepeat) => {
+    if (name.length < 2)
+        throw new Error('invalid name')
+
+    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 < 8)
+        throw new Error('invalid password')
+
+    if (password !== passwordRepeat)
+        throw new Error('passwords do not match')
+
+    let user = users.find(user => user.username === username || user.email === email)
+
+
+    if (user !== undefined)
+        throw new Error('user already exists')
+
+    user = { name: name, email: email, username: username, password: password }
+
+    users.push(user)
+}
diff --git a/staff/victoria-kolomytseva/unsocial.10/main.js b/staff/victoria-kolomytseva/unsocial.10/main.js
@@ -0,0 +1,16 @@
+let loggedInUser = null
+
+const page = new Compo(document.querySelector('body'))
+console.log(page)
+
+
+const title = new Heading('Unsocial', 1)
+page.add(title)
+
+const login = new Login()
+page.add(login)
+
+// loggedInUser = users[0]
+let home
+// home = new Home()
+// page.add(home)
diff --git a/...kolomytseva/unsocial/proto-chain/index.js → ...omytseva/unsocial.10/proto-chain/index.js b/...kolomytseva/unsocial/proto-chain/index.js → ...omytseva/unsocial.10/proto-chain/index.js
diff --git a/.../victoria-kolomytseva/unsocial/styles.css → ...ctoria-kolomytseva/unsocial.10/styles.css b/.../victoria-kolomytseva/unsocial/styles.css → ...ctoria-kolomytseva/unsocial.10/styles.css
diff --git a/...a-kolomytseva/unsocial/view/CreatePost.js → ...olomytseva/unsocial.10/view/CreatePost.js b/...a-kolomytseva/unsocial/view/CreatePost.js → ...olomytseva/unsocial.10/view/CreatePost.js
diff --git a/...ictoria-kolomytseva/unsocial/view/Home.js → ...oria-kolomytseva/unsocial.10/view/Home.js b/...ictoria-kolomytseva/unsocial/view/Home.js → ...oria-kolomytseva/unsocial.10/view/Home.js
diff --git a/...ctoria-kolomytseva/unsocial/view/Login.js → ...ria-kolomytseva/unsocial.10/view/Login.js b/...ctoria-kolomytseva/unsocial/view/Login.js → ...ria-kolomytseva/unsocial.10/view/Login.js
diff --git a/...ria-kolomytseva/unsocial/view/PostItem.js → ...-kolomytseva/unsocial.10/view/PostItem.js b/...ria-kolomytseva/unsocial/view/PostItem.js → ...-kolomytseva/unsocial.10/view/PostItem.js
diff --git a/...ria-kolomytseva/unsocial/view/PostList.js → ...-kolomytseva/unsocial.10/view/PostList.js b/...ria-kolomytseva/unsocial/view/PostList.js → ...-kolomytseva/unsocial.10/view/PostList.js
diff --git a/...ria-kolomytseva/unsocial/view/Register.js → ...-kolomytseva/unsocial.10/view/Register.js b/...ria-kolomytseva/unsocial/view/Register.js → ...-kolomytseva/unsocial.10/view/Register.js
diff --git a/staff/victoria-kolomytseva/unsocial/.gitkeep b/staff/victoria-kolomytseva/unsocial/.gitkeep
diff --git a/staff/victoria-kolomytseva/unsocial/data/posts.js b/staff/victoria-kolomytseva/unsocial/data/posts.js
@@ -1,14 +1,14 @@
 const posts = [
     {
-        image: 'https://fantasiapersonajes.es/blog/wp-content/uploads/2023/11/El-Grinch-de-Navidad.jpg',
-        text: 'here i am',
-        username: 'grinch',
+        image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
+        text: 'here we are',
+        username: 'peterpan',
         date: new Date
     },
     {
-        image: 'https://static.abc.es/media/play/2018/11/30/grinch-kBPE--1248x698@abc.jpg',
+        image: 'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg',
         text: 'here i am',
-        username: 'grinch',
+        username: 'wendydarling',
         date: new Date
     }
-]
+]
diff --git a/staff/victoria-kolomytseva/unsocial/data/users.js b/staff/victoria-kolomytseva/unsocial/data/users.js
@@ -1,4 +1,4 @@
 const users = [
-    { name: 'Grinch', email: '[email protected]', username: 'grinch', password: '123123123' },
-    { name: 'Grinch', email: 'grincg@darling.com', username: 'grinch', password: '123123123' }
+    { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
 ]
diff --git a/staff/victoria-kolomytseva/unsocial/index.html b/staff/victoria-kolomytseva/unsocial/index.html
@@ -2,16 +2,24 @@
 <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="styles.css">
+    <link rel="stylesheet" href="style.css">
+
+    <style>
+        .pepito {
+            background-color: yellow;
+        }
+    </style>
 </head>
 
 <body>
+    <div id="root"></div>
 
     <script src="data/users.js"></script>
     <script src="data/posts.js"></script>
@@ -21,33 +29,11 @@
     <script src="logic/getPosts.js"></script>
     <script src="logic/registerUser.js"></script>
 
-    <script src="compo/Compo.js"></script>
-    <script src="compo/Button.js"></script>
-    <script src="compo/Code.js"></script>
-    <script src="compo/Form.js"></script>
-    <script src="compo/Heading.js"></script>
-    <script src="compo/Image.js"></script>
-    <script src="compo/Input.js"></script>
-    <script src="compo/Label.js"></script>
-    <script src="compo/Link.js"></script>
-    <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>
-
-
-    <script src="view/CreatePost.js"></script>
-    <script src="view/Home.js"></script>
-    <script src="view/Login.js"></script>
-    <script src="view/PostItem.js"></script>
-    <script src="view/PostList.js"></script>
-    <script src="view/Register.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="main.js"></script>
+
 </body>
 
 </html>
diff --git a/staff/victoria-kolomytseva/unsocial/logic/authenticateUser.js b/staff/victoria-kolomytseva/unsocial/logic/authenticateUser.js
@@ -1,7 +1,6 @@
 const authenticateUser = (username, password) => {
     if (username.length < 4 || username.length > 12)
         throw new Error('invalid username')
-
     if (password.length < 8)
         throw new Error('invalid password')
 

diff --git a/staff/victoria-kolomytseva/unsocial/logic/createPost.js b/staff/victoria-kolomytseva/unsocial/logic/createPost.js
@@ -0,0 +1,15 @@
+const createPost = (username, image, text) => {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    // TODO input validation (and throw error)
+
+    const post = {
+        image: image,
+        text: text,
+        username: username,
+        date: new Date
+    }
+
+    postMessage.push(post)
+}
diff --git a/staff/victoria-kolomytseva/unsocial/logic/getPosts.js b/staff/victoria-kolomytseva/unsocial/logic/getPosts.js
@@ -1 +1 @@
-const getPosts = () => posts
+const getPosts = () => posts
diff --git a/staff/victoria-kolomytseva/unsocial/logic/registerUser.js b/staff/victoria-kolomytseva/unsocial/logic/registerUser.js
@@ -16,8 +16,7 @@ const registerUser = (name, email, username, password, passwordRepeat) => {
 
     let user = users.find(user => user.username === username || user.email === email)
 
-
-    if (user !== undefined)
+    if (user !== underfined)
         throw new Error('user already exists')
 
     user = { name: name, email: email, username: username, password: password }

diff --git a/staff/victoria-kolomytseva/unsocial/main.js b/staff/victoria-kolomytseva/unsocial/main.js
@@ -1,16 +1,95 @@
 let loggedInUser = null
 
-const page = new Compo(document.querySelector('body'))
-console.log(page)
+const rootElement = document.getElementById('root')
+const root = ReactDOM.createRoot(rootElement)
 
+const title = React.createElement('h1', { style: { backgroundColor: 'red' } }, 'Hola, React')
 
-const title = new Heading('Unsocial', 1)
-page.add(title)
+const button = React.createElement('button', { type: 'button', onClick: () => alert('Clicked') }, 'Click me!')
+
+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', placeholder: 'Whatever!?' })
+const submit = React.createElement('button', { type: 'submit' }, 'Do')
+const form = React.createElement('form', {
+    onSubmit: event => {
+        event.preventDefault()
+
+        console.log(event.target.whatever.value)
+    }
+}, [input, submit])
+
+const link = React.createElement('a', {
+    href: '',
+    onClick: event => {
+        event.preventDefault()
+
+        console.log('link clicked')
+    },
+    style: {
+        color: 'magenta'
+    }
+}, 'click me')
+
+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'
+        }
+    },
+        content)
+
+    return box
+}
+//class Car extends React.Component { }
+// const Component = React.Component
+const { Component } = React
+class Car extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        const content = React.createElement('span', { style: { padding: '2px' } }, this.props.car)
+
+        return content
+
+    }
+
+}
+
+const blueCar = new Car({ car: '🚙' })
+const redCar = new Car({ car: '🚗' })
+const yellowCar = new Car({ car: '🚕' })
+
+root.render([
+    title,
+    button,
+    list,
+    blueCar.render(),
+    redCar.render(),
+    yellowCar.render(),
+    form,
+    link,
+    ReactiveEmoji({ emoji: '😊' }),
+    ReactiveEmoji({ emoji: '❤️' }),
+
+
+
+])
 
-const login = new Login()
-page.add(login)
 
-// loggedInUser = users[0]
-let home
-// home = new Home()
-// page.add(home)