How can I write a txt file in React?

Question

I have a issue. I'm doing a project with React. My project is simply for listening to music on Spotify. It is necessary to train the code of the room entered from the home page to the url extension that I will use for Spotify. The api link I use for Spotify uses node.js, so it allows file reading, but I want it to write the code of the room I clicked in React at that time into that txt file. How can I do that?

My only wish is to save the room.id variable in the homepage file into the txt file in another way. Example of homepage.js

      <Heading as="h1" mb={6}>
            Rooms
            </Heading>
            <Divider orientation="horizontal" />
           {rooms.map((room)=> (
              <ListItem>
              <ListItemText primary={room.roomName} secondary={room.roomInfo}/>
             
               {/* <Link to={`/room/${room.id}`}></Link> */}
            
                <Link to={`/room/${room.id}`}>
                <Button>
                Join Room
                
                </Button>
                </Link>
                
              </ListItem>))}

Example of Spotify redirect code..

/**
 * This is an example of a basic node.js script that performs
 * the Authorization Code oAuth2 flow to authenticate against
 * the Spotify Accounts.
 *
 * For more information, read
 * https://developer.spotify.com/web-api/authorization-guide/#authorization_code_flow
 */

 var express = require('express'); // Express web server framework
 var request = require('request'); // "Request" library
 var cors = require('cors');
 var querystring = require('querystring');
 var cookieParser = require('cookie-parser');


 
 /**
  * Generates a random string containing numbers and letters
  * @param  {number} length The length of the string
  * @return {string} The generated string
  */
 var generateRandomString = function(length) {
   var text = '';
   var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
   for (var i = 0; i < length; i++) {
     text += possible.charAt(Math.floor(Math.random() * possible.length));
   }
   return text;
 };
 
 var stateKey = 'spotify_auth_state';
 
 var app = express();
 
 app.use(express.static(__dirname + '/public'))
    .use(cors())
    .use(cookieParser());
 
 app.get('/login', function(req, res) {
 
   var state = generateRandomString(16);
   res.cookie(stateKey, state);  
   // your application requests authorization
   var scope = 'user-read-private user-read-email user-read-playback-state user-modify-playback-state user-read-currently-playing';
   res.redirect('https://accounts.spotify.com/authorize?' +
     querystring.stringify({
       response_type: 'code',
       client_id: client_id,
       scope: scope,
       redirect_uri: redirect_uri,
       state: state
     }));
 });
 
 app.get('/callback', function(req, res) {
 
   // your application requests refresh and access tokens
   // after checking the state parameter
 
  
   var code = req.query.code || null;
   var state = req.query.state || null;
   var storedState = req.cookies ? req.cookies[stateKey] : null;
 
   if (state === null || state !== storedState) {
     res.redirect('/#' +
       querystring.stringify({
         error: 'state_mismatch'
       }));
   } else {
     res.clearCookie(stateKey);
     var authOptions = {
       url: 'https://accounts.spotify.com/api/token',
       form: {
         code: code,
         redirect_uri: redirect_uri,
         grant_type: 'authorization_code'
       },
       headers: {
         'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
       },
       json: true
     };
 
     request.post(authOptions, function(error, response, body) {
       if (!error && response.statusCode === 200) {
 
         var access_token = body.access_token,
             refresh_token = body.refresh_token;
 
         var options = {
           url: 'https://api.spotify.com/v1/me',
           headers: { 'Authorization': 'Bearer ' + access_token },
           json: true
         };
 
         // use the access token to access the Spotify Web API
         request.get(options, function(error, response, body) {
           console.log(body);
         });
         var fs = require('fs');
         var roomCodeTxt = fs.readFileSync('roomCodeText.txt', 'utf-8');
        
 
         // we can also pass the token to the browser to make requests from there
         res.redirect(`http://localhost:3000/room/${roomCodeTxt}\#`  +
           querystring.stringify({
             access_token: access_token,
             refresh_token: refresh_token
           }));
       } else {
         res.redirect('/#' +
           querystring.stringify({
             error: 'invalid_token'
           }));
       }
     });
   }
 });
 
 app.get('/refresh_token', function(req, res) {
 
   // requesting access token from refresh token
   var refresh_token = req.query.refresh_token;
   var authOptions = {
     url: 'https://accounts.spotify.com/api/token',
     headers: { 'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')) },
     form: {
       grant_type: 'refresh_token',
       refresh_token: refresh_token
     },
     json: true
   };
 
   request.post(authOptions, function(error, response, body) {
     if (!error && response.statusCode === 200) {
       var access_token = body.access_token;
       res.send({
         'access_token': access_token
       });
     }
   });
 });
 
 console.log('Listening on 8888');
 app.listen(8888);
 

Answer 1

You can write to a file in node also. See fs.writeFileSync (because this is a server, fs.writeFile or fs.promises.writeFile would help with performance, but for something this little, it shouldn't really matter).

The basic idea is in node, when the user clicks your button, you'll send a request to your server to write a file. Something roughly like this:

// Using the native fetch API
const joinRoom = roomId => {
  return fetch('/write/to/file/endpoint', {
    body: JSON.stringify({ roomId: roomId }),
    // This header lets the server know that what you're sending is JSON
    headers: { 'Content-Type': 'application/json' },
    method: 'POST'
  })
}

// With axios (Added this example in reponse to the O.P.'s comment)
const joinRoom = roomId => {
  // Axios will add the Content-Type: application/json header by default
  return axios.post('/write/to/file/endpoint', { roomId: roomId })
}

...

<button onClick={() => joinRoom(room.id)}>Join Room</button

In your server, you just need to handle requests to this new endpoint and call fs.writeFileSync('roomCodeText.txt', roomId, 'utf-8'). The specific details for how this works depends on how you're handling requests (in vanilla node? With the express library?) You can refer to this stackoverflow question on how to retrieve a POST body in node. There's answers for both express and node. The specific answer I linked to explains how to do it with vanilla node. It assumed that url-encoded data was send in the POST body. We're sending JSON in the above example, so you just need to take that code snippet and replace qs.parse(body) with JSON.parse(body).