{"size": 764, "ext": "js", "max_stars_repo_path": "containers/client/src/pages/Home.js", "max_stars_repo_name": "deanarchy/relace", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "containers/client/src/pages/Home.js", "max_issues_repo_name": "deanarchy/relace", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "containers/client/src/pages/Home.js", "max_forks_repo_name": "deanarchy/relace", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.875, "max_line_length": 59, "alphanum_fraction": 0.5130890052}
import { Flex } from '@chakra-ui/react'
import { useState, useEffect } from 'react';
import axios from 'axios';

import ItemList from "../components/ItemList";
import SearchBar from "../components/SearchBar";

export default function Home() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        async function fetchItemData() {
            const { data } = await axios.get('/api/items');
            setItems(data);
        };

        try {
            fetchItemData();
        } catch (error) {
            console.error(error);
        }
    }, []);

    return (
        <main>
            <Flex m='20'>
                <SearchBar setItems={setItems} />
            </Flex>
            <ItemList items={items} />
        </main>
    )
};