Untitled

import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { AgGridReact } from "ag-grid-react";
import { Search } from "../Components/Search/Search";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

export default function Stocks() {

    const API_KEY = '35bc7fd74ee10e088e02607913e574bb';
    const [rowData, setRowData] = useState([]);
    const [search, setSearch] = useState("");
    const gridRef = useRef();
    const [focusedCell, setFocusedCell] = useState(null);
    const [rowIndex, setRowIndex] = useState(null);
    const [finalValue, setFinalValue] = useState(null);

    const columns = [
        { headerName: "Symbol", field: "symbol"},
        { headerName: "Name", field: "name" },
        { headerName: "Sector", field: "sector" },
        { headerName: "Founded", field: "founded" },
    ];

    async function thenGetURL() {
        const url = `https://financialmodelingprep.com/api/v3/nasdaq_constituent?apikey=${API_KEY}`;
        fetch(url)
            .then(response => response.json())
            .then(data => data.map(myData => {
                return {
                    symbol: myData.symbol,
                    name: myData.name,
                    sector: myData.sector,
                    founded: myData.founded
                };
            })
            )
            .then(filteredData => setRowData(filteredData));
    }



    function CellClicked()
    {
        setFocusedCell(gridRef.current.api.getFocusedCell());
        console.log(gridRef.current.api.getFocusedCell());
        setRowIndex(gridRef.current.api.getFocusedCell().rowIndex);
        setFinalValue(gridRef.current.api.getFocusedCell().getValue('symbol'));
    }

    useEffect(() => {
        ((async) => {
            thenGetURL();
        })()

    }, []);

    const buttonListener = useCallback(e => {
         gridRef.current.api.setQuickFilter(document.getElementById('filter-text-box').value)
         setFocusedCell(gridRef.current.api.getFocusedCell());
    }, []);



    return (
        <div>
            <h1>Stocks</h1>
            <p>Below are a list of stocks organized by their symbol. A symbol is a unique identifier of that company on the stock exchange.</p>
            <p>By default it a full list of stocks are shown, if you are interested in a specific sector you can use the dropdown to select a sector of interest.</p>
            <p>If you would like to search a specific company, type your search into the search bar and then click the 'Search' button.</p>
            <p>*italicise this* Note: if you do not see your company code, try turning your filter back to All for sector.</p>



            <div className="container">
                <h2>All Symbols</h2>

                <Search onSubmit={buttonListener}/>
                <div
                    className="ag-theme-balham"
                    style={{
                        height: "500px",
                        width: "100%"
                    }}>

                    <AgGridReact
                        onCellClicked={CellClicked}
                        ref={gridRef}
                        columnDefs={columns}
                        rowData={rowData}
                        pagination={true}
                        paginationAutoPageSize={true}
                        rowSelection={'single'}
                        //onSelectionChanged={onSelectionChanged}

                    />
                </div>

            </div>

        </div>
    )
}