tres

src/App.css

@@ -1,38 +1,56 @@
+@font-face {
+  src: url("fonts/JetBrainsMono-Regular.woff2");
+  font-family: mono;
+}
+
+@font-face {
+  src: url("fonts/JetBrainsMono-Italic.woff2");
+  font-family: JetbrainsItalic;
+}
+
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  align-content: center;
 }
 
-.App-link {
-  color: #61dafb;
+body {
+  background-color: #1B1A1F;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.addForm {
+  margin-top: 200px;
+}
+
+.linkInput {
+  margin-top: 100px;
+  width: 300px;
+  height: 30px;
+  padding: 0.2em 0.5em;
+  font-family: JetBrainsItalic;
+  border-radius: 15px;
+}
+
+.title {
+  color: #FFFFFF;
+  font-size: xxx-large;
+  font-family: JetBrainsItalic;
+}
+
+h1, h2 {
+  font-family: mono;
+}
+
+.shortButton {
+  height: 50px;
+  width: 150px;
+  background-color: #322C77;
+  color: antiquewhite;
+  border: #322C77;
+  border-radius: 5%;
+  font-size: medium;
+  margin-left: 15px;
+  margin-top: 30px;
+  font-family: JetBrainsItalic;
+  border-radius: 25px;
 }

src/App.js

@@ -1,24 +1,23 @@
 import logo from './logo.svg';
 import './App.css';
 
+import {BrowserRouter, Routes, Route} from "react-router-dom";
+import AddLink from "./components/AddLink";
+import Redirecter from './components/Redirecter'
+import NotFound from './components/NotFound'
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <div className="App">
+          <BrowserRouter>
+              <Routes>
+                  <Route path="add" element={<AddLink/>} />
+                  <Route path="/" element={<AddLink/>} />
+                  <Route path="404" element={<NotFound/>} />
+                  <Route path="*" element={<Redirecter/>} />
+              </Routes>
+          </BrowserRouter>
+      </div>
   );
 }
 

src/components/AddLink.js

@@ -0,0 +1,70 @@
+import {React, Component} from "react";
+import "../App.css"
+import "../config"
+
+import axios from 'axios'
+
+
+class AddLink extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {value: ''}
+        this.handleChange = this.handleChange.bind(this)
+        this.short = this.short.bind(this)
+        this.createLink = this.createLink.bind(this)
+    }
+
+    handleChange (event) {
+        this.setState({value: event.target.value})
+    }
+
+    short () {
+        if (this.state.value === "") {
+            return
+        }
+        const linkName = this.createLink(this.state.value)
+        console.log(linkName)
+        this.setState({value: `https://timka.su/${linkName}`})
+    }
+
+    createLink(url) {
+        axios.post("https://link.timka.su",
+            {name: makeid(6), url: url}).then(function (response) {
+                console.log(response.data.name)
+            return `${response.data.name}`
+        })
+    }
+
+    render () {
+        return <div className="addForm">
+            <h3 className="title">Timka ShortLink</h3>
+            <div className="form">
+                <input
+                    name="link"
+                    type="url"
+                    placeholder="Link to be short"
+                    className="linkInput"
+                    value={this.state.value}
+                    onChange={this.handleChange}
+                    autoComplete="off"
+                    required/>
+                <br/>
+                <button onClick={this.short} className="shortButton">Short!</button>
+            </div>
+        </div>
+    }
+}
+
+function makeid(length) {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    let counter = 0;
+    while (counter < length) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        counter += 1;
+    }
+    return result;
+}
+
+export default AddLink

src/components/NotFound.js

@@ -0,0 +1,10 @@
+import {React, Component} from "react";
+
+
+class NotFound extends Component {
+    render () {
+        return <h2>Not found</h2>
+    }
+}
+
+export default NotFound

src/components/Redirecter.js

@@ -0,0 +1,25 @@
+import {React, Component} from "react";
+import {resolve} from "crypto-browserify/example/bundle";
+import "../config"
+
+const axios = require('axios').default
+
+
+class Redirecter extends Component {
+    render () {
+        var parts = window.location.href.split('/')
+        var linkName = parts[3]
+        console.log(linkName)
+        axios.get(`https://link.timka.su?link=${linkName}`).then(
+            function (response) {
+                const json = response.toString()
+                const obj = JSON.parse(json)
+                console.log(obj)
+                window.location.href = obj.url
+            }
+        )
+        return
+    }
+}
+
+export default Redirecter;

src/css/addForm.css

@@ -0,0 +1,9 @@
+.add-link {
+    align-content: center;
+    align-items: center;
+}
+
+body {
+    align-content: center;
+    align-items: center;
+}