how to connect db with typeORM before set express server session?

hello i am trying to use typeorm-store by save session / express-session

const sessionRepository = getRepository(Session); // db should be connected.
    app.use(
        session({
               secret: process.env.COOKIE_SECRET || "",
               resave: false,
               saveUninitialized: false,
               store: new TypeormStore({ repository: sessionRepository }),
               })
);

to use getRepository(), db connection should be connected before

so i must connect db before setting app’s session
how can i do that?

this is my code

const app: Express = express();


const sessionConfig = async () => {
    try {
        console.log("✅DB connected");

        const connection = await createConnection();
        const sessionRepository = connection.getRepository(Session);

        app.use(
            session({
                secret: process.env.COOKIE_SECRET || "",
                resave: false,
               saveUninitialized: false,
                store: new TypeormStore({ repository: sessionRepository }),
            })
        );
    } catch (error) {
        console.log(`❗ Error: ${error}`);
    }
};

sessionConfig();
app.use(express.static(path.join(__dirname, "../../client/build")));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get("*", (req, res) => {
    console.log();
    return res.sendFile(path.join(__dirname, "../../client/build/index.html"));
});

app.use("/api", rootRouter);

export default app;

//controller login logic


export const postTrainerLogin: customMiddleware = async (req, res) => {

    const { username, password } = req.body;
   const userRepository = getRepository(User);

    const user = await userRepository.findOne({
    where: [{ name: username }],
    });

    if (!user) {
    return res.sendStatus(400);
    }
    //@ts-ignore
   const passwordOk = await bcrypt.compare(password, user.password);

    if (!passwordOk) {
        return res.sendStatus(400);
     }
    //@ts-ignore
   req.session.loggedIn = true;
   //@ts-ignore
   req?.session?.user = user;

    return res.status(200).json(user);
}

i made async function to connect db and set session before setting router

i expected my app working as

  1. db connect
  2. set session
  3. router

and i expect i can get session on my browser after login
but i cannot

in briefly

problem: icannot get my session after login

what i want to do solve it

connect db before set express server app

HTML/CSS and JavaScript, I’m printing out list of names and want a different font size for just the first letter

I have a csv file with list of names
ex:

MUSK Elon,LEE Brucen
GATES Bill,TRUMP Donaldn

and I am trying to print out names in different fonts, sizes, and spacings using html.
My goal is to print out something like this:
enter image description here

I tried this code for CSS:

        .font:first-letter {
            font-size: 150%;
        }

but it didn’t give me what I wanted because it only affected the first letter of the whole line, not every entry separated by commas.

var fontSizeInput = document.getElementById("font-size-input"); 
var fontSize = fontSizeInput.value + "pt";
//... other inputs

var lines = text.split('n'); 
var container = document.getElementById('text-container');
container.innerHTML = '';


