How can I use redux actions with react index.js?

I am using redux with a basic react app. I am building a simple checkAuthenticated redux action that connects with my django backend and verifies the users authentication state so that when they refresh the page it doesnt log them out. The crux of my issue is that I want to run checkAuthenticated only once when they first connect to the page. I am not sure how best to implement this. I have tried wrapping the create root in a function and directly calling checkAuthenticated which doesnt call it, and I cant use connect because it is not a component.

index.js

// other imports
import { checkAuthenticated } from './actions/auth'
 

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />,
  },
  {
    path: '/create-post',
    element: <CreatePostPage />,
  },
  {
    path: '/login',
    element: <LoginPage />
  },
  {
    path: '/register',
    element: <RegisterPage />
  }
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      // this is how I want it { checkAuthenticated }
      <RouterProvider router={router} />
    </Provider>
    
  </React.StrictMode>
);

auth.js

export const checkAuthenticated = () => async dispatch => {
    // doing authentication stuff
}

does the order of DOM matter?

I made an html file. What I wanted to do was:

  1. show image, name, description of character
  2. make two buttons(previous, next) that changes the page shown, which disappears if the current page is the first or last.
  3. make href on the image if the page is available, which I decide on manual

and the following accomplishes all that.

    maxNum = 3 //number of pages-1
    pgNum = 0 //page number-1

    chara = [
    {   
        name: "A",
        aspect: "apple",
        description: "sweet"
    },

    {   
        name: "B",
        aspect: "banana",
        description: "soft"
    },

    {   
        name: "C", 
        aspect: "creativity",
        description: "shiny",
    },

    {   
        name: "D", 
        aspect: "dog",
        description: "loud",
    },
    ]

    update();
    toggleVisible();

    function toggleVisible() {
        if(pgNum==maxNum) {
            document.getElementById("next").style.visibility = "hidden";
        }
        else{
            document.getElementById("next").style.visibility = "visible";
        }
      
        if(pgNum==0) {
            document.getElementById("prev").style.visibility = "hidden";
        }
        else{
            document.getElementById("prev").style.visibility = "visible";
        }
    }

    function update() {
        image = document.getElementById("img");
          image.src = "../profile/" + chara[pgNum].aspect+ ".png";
        image.alt = "image of " + chara[pgNum].name
        document.getElementById("charaName").innerHTML = chara[pgNum].name + ", <br>the " + chara[pgNum].aspect + " chara";
      document.getElementById("charaDes").innerHTML = chara[pgNum].description;
        document.getElementById("page").innerHTML = (pgNum + 1) + "/" + (maxNum + 1);
        document.getElementById("charaPage").innerHTML = "../page/" + chara[pgNum].aspect + ".html";
    }

    function imgRedirect(){
        if(pgNum==5){
            window.open("../page/"+chara[pgNum].aspect+".html");
        }
    }


//buttons
    function previous() {
        if(pgNum >0) {
        pgNum--;
        }
        update();
        toggleVisible();
    }


    function next() {
        if(pgNum < maxNum) {
        pgNum++;
        }
        update();
        toggleVisible();
    }
    <p id="charaName"></p>
                <p id="charaDes"></p>
                <p id="page"></p>
                <img id="img" onclick="imgRedirect()">
            <button id="prev" onclick="previous()">previous</button>
            <button id="next" onclick="next()">next</button>

