Popup: Upgrade dummy session logger buttons to component #102.A

AStarStartup · Feb 22, 2024 · 195e1da · 195e1da
1 parent 80dd430
commit 195e1da
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 236 deletions.
diff --git a/Extension/App/Popup.tsx b/Extension/App/Popup.tsx
@@ -3,125 +3,40 @@
 import React, { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import {
-  ModelConfigSync, ModelConfigSyncGet,
-  ModelConfigSyncInit,
-  ModelConfigSyncSet,
+  ModelConfigLocal, ModelConfigLocalGet, ModelConfigLocalInit, 
+  ModelConfigLocalSet,
+  ModelConfigSync, ModelConfigSyncGet, ModelConfigSyncInit, ModelConfigSyncSet,
   ModelSyndicateGet
 } from '../Model'
-import MissionSelector from '../View/MissionSelector'
-const { TimestampSeconds } = require('linearid')
-
-function SessionNumberChange(session_number: number, config: ModelConfigSync) {
-  if(session_number < 0) return
-  ModelConfigSyncSet({ ...config, session: session_number })
-}
+import SessionPunchClockView from '../View/SessionPunchClockView'
 
 // Browser extension popup widget.
 const Popup = () => {
   console.log('>Popup')
   // Live Coding AStartupMCC #39.F Add: Can clock and off to dummy...
-  const [Config, ConfigSet] = useState<ModelConfigSync | null>(ModelConfigSyncInit)
-  const [MissionHeading, MissionHeadingSet] = useState('')
-  const [SessionHeading, SessionHeadingSet] = useState('')
+  const [ConfigSync, ConfigSyncSet] = useState<ModelConfigSync | null>(ModelConfigSyncInit)
+  const [ConfigLocal, ConfigLocalSet] = useState<ModelConfigLocal | null>(ModelConfigLocalInit)
   const [Syndicate, SyndicateSet ] = useState({})
 
   const [IsSaving, IsSavingSet] = useState(false)
   useEffect(() => {
     console.log('[useEffect]')
-    ModelConfigSyncGet().then(options_new => ConfigSet(options_new))
-    ModelSyndicateGet().then(syndicate_new => SyndicateSet(syndicate_new))
+    ModelConfigSyncGet().then(state => ConfigSyncSet(state))
+    ModelConfigLocalGet().then(state => ConfigLocalSet(state))
+    ModelSyndicateGet().then(state => SyndicateSet(state))
   }, [])
-  if (Config == null) return <div>Config == null</div>
-  let { account, mission, mission_ids, repo, session, session_ids } = Config
+  if (ConfigSync == null) return <div>Config == null</div>
+  let { account, mission_ids, repo, session, session_ids } = ConfigSync
   if (session == undefined) return <div>Config members undefined</div>
-  const [SessionNumber, SessionNumberSet] = useState(0)
-
-  function MissionHeadingUpdate (focus_headline: string) {
-    MissionHeadingSet(focus_headline)
-  }
-
-  function SessionHeadingUpdate (focus_headline: string) {
-    SessionHeadingSet(focus_headline)
-  }
-
-  function TimesheetPunchHandle () {
-    if (session == undefined) return
-    const Time = TimestampSeconds()
-    const TimeText = new Date(Time * 1000)
-    if(session == 0) { // End Session
-      console.log('Clocking on to Session #' + SessionNumber + ' at ' + TimeText)
-      //@todo Integrate with GitHub to create Session Tickets.
-      const ConfigNew = {...(Config as ModelConfigSync), session: SessionNumber}
-      ModelConfigSyncSet(ConfigNew)
-      ConfigSet(ConfigNew)
-    } else if (session < 0) { // Stop Break
-      const S = -session
-      console.log('Stopping break from Session #' + S + ' at ' + TimeText)
-      const ConfigNew = {...(Config as ModelConfigSync), session: S}
-      ModelConfigSyncSet(ConfigNew)
-      ConfigSet(ConfigNew)
-    } else { // -> Session > 0
-      console.log('Clocking off from Session #' + session + ' at ' + TimeText)
-      const ConfigNew = {...(Config as ModelConfigSync), session: 0}
-      ModelConfigSyncSet(ConfigNew)
-      ConfigSet(ConfigNew)
-    }
-  }
-
-  function TimesheetBreakStartHandle () {
-    if (session == undefined) return
-    let time = TimestampSeconds()
-    console.log('Starting break from Session #' + session + ' at ' + new Date(time * 1000))
-    const ConfigNew = {...(Config as ModelConfigSync), session: -session}
-    ModelConfigSyncSet(ConfigNew)
-    ConfigSet(ConfigNew)
-  }
 
   return <div className="flex flex-col w-full">
-    <MissionSelector Config={Config} ConfigSet={ConfigSet} 
-      Syndicate={Syndicate} />
-    <br/>
     <h1>Account: {account} #{Math.abs(session)}</h1>
     <h2>Repo: {repo}</h2>
-    <h3>Mission: #{Math.abs(mission)}</h3>
-    <h4>Heading: {session_ids ?? '' + mission_ids}</h4>
-    <div className='flex flex-row m-4'>
-      { session == 0 && <>
-        <input id='ClockOnOffButton' type="button" value="Begin Session" onClick={TimesheetPunchHandle} />
-        <input
-          id='SessionNumberInput'
-          type='number'
-          value={SessionNumber}
-          onChange={ event => SessionNumberSet(event.target.valueAsNumber) }
-          disabled={ IsSaving }
-        />
-        </>
-      }
-      { session > 0 && <>
-        <input id='ClockBreakOnOffButton' type="button" value="End Session" onClick={TimesheetPunchHandle} />
-        <input id='TimesheetBreakButton' type="button" value="Start Break" onClick={TimesheetBreakStartHandle} />
-      </>}
-      { session < 0 &&
-        <input id='ClockBreakOnOffButton' type="button" value="Stop break" onClick={TimesheetPunchHandle} />
-      }
-      { session == 0 &&  <div>
-        <span>Session and Mission Heading:</span>
-        <input type='text' placeholder=
-            "Enter #SID and heading..."
-          value={ SessionHeading }
-          onChange={ (event) => SessionHeadingUpdate(event.target.value) }
-          disabled={ IsSaving }
-        />
-        <span>Mission heading:</span>
-        <input type='text' placeholder=
-            "Enter mission heading..."
-          value={ MissionHeading }
-          onChange={ (event) => MissionHeadingUpdate(event.target.value) }
-          disabled={ IsSaving }
-        />
-      </div>
-      }
-    </div>
+    <h3>Mission: #{mission_ids}</h3>
+    <h4>Heading: {session_ids}</h4>
+    <br/>
+    <SessionPunchClockView ConfigSync={ConfigSync} ConfigSyncSet={ConfigSyncSet} 
+      IsSaving={IsSaving} Syndicate={Syndicate} />
   </div>
 }
 

diff --git a/Extension/Ctlr/Background.ts b/Extension/Ctlr/Background.ts
@@ -5,6 +5,8 @@ ModelConfigSyncGet, ModelConfigSyncSet, ModelIssueInit, ModelIssueSet,
 ModelMissionInit, ModelMissionSet, ModelSessionInit, ModelSessionSet,
 ModelSyndicateInit, ModelSyndicateSet } from '../Model'
 
