Sample gist

sample.js

import React, { useEffect, useRef, useState } from "react";
import styles from "./Header.module.css";
import { Input, Button, Avatar } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import EmumbaLogo from "../../assets/icons/emumba_logo.svg";
import axios from "axios";
import ProfileDropdown from "../ProfileDropdown/ProfileDropdown";

const Header: React.FC = () => {
  const [user, setUser] = useState<any>(null);
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const hasProcessedCode = useRef(false);

  useEffect(() => {
    const storedUser = localStorage.getItem('github_user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }
  }, []);

  useEffect(() => {
    const code = new URLSearchParams(window.location.search).get('code');
    const hasToken = !!localStorage.getItem('github_token');

    if (code && !hasToken && !hasProcessedCode.current) {
      hasProcessedCode.current = true; // ✅ prevent rerun
      axios
        .get(`http://localhost:4000/auth/github/callback?code=${code}`)
        .then((res) => {
          const token = res.data.access_token;
          if (!token) throw new Error('Token not returned');
          localStorage.setItem('github_token', token);

          return axios.get('https://api.github.com/user', {
            headers: { Authorization: `Bearer ${token}` },
          });
        })
        .then((res) => {
          localStorage.setItem('github_user', JSON.stringify(res.data));
          setUser(res.data);
          window.history.replaceState({}, '', '/'); // clean URL
        })
        .catch((err) => {
          console.error(err);
          alert('GitHub login failed');
        });
    }
  }, []);

  const handleLogin = () => {
    const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID;
    const redirectUri = "http://localhost:5173";
    const scope = "read:user gist";
    window.location.href = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}`;
  };

  const handleLogout = () => {
    localStorage.clear();
    window.location.reload();
  };

  return (
    <header className={styles.header}>
      <img src={EmumbaLogo} alt="Emumba Logo" />
      <div className={styles.actions}>
        <Input
          placeholder="Search gists..."
          className={styles.search}
          prefix={<SearchOutlined />}
        />

        {user ? (
          <div className={styles.profileWrapper} onClick={() => setDropdownVisible(prev => !prev)}>
          <Avatar src={user?.avatar_url} />
          {dropdownVisible && <ProfileDropdown user={user} onSignOut={handleLogout} />}
        </div>
        ) : (
          <Button className={styles.loginButton} onClick={handleLogin}>
            Login
          </Button>
        )}
      </div>
    </header>
  );
};

export default Header;