#Api help

61 messages · Page 1 of 1 (latest)

lunar grove
# 

interface ProfInfo {
  Repos: number;
  Followers: number;
  Following: number;
}

export default function Profile() {
  const [user, setUser] = useState<string>("");
  const [profInfo, setProfInfo] = useState<ProfInfo>({
    Repos: 0,
    Followers: 0, 
    Following: 0,
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.github.com/users/${user}`);
        const data = await response.json();
        setProfInfo({
          Repos: data.public_repos,
          Followers: data.followers,
          Following: data.following,
        });
        console.log(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, [user]);

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setUser(event.target.value);
  };

  return (
    <>
      <main>
        <div className="profile">
          <input type="text" value={user} onChange={handleInputChange} />
          <div>
            <h1></h1>
            <p>Repos: {profInfo.Repos}</p>
            <p>Followers: {profInfo.Followers}</p>
            <p>Following: {profInfo.Following}</p>
          </div>
        </div>
      </main>
    </>
  );
}
#

this is my react code

jade fractal
#

ok hey

lunar grove
#

so what im little confsed is if i want to make all this stuff

#

nickname |
user |

#

location link

#

i wil have to make new types in the profInfo?

#

and the user is just the input im entering to find the data in api

#

?

#

can you understand what im asking>?

jade fractal
#

Yes you would need new types in user info

#

want me to give example?

lunar grove
#

well no not trynabe rude just wanna get it in practice and

#

can you explain why this

#

i got [user] isnt dependecy array to make useEffect load on

#

when page is loaded once

jade fractal
#

[user] is when the input changes

lunar grove
#

so i wil be getting new info from api everytime user changes?

jade fractal
#

yes

lunar grove
#

mh i think i understand everyting

#

uyea

#

why this

image.png
#

its like shortcut?

jade fractal
#

To set the data?

#

what do u mean by a shortcut

lunar grove
#

interface ProfInfo {
Repos: number;
Followers: number;
Following: number;
}
i got this right im doing the setProfInfo({
repos : data.public_repos)}

#

so i can just do profinfo.repos?

jade fractal
#

interface is for setting a class for typescript nothing more

lunar grove
#

yes ik

jade fractal
#

this where your actual data is

#

the usestate

lunar grove
#

OOOOOOOOOOOH

#

oklay then im little confused about why im seting data

jade fractal
#

you should read the document or watch some guides

lunar grove
#

repo: data.public thing

jade fractal
#

data.public is the data from the api

lunar grove
#

yes i get that from api bt that

#

i get hold of it by that

#

then i updated it and send it to profInfo

#

so i can use profInfo.followers

jade fractal
#

yes

lunar grove
#

okay think i understand everything thansk keder

jade fractal
#

no problem

lunar grove
#

just saw useEffect for first time

jade fractal
#

yeah read the document first

lunar grove
#

i was stuck on useState

lunar grove
lunar grove
#

and new methods

jade fractal
lunar grove
#

thank you

jade fractal
#

no problem

lunar grove
#

god thanks im out of the fake lazy thing

#

keder this could whole be string right

image.png
jade fractal
#

yes

#

its a string

lunar grove
#

dumb question