+import { ASessionInit } from '../../Lib/Model'
+
 console.log("[Background.ts]")
 
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
@@ -29,7 +31,7 @@ chrome.runtime.onInstalled.addListener(() => {
   CommandStructureSet(CommandStructureInit)
   ModelIssueSet(ModelIssueInit)
   ModelMissionSet(ModelMissionInit)
-  ModelSessionSet(ModelSessionInit)
+  ModelSessionSet(ASessionInit)
   ModelSyndicateSet(ModelSyndicateInit)
 
   chrome.alarms.create("Update", {

diff --git a/Extension/Ctlr/UseModelState.ts b/Extension/Ctlr/UseModelState.ts
@@ -0,0 +1,35 @@
+// Copyright AStartup; license at https://github.com/AStarStartup/AStartupMCC
+
+'use client'
+
+import { AIssueTicket } from '../../Lib/Model'
+import { DataAccess } from '../../Lib/Model/IDB'
+import { ModelIssueSet } from '../Model'
+
+export default function UseModelState(account: string, repo: string) {
+  let db_name: string = account + '/' + repo
+  let store_name: string = 'Issues'
+  const idb = new DataAccess<AIssueTicket>(db_name, store_name);
+
+  function ModelStateReducer(state, action: object) {
+    switch (action['verb']) {
+      case 'SelectIssue': {
+        const UID = action['uid']
+        if(UID == undefined) return
+        const Issue = idb.Get(UID)
+        ModelIssueSet({ ...state, issue: Issue })
+        return state
+      }
+      case 'SelectMission': {
+        const UID = action['uid']
+        if(UID == undefined) return
+        const Issue = idb.Get(UID)
+        ModelIssueSet({ ...state, mission: Issue })
+        return state
+      }
+      default: return state
+    }
+  }
+
+  return [ idb, ModelStateReducer ]
+}