{"size": 1601, "ext": "js", "max_stars_repo_path": "src/pages/home/Home.js", "max_stars_repo_name": "unanswerable-hog-splatch/plant-app-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/home/Home.js", "max_issues_repo_name": "unanswerable-hog-splatch/plant-app-frontend", "max_issues_repo_issues_event_min_datetime": "2022-03-10T03:53:01.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-23T04:18:31.000Z", "max_forks_repo_path": "src/pages/home/Home.js", "max_forks_repo_name": "unanswerable-hog-splatch/plant-app-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 22, "max_forks_count": null, "avg_line_length": 25.015625, "max_line_length": 110, "alphanum_fraction": 0.5571517801}
import 'antd/dist/antd.css';
import './home.css'
import './form.css'
import Auth from '../../utils/auth';

import Calendar from '../../components/calendar/Calendar';
import useHook from '../../hooks/useHook'
import { useState, useEffect } from 'react';

import LoginFormButton from '../../components/login/LoginFormButton'
import SignupFormButton from '../../components/signup/SignupFormButton';
import { useQuery } from '@apollo/client';
import { QUERY_ME } from '../../utils/queries';

export default function Home() {
  const { selectIcon } = useHook();

  const { loading, data } = useQuery(QUERY_ME);

  const [gardenerData, setGardenerData] = useState({});

  useEffect(() => {
    const userData = data?.me || [];
    setGardenerData(userData);

  }, [])
  return (

    <div>
      {/* If user is logged in, the calendar is displayed. If not, Login and Sign Up buttons are displayed */}
      {Auth.isLoggedIn() ?
        <>

          <div className="home-screen">

            <Calendar setGardenerData={setGardenerData} gardenerData={gardenerData} loading={loading} />

          </div>

        </>
        : (
          <>
            <div className="landing-screen">

              <div className="landing-title">
                <h1 >Shelf</h1>
                <img alt='A watered cactus' src={selectIcon('cactus')} />
                <h1>Care</h1>

              </div>

              <div className="landing-buttons">
                < LoginFormButton />

                < SignupFormButton />

              </div>
            </div>
          </>
        )
      }
    </div>
  );
}