potty-chart/src/App.tsx

import React from 'react';

import LoginForm from './LoginForm';
import ScoreCounter from './ScoreCounter';
import Row from './Row';

import { useJSONLocalStorage, useLocalStorage } from './hooks/useLocalStorage';
import {toot, starman, flush} from './sound';

import {supabase} from './api';
import {User} from '@supabase/supabase-js';

import './App.css';

interface Stats {
  attempts: number;
  scheduledPoops: number;
  selfPoops: number;
  cleanUndies: number;
};

const initialStats:Stats = {
  attempts: 0,
  scheduledPoops: 0,
  selfPoops: 0,
  cleanUndies: 0,
};

const initialStreakTracker:StreakTracker = {
  streaks: [0,0,0,0],
  currentStreakSince: Date.now()
}

function App() {

  const [stats, setStats] =  useJSONLocalStorage<Stats>("stats", initialStats);
  const [user, setUser] = React.useState<User | undefined>();
  const [loading, setLoading] = React.useState<boolean>(true);
  React.useEffect(() => {
    supabase.auth.getUser().then(res => {
      if(res.data.user) {
        setUser(res.data.user);
      }
      setLoading(false);
      if(res.error) {
        console.error(res.error);
      }
    });

  }, []);

  return loading ? <></> : !user ? <LoginForm setUser={setUser}/> : (
    <div className="App">
      <div className="header">
        <div className="name-plate">Hello Pax!</div>
        <div className="score-board">
          Points: <ScoreCounter stats={stats}/>
        </div>
      </div>
      <Row stats={stats} setStats={setStats} name="attempts" emoji="🚽" sound={flush} />
      <Row stats={stats} setStats={setStats} name="scheduledPoops" emoji="💩" sound={toot} />
      <Row stats={stats} setStats={setStats} name="selfPoops" emoji="💩" sound={toot} />
      <Row stats={stats} setStats={setStats} name="cleanUndies" emoji="🩲" sound={starman} />
      <div className="streak-counter"></div>
    </div>
  );
}

export default App;