for (var i = 0; i < lines.length; i++) {
   var line = lines[i];
   var p = document.createElement('p');
            
   // Applying font style    
   p.className = 'font';
   p.style.fontSize = fontSize;

   // Replace comma with a space
   var modifiedLine = line.replace(/,/g, ' ');
   p.innerHTML += modifiedLine;
   container.appendChild(p);

This is not everything but what I have so far regarding the font sizes. I am thinking separating the first letter before I append and applying a different font size but wondering if this is a good way and if there is a better way to do this.

Thank you I appreciate any help!

Import templates and inject text into them using React

I’m working on a React web app in which I want to take text from the user and then inject that text into 100 templates and convert them to jpeg, for example, the user will enter a headline and paragraph and I will take that headline and paragraph and inject them into 100 templates and then convert them into jpeg then, in the end, send those 100 jpeg images to the user to choose from

so I have some question

1- what is the best method to import ready customizable templates that allow me to inject text, and in which format (PDF, PSD, SVG, JSON, HTML)?

2- How can I inject the headline and the paragraph into 100 templates?

3- How can I convert those 100 templates after the injection into images?

I’ve tried PDF to HTML but it doesn’t work as expected

My website looks good on my laptop/machine and also I have successfuly made it responsive on phone. But when I test it on my monitor at 100% [closed]

The contents of my website get disorganized… How do I fix this zooming effect. I am using tailwindcss and typescript for this project.

Here is how it looks on my monitor

NOTE THIS AT 100% default zoom.website at 100% zoom on my monitor

AND HERE IS HOW IT LOOKS when I zoom out to 90% website at 90% zoom

I have tried setting up the meta tag and the max width same with responsive classes but they are not working out.

I am expecting my website to maintain the same appeal and look across all screens without the layout being altered.

How to calculate the sum of a range? Using a loop.| JavaScript

How can I calculate the sum of all the values in the range between x and y ​​that were output when the function executes so that after each complete loop it repeats decrementing y by one until y will not reach x.
For example: rangeSum(0, 3); --> result: 10 (0+1+2+3+0+1+2+0+1+0)

I just don’t know how to do it because I’m new to JS.

How to combine results from 2 PoolClients while streaming using QueryStream in NodeJS

Summary:
I have 2 databases and I’m trying combine the results while streaming it to the client.

The problem is that I can’t stream through the queryStream twice. This is because, it has already reached end of stream and so it doesn’t even go inside queryStream.on('data') the second time.

More details:
The first conversations table gives me stuff about conversation and the user_id. I need to use this user_id to get name and email from the second database.

Constraints:
I cannot change the signature of the main function, i.e. it has to return a QueryStream

import QueryStream from 'pg-query-stream';

streamForCSV(client: PoolClient): QueryStream {
    const { whereClause, vars } = buildConstraints(tenantId, filters);

    const query = new QueryStream(`SELECT conversations.user_id FROM conversations ${whereClause};`, vars);

    const queryStream = client.queryStream(query);

    const userIds = new Set<number>();
    queryStream.on('data', (row) => {
      if (row.user_id) {
        userIds.add(row.user_id);
      }
    });

    queryStream.on('end', () => {
      this.fetchUsers(Array.from(user_id), (userMap) => {
        queryStream.on('data', (row) => {
          if (row.user_id) {
            const user = reviewerUserMap.get(row.user_id);
            if (user) {
              row.reviewer_name = user.name;
              row.reviewer_email = user.email;
            }
          }
        });
      });
    });

    return queryStream;
  }

  private fetchUsers(
    userIds: number[],
    callback: (userMap: Map<number, { name: string; email: string }>) => void
  ): void {
    secondPool.connect('get_user_details')
      .then((secondClient) => {
        return secondClient.query(
          'SELECT user_id, name, email FROM users WHERE user_id = ANY($1)',
          [userIds]
        );
      })
      .then((rows) => {
        const userMap = new Map<number, { name: string; email: string }>();
        rows.forEach((user: UserWithId) =>
          userMap.set(user.user_id, { name: user.name, email: user.email })
        );
        callback(userMap);
      })
  }

JavaScript Event Listener only works the first time I change something and save the project

The title might seem ambiguous, so I’m going to try and explain it as best as I can.

I’m running a React project from VSC on localhost (with ‘npm start’). The project is really simple now, it only has 2 text inputs and a couple of buttons to make things. The problem is, when I first launch the command to initialize the project on localhost it runs ok but my buttons are not working. I have to change something on VSC (a simple space is enough) and save the project in order for it to recompile on the go and start working. After recompiling it works fine with every Event Listener call, and can call them as many times as I want. I leave my code right here:

import logo from './logo.svg';
import './App.css';

function App() {
  return (

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {/* Edit <code>src/App.js</code> and save to reload.  */}
          Search Engine
        </p>
        <p>
          <table>
            <tr>
              <td>
                Enter the token
              </td>
              <td>
                <input type="text" id="inputtext" placeholder='Token' />
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <button type="button" id="add">Add</button>
                <button type="button" id="display">Display</button>
                <button type="button" id="remove">Remove</button>
                <button type="button" id="">Search!</button>
              </td>
            </tr>
            <tr>{"----------------------------"}</tr>
            <tr>
              <td>
                Web link
              </td>
              <td>
                <input type="text" id="inputtext" placeholder='Token' />
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <button type="button" id="">Search!</button>
              </td>
            </tr>

          </table>
        </p>
      </header>
    </div>
  );
}
let addButton = document.querySelector('#add');
let displayButton = document.querySelector('#display');
let removeButton = document.querySelector('#remove');
let records = [];

addButton?.addEventListener('click', addRecord);
displayButton?.addEventListener('click', displayAll);
removeButton?.addEventListener('click', removeRecord);

function addRecord() {
  let record = document.querySelector('#inputtext').value.trim();
  if (!record) {
    alert('No value inserted');
    return;
  }
  if (records.includes(record)) {
    alert('Duplicated token');
    return;
  }
  records.push(record);
  document.querySelector('#inputtext').value = '';
}

function displayAll() {
  if (records.length === 0) {
    alert("[Empty list]")
    return;
  }
  alert(records.sort());
}

function removeRecord() {
  let record = document.querySelector('#inputtext').value.trim();
  if (!record) {
    alert('No value inserted');
    return;
  }
  if (records.length === 0) {
    alert("[Empty list]")
    return;
  }
  if (!records.includes(record)) {
    alert("Non existing value")
    return;
  }
  const index = records.indexOf(record);
  records.splice(index, 1);
  document.querySelector('#inputtext').value = '';
  alert("Succesfully removed " + record);
}

export default App;

I think the problems comes with the Event Listeners right here, but I might be wrong

addButton?.addEventListener('click', addRecord);
displayButton?.addEventListener('click', displayAll);
removeButton?.addEventListener('click', removeRecord);

If anyone knows anything about this, please respond. Thanks in advance.

I have tried reordering the code and the Event Listener calls but it has not worked for me.

Struggling to change createCompletion to createChatCompletion (OpenAI API)

Here is my current working code using the deprecated Complete model:


  let message = `Pretend you are Tony Hawk
  `;

  conversation.forEach((msg) => {
    if (msg.role === "user") {
      message += `User: ${msg.message}n`;
    } else if (msg.role === "assistant") {
      message += `${msg.message.replace("JungGPT: ", "")}n`; 
    }
  });

  const response = await openai.createCompletion({
    model: "text-davinci-003",
    prompt: message,
    temperature: 1.3,
    max_tokens: 700,
    top_p: 1,
    best_of: 3,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  res.json({
    message: "JungGPT: " + response.data.choices[0].text.trim(),
  });
});

but the minute I simply switch the response from createCompletion to createChatCompletion like so

const response = await openai.createChatCompletion({
  model: "gpt-3.5-turbo",
  messages: [
    {
      "role": "system",
      "content": "Pretend you are Tony Hawk"
    },
    {
      "role": "user",
      "content": ""
    }
  ],
  temperature: 1,
  max_tokens: 256,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
});

It doesn’t work.

I realized then that “system” should be “assistant” and I was storing my prompt in the message variable. So I switched it to

  let message = `Pretend you are Tony Hawk
  `;
const response = await openai.createChatCompletion({
  model: "gpt-3.5-turbo",
  messages: [
    {
      "role": "assistant",
      "content": message
    },
    {
      "role": "user",
      "content": ""
    }
  ],
  temperature: 1,
  max_tokens: 256,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
});
  res.json({
    message: "JungGPT: " + response.data.choices[0].text.trim(),
  });
});