however the following doesn’t show the page number or the buttons.

        maxNum = 3 //number of pages-1
        pgNum = 0 //page number-1

        chara = [
        {   
            name: "A",
            aspect: "apple",
            description: "sweet"
        },

        {   
            name: "B",
            aspect: "banana",
            description: "soft"
        },

        {   
            name: "C", 
            aspect: "creativity",
            description: "shiny",
        },

        {   
            name: "D", 
            aspect: "dog",
            description: "loud",
        },
        ]

        update();
        toggleVisible();

        function toggleVisible() {
            if(pgNum==maxNum) {
                document.getElementById("next").style.visibility = "hidden";
            }
            else{
                document.getElementById("next").style.visibility = "visible";
            }
          
            if(pgNum==0) {
                document.getElementById("prev").style.visibility = "hidden";
            }
            else{
                document.getElementById("prev").style.visibility = "visible";
            }
        }

        function update() {
            image = document.getElementById("img");
              image.src = "../profile/" + chara[pgNum].aspect+ ".png";
            image.alt = "image of " + chara[pgNum].name
            document.getElementById("charaName").innerHTML = chara[pgNum].name + ", <br>the " + chara[pgNum].aspect + " chara";
          document.getElementById("charaDes").innerHTML = chara[pgNum].description;
          document.getElementById("charaPage").innerHTML = "../page/" + chara[pgNum].aspect + ".html";
          document.getElementById("page").innerHTML = (pgNum + 1) + "/" + (maxNum + 1);

        }

        function imgRedirect(){
            if(pgNum==5){
                window.open("../page/"+chara[pgNum].aspect+".html");
            }
        }


    //buttons
        function previous() {
            if(pgNum >0) {
            pgNum--;
            }
            update();
            toggleVisible();
        }


        function next() {
            if(pgNum < maxNum) {
            pgNum++;
            }
            update();
            toggleVisible();
        }
        <p id="charaName"></p>
                    <p id="charaDes"></p>
                    <p id="page"></p>
                    <img id="img" onclick="imgRedirect()">
                <button id="prev" onclick="previous()">previous</button>
                <button id="next" onclick="next()">next</button>

the only differences were order of “page” and “charaPage”. what is going on?

Setting scroll height of div on mount causing error React

I have the following div/container which simply contains multiple <p/> tags. The container has a ref called divRef which is defined at the top of the code using useRef and is initialized to null

      <div ref={divRef} style={styles.messageListContainer}>
            <p>Placeholder</p>
            // multiple more <p/> tags here
      </div>

Here is the CSS for the container:

messageListContainer: {
    height: '100vh`,
    width: '100%',
    paddingBottom: 20,
    flexDirection: "column",
    display: "flex",
    overflow: "auto",
},

On mount, I want to the div to automatically be at the bottom end, and then users are able to scroll up in order to see previous content. I don’t want to use scrollIntoView as I don’t want the user to see the scrolling animation, I want the div to automatically be at the bottom end.

I try to accomplish this using the following useEffect, however I get the error: Cannot read properties of null (reading 'scrollHeight'). Why does this error occur, and how can I accomplish my desired behaviour?

useEffect to set the scroll at the bottom of the div:

   useEffect(() => {
        divRef.current.scrollTop = divRef.current.scrollHeight
    }, [])

Reference a Vue3 function that’s defined in script setup, from HTML

I’m trying to implement a basic Google Login in Vue3 SFC, using the Google API. The Google login code is this HTML:

<component src="https://accounts.google.com/gsi/client" :is="'script'"></component>

  <div id="g_id_onload"
       data-client_id="454813487606-q3gep6aurieacd3kj02upb6fcfh2sqqb"
       data-callback="handleCredentialResponse">
  </div>
  <div class="g_id_signin" data-type="standard"></div>

The value of the data-callback attribute identifies the function to call after a successful Google login, in this case the function handleCredentialResponse.

I’ve defined the callback function handleCredentialResponse in the script setup code as follows:


<script setup lang="ts">

import { authStore } from '@/stores/authStore';
import { User } from '@/stores/authStore';
import { useRouter } from 'vue-router';

const router = useRouter();
const auth = authStore()

function handleCredentialResponse(googleUser: any) {

  fetch('https://localhost:7237/myApi/ValidateToken?token=' + googleUser.credential, {        
    method: "GET",          
  })
  .then(response => {
      return response.json();
  })
  .then(data => {
      auth.user = new User("Mr Test", data.token);
      router.push(auth.returnUrl)
  })
}

