Hugging Face's logo

Spaces:
FocusGuard
/
final_test
Sleeping

App Files Community
final_test
File size: 4,364 Bytes
22a6915
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, { useState, useEffect } from 'react';
import './App.css';
import { VideoManagerLocal } from './utils/VideoManagerLocal';

import Home from './components/Home';
import FocusPageLocal from './components/FocusPageLocal';
import Achievement from './components/Achievement';
import Records from './components/Records';
import Help from './components/Help';

function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [videoManager, setVideoManager] = useState(null);
  const [isSessionActive, setIsSessionActive] = useState(false);
  const [sessionResult, setSessionResult] = useState(null); 
  const [isTutorialActive, setIsTutorialActive] = useState(false);
  const [hasSeenTutorial, setHasSeenTutorial] = useState(false);

  useEffect(() => {
    fetch('/api/history', { method: 'DELETE' })
      .then(() => {
        const backup = localStorage.getItem('focus_magic_backup');
        if (backup) {
          try {
            const sessions = JSON.parse(backup);
            fetch('/api/import', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(sessions)
            });
          } catch (err) {
            console.error(err);
          }
        }
      })
      .catch(err => console.error(err));

    const callbacks = {
      onSessionStart: () => {
        setIsSessionActive(true);
        setSessionResult(null);
      },
      onSessionEnd: (summary) => {
        setIsSessionActive(false);
        if (summary) setSessionResult(summary);
        
        fetch('/api/sessions?filter=all')
          .then(res => res.json())
          .then(data => {
            if (data && Array.isArray(data)) {
              localStorage.setItem('focus_magic_backup', JSON.stringify(data));
            }
          })
          .catch(err => console.error(err));
      }
    };
    const vm = new VideoManagerLocal(callbacks);
    // One-shot init: children need a re-render once the manager exists (ref would stay null on first paint).
    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
    setVideoManager(vm);
    return () => {
      vm.stopStreaming();
    };
  }, []);

  const handleStartFocus = () => {
    if (!hasSeenTutorial) {
      setIsTutorialActive(true);
    }
    setActiveTab('focus');
  };

  const handleStartTutorial = () => {
    setIsTutorialActive(true);
    setActiveTab('focus');
  };

  return (
    <div className="app-container">

      <nav id="top-menu">

        <button 

          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`} 

          onClick={() => setActiveTab('home')}

        >

          Home

        </button>

        <div className="separator"></div>



        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={handleStartFocus}>

          Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}

        </button>

        <div className="separator"></div>



        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>

          My Achievement

        </button>

        <div className="separator"></div>



        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>

          My Records

        </button>

        <div className="separator"></div>



        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>

          Help

        </button>

      </nav>



      {activeTab === 'home' && <Home onStartFocus={handleStartFocus} onStartTutorial={handleStartTutorial} />}



      <FocusPageLocal

        videoManager={videoManager}

        sessionResult={sessionResult}

        setSessionResult={setSessionResult}

        isActive={activeTab === 'focus'}

        isTutorialActive={isTutorialActive}

        setIsTutorialActive={setIsTutorialActive}

        setHasSeenTutorial={setHasSeenTutorial}

      />

      {activeTab === 'achievement' && <Achievement />}

      {activeTab === 'records' && <Records />}

      {activeTab === 'help' && <Help />}

    </div>
  );
}

export default App;