Реагировать на генерацию и загрузку кода данных из строки запроса URL - PullRequest
Новая
       33

Реагировать на генерацию и загрузку кода данных из строки запроса URL

0 голосов
/ 10 февраля 2020

Я создаю проект таблицы символов D & D, и я хочу, чтобы он был доступен для совместного использования, просто скопировав URL со строкой запроса.

Подход, который я хочу сделать sh, похож на веб-сайт coriolis.io , инструмент для создания космических кораблей и обмена ими. Когда вы изменяете сборку, генерируется короткий код строки запроса, и вы можете просто скопировать и вставить URL, чтобы поделиться им с другими, как этот: https://coriolis.io/outfit/imperial_eagle?code=0p5t5F5l0d5s8f21g17170040542j67.Iw1-EA%3D%3D.CwBj5AmaQRk4wg%3D%3D&bn=Raven

Я уже реализовал React-router и установил генерацию строки запроса, он генерирует полный объект json, но я боюсь, что это будет слишком долго, так как я добавляю новые компоненты и данные, мне интересно, если я делаю правильный подход, я Я ищу способ сделать строку запроса короче, как какое-то шифрование, но я понятия не имею, как сделать что-то вроде того, как coriolis.io генерирует зашифрованный код, чтобы сделать строку запроса короче. Буду признателен за помощь в правильном подходе к достижению этой цели.

Вот мой текущий код для его генерации: 

// App.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import { Main } from './components'

const App = () =>{
  return(
    <Router>
      <Route path="/" component={Main}/> // I'm putting the main component inside a route to be able to read and write into the adress bar
    </Router>
  )
}

export default App;

// main.js
import React, { useState, useEffect, useRef } from 'react'
import { Attributes, Skills } from './';
// import queryString from 'query-string';

const Main = props => {
    const [attr, setAttr] = useState({
        for: {
            base: 10,
            mod: 0,
        },
        dex: {
            base: 10,
            mod: 0,
        },
        con: {
            base: 10,
            mod: 0,
        },
        int: {
            base: 10,
            mod: 0,
        },
        sag: {
            base: 10,
            mod: 0,
        },
        cha: {
            base: 10,
            mod: 0,
        }
    })

    const setQueryString = qsValue => { 
        const newurl = window.location.protocol + "//" +
                    window.location.host + 
                    window.location.pathname + 
                    '?attr='+qsValue;

        window.history.pushState({ path: newurl }, "", newurl);
    };

    useEffect(() => {
        if (firstUpdate.current) { // Verifying if the component has just been mounter

            let attrSave = localStorage.attributes
            if (attrSave !== undefined) {
                setAttr(JSON.parse(attrSave));
            }

            firstUpdate.current = false; // Changing value after component mount
        } else {
            localStorage.setItem('attributes', JSON.stringify(attr))
            setQueryString(JSON.stringify(attr))
        }
    }, [attr])
// setQueryString is called within a useEffect() when the attr is modified

    const handleAttrChange = (e) => {
        const name = e.target.name;
        const value = parseInt(e.target.value);
        const modifier = (value >= 10) ? Math.floor((value - 10) / 2) : Math.ceil((value - 10) / 2);

        setAttr({ ...attr, [name]: { base: value, mod: modifier } });
    }

    return (
        <>
            {/* <Character/> */}
            <Attributes handleChange={handleAttrChange} attr={attr} />
            <Skills attr={attr} />
        </>
    )
}

export default Main

Заранее спасибо

...