Browse Source

preview for hash permalink

Sergio Álvarez 2 years ago
parent
commit
58373be109
3 changed files with 26 additions and 1 deletions
  1. 1 0
      package.json
  2. 21 1
      src/components/App.js
  3. 4 0
      src/index.css

+ 1 - 0
package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "react": "^16.4.0",
+    "react-clipboard.js": "^2.0.0",
     "react-dom": "^16.4.0",
     "react-scripts": "1.1.4",
     "spectre.css": "^0.5.1"

+ 21 - 1
src/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import axios from 'axios'
+import Clipboard from 'react-clipboard.js';
 import Tabs from './Tabs';
 import Fields from './Fields';
 import Opts from './Opts';
@@ -26,10 +27,28 @@ export default class App extends Component {
       PREG_SPLIT_NO_EMPTY: false,
       PREG_SPLIT_DELIM_CAPTURE: false,
       PREG_SPLIT_OFFSET_CAPTURE: false,
+      hash: window.location.hash,
       response: {}
     }
 
     this.timer = null
+    this.apiUrl = window.location.hostname === 'xrg.es'? 
+      'https://xrg.es/api': 
+      'http://'+ window.location.hostname +'/xrg.es/main.php' // dev
+  }
+
+  componentDidMount() {
+    window.addEventListener("hashchange", this.hashChange, false)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("hashchange", this.hashChange, false)
+  }
+
+  hashChange = () => {
+    const hash = window.location.hash
+    console.log(hash)
+    //this.setState({ hash })
   }
 
   api = () => {
@@ -37,7 +56,7 @@ export default class App extends Component {
     const { loading, response, ...state } = this.state
 
     this.setState({ loading: true }, () => {
-      axios.post('http://'+ window.location.hostname +'/xrg.es/main.php', state)
+      axios.post(this.apiUrl, state)
       .then((res) => {
         this.setState({ response: res.data, loading: false })
       })
@@ -73,6 +92,7 @@ export default class App extends Component {
           </section>
           <section className="navbar-section">
             <a href={'https://php.net/'+method} className="btn btn-link">docs</a>
+            <Clipboard className="btn tooltip tooltip-bottom" data-tooltip="Copy permalink" data-clipboard-text="Copy permalink">#gf232g23</Clipboard>
             <a href="#help" className="btn btn-primary">help</a>
           </section>
         </header>

+ 4 - 0
src/index.css

@@ -9,6 +9,10 @@
   margin-left: 10px;
 }
 
+.navbar-section button {
+  margin: 0 10px;
+}
+
 .container {
   max-width: 960px;
 }