</script>

The callback function handleCredentialResponse is never called. I can get the callback to work correctly if I define handleCredentialResponse in the index.html file, but in that case I don’t have access to the store or router.

I’ve tried adding defineExpose({handleCredentialResponse}) but that didn’t work.

I assume I’m missing something very simple, I’m new to Vue3.

How to make textcontent dissapear on hover using only css?

I had to generate 6 random colors and show the rgb and hex code with texcontent on each rectangles using javascript. that part is done. now i have to make them appear only on hover. i am having difficulties. i have been told it is possible to do it using only CSS. I am beginner so if possible to help me using the easiest way possible… thanks

function decimalToHex(decimalNumber){
let hexadecimalNumber = decimalNumber.toString(16);

if(hexadecimalNumber.length === 1){
    return '0' + hexadecimalNumber;
}

return hexadecimalNumber;
}

let allSquares = document.querySelectorAll('.square');
let randomColorOne = document.querySelector('.square--one');
let randomColorTwo = document.querySelector('.square--two');
let randomColorThree = document.querySelector('.square--three');
let randomColorFour = document.querySelector('.square--four');
let randomColorFive = document.querySelector('.square--five');
let randomColorSix = document.querySelector('.square--six');
let btnRandom = document.querySelector('.btn--random');


function getColors(){
let red = Math.round (Math.random() * 255);
let green = Math.round (Math.random() * 255);
let blue = Math.round(Math.random()*255);
let redHexa = decimalToHex(red);
let greenHexa = decimalToHex(green);
let blueHexa = decimalToHex(blue);
let fullRgbColor = 'rgb('+ red +', ' + green + ', ' + blue +')';
let fullHexaColor = '#' + redHexa + greenHexa + blueHexa;


return [fullRgbColor, fullHexaColor];
}

btnRandom.addEventListener('click', () => {
for(let square of allSquares){
    let colors = getColors ();
    console.log(colors [0]);
    square.style.backgroundColor = colors[0];
    square.textContent = 'HEX ' + colors[1] + ' ' + colors[0];
}
});