and now it just doesnt return anything even if i console.log(message) it doesnt return, so I’m not sure what I’m doing wrong, any ideas?

Coding problems

i have the following questions
Develop functions that fulfill the following requirements:

The first function should take a large number as input and generate an array containing all possible sums of two digits from that number. For instance, if the number is 12345, all possible sum of two digits from that number are:

[ 1 + 2, 1 + 3, 1 + 4, 1 + 5, 2 + 3, 2 + 4, 2 + 5, 3 + 4, 3 + 5, 4 + 5 ] the resulting array would be [3, 4, 5, 6, 5, 6, 7, 7, 8, 9].

The second function should take the output of the first function an array and return the number.

function calculateSumOfTwoDigits(longNumber) {
  const result = [];
  const stringNumber = longNumber.toString();
  for (let i = 0; i < stringNumber.length; i++) {
    for (let j = i + 1; j < stringNumber.length; j++) {
      const sum = Number(stringNumber[i]) + Number(stringNumber[j]);
      result.push(sum);
    }
  }
  return result;
}

however for the second one I do not think its possible I tried a few things

Tried reversing the first functions logic using join parseInt but would not get anything matching what i was expecting. Maybe I am misunderstanding the question but i interpreted that the array needs to be used to reconstruct the original number.

How do i make a axios post request to send a smtp e-mail in Brevo that used to be sendinblue?

