70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
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;
|