<file_sep>import React, {useState} from 'react';

import ExpenseForm from './ExpenseForm';
import './NewExpense.css'

const NewExpense = (props) => {
    const [isModifying, setIsModifying] = useState(false);

    const saveExpenseDataHandler = (enteredExpenseData) => {
        const expenseData = {
            ...enteredExpenseData,
            id: Math.random().toString()
        };
        props.addExpense(expenseData);
        setIsModifying(false);
    };

    const startEditingHandler = () => {
        setIsModifying(true);
    };

    const cancelEditingHandler = () => {
        setIsModifying(false);
    };

    return (
        <div className='new-Expense'>
            {!isModifying &&
                <button onClick={startEditingHandler}>Lisää uusi kulu</button>}
            {isModifying && (
                <ExpenseForm
                    onSaveExpenseData={saveExpenseDataHandler}
                    isCanceling={cancelEditingHandler}/>
            )}
        </div>
    );
};

export default NewExpense;<file_sep>import React, { useState } from 'react';
import NewExpense from './components/NewExpense/NewExpense';
import Expenses from './components/Expenses/Expenses';

const KuluListaa = [
  {
    id: 'a1',
    title: 'Kirjat',
    amount: 45,
    date: new Date(2021, 4, 15),
  },
  {
    id: 'a2',
    title: 'Moottoripyörävaatteet',
    amount: 70,
    date: new Date(2020, 5, 16),
  },
  {
    id: 'a3',
    title: 'Ruuat',
    amount: 35,
    date: new Date(2020, 6, 17),
  },
  {
    id: 'a4',
    title: 'Moottoripyörän tarvikkeet',
    amount: 100,
    date: new Date(2019, 7, 18),
  },
  {
    id: 'a5',
    title: 'Moottoripyörän tarvikkeet',
    amount: 17,
    date: new Date(2019, 8, 18),
  },
  {
    id: 'a6',
    title: 'Moottoripyörän tarvikkeet',
    amount: 90,
    date: new Date(2019, 9, 18),
  },
];

const App = () => {
  const [expenses, setExpenses] = useState(KuluListaa);

  const addExpenseHandler = (expense) => {
    setExpenses(prevExpenses => {
      return [expense, ...prevExpenses];
    });
  };

  return (
    <div>
      <NewExpense addExpense={addExpenseHandler}/>
      <Expenses items={expenses} />
    </div>
  );
};

export default App;
<file_sep>import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

function Calendar() {
    return(
        <div>
            <FullCalendar
                headerToolbar = {{
                    start: 'title',
                    center: 'dayGridMonth, timeGridWeek, timeGridDay',
                    end: 'today prev,next'
                }}
                plugins={[dayGridPlugin, timeGridPlugin,interactionPlugin]}
                initialView="dayGridMonth"
            />
        </div>
    )
}

export default Calendar;