DEV Community: Nar Zantaria

How to create and download xlsx on the client?

Nar Zantaria — Tue, 24 Nov 2020 20:46:24 +0000

Can you please tell me if this code can be simplified, or is it done correctly:

import React, { Fragment } from 'react';
import xlsx from 'node-xlsx';
import download from 'downloadjs';

function TableDownload({ data }) {
  return (
    <Fragment>
      <button onClick={_ => {
        const qwerty = [[1, 2, 3], ['a', 'b', 'c']];
        let buffer = xlsx.build([{ name: "mySheetName", data: qwerty }]).toString('base64');
        download(atob(buffer), 'data.xlsx', { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
      }}>12345</button>
    </Fragment>
  );
}

export default TableDownload;

Everything happens on the client side: a file is created, which is then downloaded, without reloading the page. The data is first converted to the "base64" string and then decoded. Everything works, but I want the code to be "in line with tradition", and there was nothing superfluous in it.

Regards.

Are there any other options for implementing SEO in the Node / Vue project, other than Nuxt JS?

Nar Zantaria — Sat, 20 Jul 2019 04:45:09 +0000

Hello!
I'm going to work with backend in a Node/Vue project. Tell me, please, what are the options for implementing a SEO other than Nuxt JS?
I usually worked with a Node / React stack and more familiar with Next JS, which is restricted to React.
Can you please tell some alternative options?
Thanks for any help!

How to change form inputs in React and post using axios?

Nar Zantaria — Mon, 15 Jul 2019 06:22:14 +0000

Hi there!

I'm learning React, but not strong yet. I use a component with form, that recieve data from express backend using axios.
There is no problems with get the correct data and render it in the form inputs, but i can't cope how to change input values and post using axios. I read something about handleChange() and other staff, but it's too hard yet.

The JSON looks like this:

{
    "data": [
        {
            "_id": "5d28a6fcec97b111c2f5867d",
            "phone": "+1 (111) 111 11 11",
            "email": "shutruk@gmail.com",
            "title": "khkjhkjhkj",
            "longTitle": "lkjlkjlkjlk",
            "introTitle": "Shutruk",
            "introLongTitle": "Shutruk-Nahhunte",
            "videoLink": "khkjhkjhkj",
            "introText": "lkjlkjlkjlk",
            "__v": 0
        }
    ]
}

Here is the component:

import React, { Component } from 'react';
import axios from 'axios';

class Misc extends Component {
  state = {
    data: [],
    loading: true,
    error: false,
  }
  componentDidMount() {
    axios.get('http://localhost:5555/data')
      .then(res => {
        const data = res.data.data; // get the data array instead of object
        this.setState({ data, loading: false });
        console.log(data);
      })
      .catch(err => { // log request error and prevent access to undefined state
        this.setState({ loading: false, error: true });
        console.error(err); 
      })
  }
  render() {
    if (this.state.loading) {
      return(
        <div>
          <p> Loading... </p>
        </div>
      )
    }
    if (this.state.error || !this.state.data[0]) { // if request failed or data is empty don't try to access it either
      return(
        <div>
          <p> An error occured </p>
        </div>
      )
    }
    return (
      <form action="">
        <h2 className="center" >Change data</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Phone:</h5>
        <input type="text" value={ this.state.data[0].phone } />
        <h5>Email:</h5>
        <input type="text" value={ this.state.data[0].email } />
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].title }/>
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].longTitle }/>
        <h2 className="center" >Intro:</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].introTitle } />
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].introLongTitle } />
        <h5>Link to video:</h5>
        <input type="text" value={ this.state.data[0].videoLink } />        
        <h5>Text:</h5>
        <textarea name="" id="" cols="30" rows="10" value={ this.state.data[0].introText }></textarea>
        <button type="submit" className="btn-large waves-effect waves-light xbutton">Save</button>
      </form>
    );
  }
}

export default Misc;

Many many thanks for any help!))