for(let square of allSquares){
let colors = getColors();
square.style.backgroundColor = colors[0];
square.textContent = 'HEX ' + colors[1] + ' ' + colors[0];
}
.square{
height: 900px;
width: 500px;
background-color: black;
border: 5px solid white;;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.btn--random{
width: 10%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-top: 20px;
margin-left: 45%;
font-size: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: darkcyan;
cursor: pointer;
}


.square{
color: transparent;
}

.square:hover{

}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<script src="app.js" defer></script>
<title>Document</title>
</head>
<body>
<header>
    <h1>Générateur de couleurs</h1>
</header>
<h2>Appuyez sur le bouton pour générer vos couleurs.</h2>
<main class="main_container">
    <div class="square square--one hover"></div>
    <div class="square square--two hover"></div>
    <div class="square square--three hover"></div>
    <div class="square square--four hover"></div>
    <div class="square square--five hover"></div>
    <div class="square square--six hover"></div>
</main>
<button class="btn--random">RANDOM</button>
</body>
</html>

uploading 2 seperate file inputs with app script

my code is able to uplolad to the google sheet but not the files anyone assist wth modification to upload files and shhet update same time

 <form method="post" name="google-sheet">
              <div class="form first">
                  <div class="details personal">
                      <span class="title">Personal Details</span>
  
                      <div class="fields">
                          <div class="input-field">
                              <label for="fname">First Name</label>
                              <input name="First-Name" type="text" placeholder="Enter your first name" required>
                          </div>
  
                          <div class="input-field">
                              <label for="fname">Last Name</label>
                              <input name="Last-Name" type="text" placeholder="Enter your last name" required>
                          </div>
  
                          <div class="input-field">
                              <label for="fname">Email</label>
                              <input name="Email" type="email" placeholder="Enter your email" required>
                          </div>
  
                          <div class="input-field">
                              <label for="fname">Mobile Number</label>
                              <input name="Number" type="tel" placeholder="Enter mobile number" required>
                          </div>
  
                          <div class="input-field">
                              <label for="fname">Gender</label>
                              <select name="Gender" required>
                                  <option disabled selected>Select gender</option>
                                  <option>Male</option>
                                  <option>Female</option>
                                  
                              </select>
                          </div>
                          <div class="input-field">
                              <label for="fname">Marital Status</label>
                              <select name="Marital-Status" required>
                                  <option disabled selected>Select Status</option>
                                  <option>Single</option>
                                  <option>Married</option>
                              </select>
                          </div>

                         
                  <div class="details ID">
                      <span class="title"></span>
                      <span class="title">Applicacants Documents</span>
                      <div class="fields">
                       
                          <div class="input-field">
                              <label for="fname">NRC</label>
                              <input type="file" name="myFile1" placeholder="Enter your email" required style="border: none; background-color: cadetblue;">
                          </div>
                          
                      </div>
                      <div class="fields">
                          
                          <div class="input-field">
                              <label for="fname">Bank Statement/Recent Payslip</label>
                              <input type="file" name="myFile2" placeholder="Enter your email" required style="border: none; background-color: cadetblue;">
                          </div>
                          
                      </div>
                         <form/>



this is my html script form handler 

const scriptURL = ‘https://script.google.com/macros/s/AKfycbxs5e-6vCqoK-LhTJNaLq2pjo5BQnFl3bS1N9xnXZzryE2s7aGQS2kGPfryR8V9iucAwQ/exec’
const form = document.forms[‘google-sheet’]

form.addEventListener(‘submit’, e => {
e.preventDefault()
fetch(scriptURL, { method: ‘POST’, body: new FormData(form) })
.then(response => alert(“Thanks for Your Application..! We Will Contact You Soon…”))
.catch(error => alert(‘Error! in Submitting Details, Please try Again’, error.message))
form.reset()
})



and the google site script

var sheetName = ‘Sheet1’
var scriptProp = PropertiesService.getScriptProperties()

    function intialSetup () {
      var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
      scriptProp.setProperty('key', activeSpreadsheet.getId())
    }

    function doPost (e) {
      var lock = LockService.getScriptLock()
      lock.tryLock(10000)

      try {
        var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
        var sheet = doc.getSheetByName(sheetName)

        var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
        var nextRow = sheet.getLastRow() + 1

        var newRow = headers.map(function(header) {
          return header === 'Date' ? new Date() : e.parameter[header]
        })

        sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

        return ContentService
          .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
          .setMimeType(ContentService.MimeType.JSON)
      }

      catch (e) {
        return ContentService
          .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
          .setMimeType(ContentService.MimeType.JSON)
      }

      finally {
        lock.releaseLock()
      }
    }
        

how to find what button is pressed

i am making a clicker game and need to find out which button is being clicked.
i am not sure how to do this.

this is my javascript

var multiplyer = 1
var carparts = 0;
document.getElementById("karpartz").innerHTML = carparts;
function onButtonClick() {
    carparts = carparts + multiplyer;
    document.getElementById("karpartz").innerHTML = carparts; 
}

const button = document.querySelector('button'); 
  button.addEventListener('click', onButtonClick); 

and this is my html

<button type="submit">
  <img src= "example"
alt="buttonpng" border="0" />
</button>

<button>
  upgrade click power
</button>
<button>
  upgrade idle scrapping
</button>

<p id="karpartz"></p>

<html>

  <body>
    <h1>
      <script type="text/javascript">
        document.write(karpartz)

      </script>
    </h1>
  </body>

</html>

how do i find which one is clicked

i also cant find how to get rid of [object HTMLParagraphElement]

HTML “input” form not working with small minimum values

Browser: Chrome Version 122.0.6261.94 (Official Build) (arm64)

I have a web input form:

<input type="number" min="-3e+31" max="1.7976931348623157e+308" step="0.000001">

The “step” validation seems to break with a high magnitude minimum value.

If I change the input to

<input type="number" min="-9.9999e+11" max="1.7976931348623157e+308" step="0.000001">

the step validation works again. Any min value less than or equal to -1.0e12 will break the step validation.

I tried cutting down the max in case whatever internal method is creating a range via max-min, but that didn’t seem to help either.

Does anyone have any idea what is going on here? This is driving me insane.

How do I make the transform style be smooth when toggling flat to skewed?

I am trying to create a button that when pressed, toggles one class to another. I want the element to appear 2D flat by default and then skewed when the button is pressed. This is working how I want to but now I am trying to get it to be a smooth transition.
When I use the ‘transition-duration’ property it seems to appear so much larger and then return to the other state. I would like it to go from one state to the other but smoothly without it coming forward so much.
This is the example I have: JsFiddle

`.box { 
background-color: black;
color: white; width:100px; 
height: 100px;
margin: 30px;
-webkit-transform:  perspective(100px) rotateX(40deg) ;
transition-duration: 500ms;
}

.box2 { 
background-color: black;
color: white;
width:100px;
height: 100px;
margin: 30px;
-webkit-transform:  perspective(0px) rotateX(0deg);
transition-duration: 500ms;
}`

I have tried with the ‘transition-duration’ property but it seems to have this bouncing effect going on which is not what I am looking for.

Make the server run the api fitch to avoid the client network issues

I built a wepsite and i used js fitch api function to grab my YouTube channel video it works well but the problem when the client Browser try to fitch the api and the client network is bad it print an error on the conole and the browser didn’t try to fitch again so I’m asking if that’s a way to make the sever run the fitch api part to insure that the api fitching is done before viewing date on the page thanks

I try to make it with a loop bu i dont want make the page lagging

Converting HTML site into a React app CSS question

I am very new to React and am attempting to convert a pre-made HTML site into a React app. I have converted over most of the functionality that I want, however I am missing the CSS effects on the nav-bar of the app.

The original HTML behavior has the nav-bar stay at the top of the screen and change color to add contrast when you scroll down, and when you click on a link in it, it smoothly scrolls you to that location. However, after converting, the nav-bar does not stay at the top of the screen and it instantly takes you to a location when clicked.

As far as I can tell, all of the CSS has been referenced correctly (based on the colors, locations of elements, etc), so I am at a loss on where to go from here. Any advice would be much appreciated!

Here is the code for the nav-bar React component:

import React, { Component } from 'react'

export default class TopNavBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg site-navbar navbar-light bg-light" id="pb-navbar">
        <div className="container">
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
            <ul className="navbar-nav">
              <li className="nav-item"><a className="nav-link" href="#section-home">Home</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-resume">Resume</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-about">About</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    )
  }
}

Regex, match with different patterns at once

I have a giant string with this format:

5 [105.68 - 143.759] some text
6 [143.759 - 173.88] some text
7 [173.88 - 201.839] some text
...

I want to match:

  1. Numbers including the dot between [ and -, this is the regex: /(?<=[).*?(?= )/
  2. Numbers including the dot between - and ], this is the regex: /(?<=- ).*?(?=])/
  3. All text after ] , for this I use this regex: /(?<=] ).*/

So for example for the first line the matches will be: 105.68, 143.759 and some text

This works but I want to know if is possible to match those three patterns at once, I tried concatenating the different patterns with | but it didn’t work with this:

const re = /(?<=[).*?(?= )|(?<=- ).*?(?=])|(?<=- ).*?(?=])/
const regex = RegExp(re, 'gm')
regex.exec("7 [173.88 - 201.839] some text")

Output 1st time calling exec: Array [ “201.839” ]
Output 2nd time calling exec: Array [ “173.88” ]
Output 3rd time calling exec: null

Is there a way to get all this (and the actual text, not null) in a single call?