initial migration

src/Pages/Auth.jsx

@@ -0,0 +1,79 @@
+import React, {useState} from "react"
+import axios from 'axios'
+
+function Auth() {
+
+    const [loading, setLoading] = useState(true)
+    const [permanentCode, setPermanentCode] = useState(false)
+
+    const getPermanentCode = () => {
+
+        const temporalCode = new URLSearchParams(window.location.search).get("code")
+        console.log(temporalCode);
+        
+        if (!temporalCode) {
+            console.log("No temporal code")
+            return
+        }
+
+        let requestUrl
+
+        if (process.env.REACT_APP_ENV_MODE === "production") {
+            requestUrl = "https://telegram-to-notion-backend.herokuapp.com/api/v1/auth"
+        } else {
+            requestUrl = "http://localhost:5050/api/v1/auth"
+        }
+
+        axios({
+            method: "POST",
+            url: requestUrl,
+            headers: {'Content-Type': 'application/json'},
+            data: {code: temporalCode}
+        })
+        .then(res => {
+            console.log(res)
+            setPermanentCode(res ? res.data : null)
+        })
+        .catch(err => {
+            console.log(err.response)
+            setPermanentCode(false)
+        })
+        .finally(() => {
+            setLoading(false)
+        })
+    }
+    React.useEffect(() => {
+        getPermanentCode()
+    }, [])
+
+    
+    return (
+        <div className="auth">
+            {
+                // loading ?
+                //     // <Loading />
+                //     <h1>Loading</h1>
+                // :
+                // <>
+                //     {
+                //         permanentCode ?
+                //         <>
+                //             <h3>Copy the following code on the Telegram chat</h3>
+                //             <div className="success">
+                //                 <code className="code-selection">
+                //                     {permanentCode}
+                //                 </code>
+                //             </div>
+                //         </>
+                //         :
+                //         <div className="error">
+                //                 <h3>There has been an error getting the code. Please try again later.</h3>
+                //         </div>
+                //     }
+                // </>
+            }
+        </div>
+    )
+}
+
+export default Auth

src/Pages/Index.jsx

@@ -0,0 +1,59 @@
+import styled from "styled-components"
+
+function Index() {
+
+    const Div = styled.div`
+
+        .title-list {
+
+            color: #000;
+
+            li {
+                
+                a {
+                    width: fit-content;
+                    color: #000;
+                    text-decoration: none;
+                    
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+                    
+                h2 {
+                    display: inline-block;
+                    margin: 0;
+                }
+
+                span {
+                    display: inline-block;
+                    margin-left: 1vw;
+                }
+            }
+        }
+    `
+
+    const listData = [
+        {text: "Free"},
+        {text: "Open Source", link: "https://github.com/FranP-code/Telegram-to-Notion-Bot"},
+        {text: "Unlimited"},
+        {text: "Forever", secondaryText: "(while I can afford it)"}
+    ]
+
+    return (
+        <Div className="index">
+            <ul className="title-list">
+                {
+                    listData.map((obj, index) => (
+                        <li key={index}>
+                            {obj.link ? <a href={obj.link} children={<h2>{obj.text}</h2>}/> : <h2>{obj.text}</h2>}
+                            {obj.secondaryText ? <span>{obj.secondaryText}</span> : null}
+                        </li>
+                    ))
+                }
+            </ul>
+        </Div>
+    )
+}
+
+export default Index

src/components/Header.jsx

@@ -0,0 +1,9 @@
+function Header() {
+    return (
+        <header>
+            <h1>Telegram to Notion</h1>
+        </header>
+    )
+}
+
+export default Header