before the transition from sendinblue to brevo the code below used to work. Now I believe that the API url ‘https://api.sendinblue.com/v3/smtp/email’ used on post must have changed, and I can’t seem to find the correct address to make it work. There might have be some other problem to it, but i believe it could be solved by using the right API address

import axios from 'axios';

export default function SendEmail(
    email: string,
    name: string,
    pronouns: string,
    message: string,
    showMessage: (message: string, color: string) => void,
) {
    const validRegex =
        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
    if (email === '' || name === '' || message === '' || pronouns === '') {
        showMessage('Preencha todos os campos!', '#cb6d01');
    } else if (!validRegex.test(email)) {
        showMessage('Email inválido!', '#cb6d01');
    } else {
        axios
            .post(
                'https://api.sendinblue.com/v3/smtp/email',
                {
                    sender: {
                        name: name,
                        email: email,
                    },
                    to: [{ email: '[email protected]' }],
                    templateId: 1,
                    subject: `Menssagem de ${name}`,
                    params: {
                        name: name,
                        pronouns: pronouns,
                        message: message,
                        email: email,
                    },
                },
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'api-key': import.meta.env.VITE_EMAIL_API_KEY,
                    },
                },
            )
            .then((response) => {
                console.log(response.data);
                showMessage('Mensagem enviada com sucesso!', '#6202EE');
            })
            .catch((error) => {
                console.error(error);
                showMessage('Erro ao enviar mensagem!', '#EB3D3D');
            });
    }
    }

I tried some addresses bud had no success, i’m getting 401 with most of the attempts

JavaScript setTimeout() and setInterval() glitching after a min

HTML Code:

<div class="container">
      <div>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
      </div>
      <div>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
        <h1 class="scrambleanimation">Creative Agency</h1>
      </div>
    </div>

CSS Code:

.container {
        display: flex;
        height: 100vh;
        width: 100%;
        justify-content: space-evenly;
        align-items: center;
      }
      .scrambleanimation {
        position: relative;
      }
      .scrambleanimation > span {
        /* content: ''; */
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0%;
        top: 0;
        background-color: white;
        z-index: 4;
      }

JavaScript Code:

// phrase used one by one (controlled by k variable )
const phrases = [
  "Design + Code",
  "Defying Norms",
  "f*ck Average",
  "Work With Us",
];

const elements = document.querySelectorAll(".scrambleanimation");
elements.forEach((item, index) => {
  item.innerHTML = " ";
});
elements.forEach((item, index) => {
  let myFirstInterval;
  let mySecondInterval;
  let i = 0;
  let j1 = -100;
  let j2 = 0;
  let k = 0;
  
  // animation variable is to run animation1 and animation2 alternatively, it increaments to 1 and is set back to 0 again.
  let animationCount = 0;

  // animation1 
  const animation1 = (phrase) => {
    const length = phrase.length;

    // clear previous intervals
    if (myFirstInterval !== undefined) {
      clearInterval(myFirstInterval);
    }
    if (mySecondInterval !== undefined) {
      clearInterval(mySecondInterval);
    }

    // this is just like the typing effect but without typing cursor
    setTimeout(() => {
      myFirstInterval = setInterval(() => {
        item.innerHTML = phrase.slice(0, i);
        if (i >= length) {
          clearInterval(myFirstInterval);
          i = 0;
        }
        i++;
      }, 100);
    }, index * 200);

    // here I create a span which is absolute in the css and left -100% then slides in (creates something like erasing effect)
    setTimeout(() => {
      mySecondInterval = setInterval(() => {
        item.innerHTML = phrase + "<span></span>";
        const innerSpan = item.firstElementChild;
        innerSpan.style.left = `${j1}%`;
        j1 = j1 + 2;
        if (j1 >= 1) {
          j1 = -100;
          innerSpan.style.left = `${j1}%`;
          clearInterval(mySecondInterval);
        }
      }, 50);
    }, 100 * length + index * 200);

    // to use next phrase in the next run
    if (k >= phrases.length - 1) {
      k = 0;
    } else {
      k++;
    }

    // to use alternate animation in the next run
    if (animationCount >= 1) {
      animationCount = 0;
    } else {
      animationCount++;
    }
  };

  // animation2
  const animation2 = (phrase) => {
    const length = phrase.length;

    // clear previous animations
    if (myFirstInterval !== undefined) {
      clearInterval(myFirstInterval);
    }
    if (mySecondInterval !== undefined) {
      clearInterval(mySecondInterval);
    }

    // same like animation 1
    setTimeout(() => {
      myFirstInterval = setInterval(() => {
        item.innerHTML = phrase.slice(0, i);
        if (i >= length) {
          clearInterval(myFirstInterval);
          i = 0;
        }
        i++;
      }, 100);
    }, index * 200);

    // erasing part is different in animation2, it randomly replaces characters with empty spaces
    setTimeout(() => {
      j2 = 0;
      mySecondInterval = setInterval(() => {
        let x = item.innerHTML;
        x = setCharAt(x, Math.floor(Math.random() * length), "  ");
        item.innerHTML = x;
        if (j2 >= length / 2) {
          clearInterval(mySecondInterval);
          j2 = 0;
        }
        j2++;
      }, 200);
    }, 100 * length + 14 * 200);

    // to use next phrase in next run
    if (k >= phrases.length - 1) {
      k = 0;
    } else {
      k++;
    }

    // to use alternate animation in next run
    if (animationCount >= 1) {
      animationCount = 0;
    } else {
      animationCount++;
    }
  };


  const animationInterval = (phrase) => {
    if (animationCount == 0) {
      animation2(phrase);
    } else if (animationCount == 1) {
      animation1(phrase);
    }
  };
  animationInterval(phrases[k]);

  // main interval
  setInterval(
    () => animationInterval(phrases[k]),
    8000
  );
});

live link: https://syedaffan.webflow.io/agency

it works fine on first render, but if stayed on the page for a min, it starts to glitch.
and also when come back to the tab.

I have tried to explain everything I did in the code in the code comments.

gone through a lot of setInterval questions on stackoverflow but could not find anything, been trying to debug myself but it’s still working like this.

Webhook working locally but not on Vercel

I have a webhook in Nextjs that is supposed to listen to payments from a payment processor API, and I was able to make it work on my local machine, but once I deployed it to Vercel it’s not working at all. I can simulate POST request confirmation using Postman or thunderclient just for testing and locally it works but on my Vercel it returns timeout on postman and on Thunder client actually returns my 200 status but the rest of the code seems to not run because I never get the email confirmation.

/api/webhook

import { sendOrder } from "./discord";
import { getOrder } from "./firestore";
const nodemailer = require('nodemailer');



export default async function handler(req, res) {

  const { identificador, mp } = req.query;

  sendOrderConfirmation({ identificador, mp })

  // Return a response to acknowledge receipt of the webhook
  res.status(200).end();
}


const sendOrderConfirmation = async ({ identificador, mp }) => {


  const order = await getOrder({ identificador, mp });
  console.log(order)


  const orderProducts = order.produtos.map((produto) => ({
    quantity: produto.quantity,
    name: produto.name
  }));

  const orderData = {
    orderId: identificador,
    name: order.cliente.name,
    surname: order.cliente.surname,
    email: order.cliente.contactDetails.email,
    mobile: order.cliente.contactDetails.mobile,
    nif: order.cliente.NIF,
    shippingAddress:
    {
      shippingAddress: order.moradaDeEnvio.address,
      shippingCity: order.moradaDeEnvio.city,
      shippingCountry: order.moradaDeEnvio.country,
      shippingPostalCode: order.moradaDeEnvio.postalCode,
    },
    invoiceAddress:
    {
      invoiceAddress: order.moradaDeFaturacao.address,
      invoiceCity: order.moradaDeFaturacao.city,
      invoiceCountry: order.moradaDeFaturacao.country,
      invoicePostalCode: order.moradaDeFaturacao.postalCode,

    },
    products: orderProducts

  };

  console.log(orderData)



  sendConfirmationEmail({ name: order.cliente.name, to: order.cliente.contactDetails.email })




  sendOrder({ orderData })


}




const sendConfirmationEmail = ({ name, to }) => {

  const transporter = nodemailer.createTransport({
    host: 'smtp.hostinger.com',
    port: 465,
    secure: true,
    auth: {
      user: '***@*****.**',
      pass: process.env.NEXT_PUBLIC_EMAIL_PW,
    },
  });


  const message = `Caro(a) ${name},

Obrigado pela sua encomenda, será entregue dentro de 48h.

Se tiver alguma dúvida ou precisar de assistência adicional, por favor, não hesite em nos contactar.

Atenciosamente.`;


  const mailOptions = {
    from: '***@*****.**',
    to: to,
    subject: 'Obrigado pela sua encomenda',
    text: message,
  };


  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error('Failed to send email:', error);
    } else {
      console.log('Email sent successfully:', info.response);
    }
  });


}

Creating site members functions for webpage

I’m very new to programming etc. I was wondering about how people would go about creating site membership. I know that with Wix and WordPress that it’s easy to create that sort of functionality.

Do people code it from zero? Or is it usually something added on from a third party?

I’m guessing that the payment part of site membership would be handled by a third party for small to medium size enterprise websites. Is it the same for site membership?

Specifically, I’m thinking about creating an education website where certain content is only available to paying users.

React.js map loop with async promise is infinite, if surrounding promise.all.then(response … ) assigns the response value

I have just now run into this issue can not find any ressources on my case exactly.
I am building a React App that uses the Spotify API and want to execute a function, that fills a local useState object with and Array of “ArtistInformation”, a js Object which comes from an API endpoint.

This code example loops over an array of artist ids and is supposed to execute the Api function “spotiApi.getArtistInfo(id)” only once.

When running it like this:

  const getArtistInformation = () => {
    console.log("sp ids",spotifyArtistIds)
    Promise.all(spotifyArtistIds.map(id => {
      return spotiApi.getArtistInfo(id)
    })).then(respList => {
      // setArtistInfo(respList)
      console.log("artistInfo", artistInfo)})
  }

The Snippet runs fine and stops execution

But when the “setArtistInfo” useState call is called, the loop continues to execute infinitly

  const getArtistInformation = () => {
    console.log("sp ids",spotifyArtistIds)
    Promise.all(spotifyArtistIds.map(id => {
      return spotiApi.getArtistInfo(id)
    })).then(respList => {
      setArtistInfo(respList)
      console.log("artistInfo", artistInfo)})
  }

Here is the whole component for reference:

import { Box } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import SpotifyApi from "../../api/SpotifyApi";

export const DashboardView = () => {
  const spotifyArtistIds = useSelector(state => state.member.spotifyArtistIds)

  const [artistInfo, setArtistInfo] = useState([])
  const [showId, setShowId] = useState(spotifyArtistIds[0])
  const spotiApi = new SpotifyApi();

  const getArtistInformation = () => {
    console.log("sp ids",spotifyArtistIds)
    Promise.all(spotifyArtistIds.map(id => {
      return spotiApi.getArtistInfo(id)
    })).then(respList => {
      // setArtistInfo(respList)
      console.log("artistInfo", artistInfo)})
  }
 

  const getThisArtistInfo = () => {
    console.log("art", artistInfo)
    return artistInfo.filter(info => info.data.id === showId)[0].data
  }
  
  useEffect(() => {
    getArtistInformation()
  })

  return (
    <Box>
      <h2>{getThisArtistInfo()?.name}'s Dashboard</h2>

    </Box>)
}

Thank you for any help in advance and hopefully we can figure this out!