monitor done

notes.txt

@@ -0,0 +1,5 @@
+ideas:
+
+different types of elements(each element type extends element type, but have their own)
+for assimilator prototype, just make it a 4x4 grid and find a place that is open
+redux time travel

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vite-template-redux",
       "version": "0.0.0",
       "dependencies": {
+        "@redux-devtools/extension": "^3.3.0",
         "@reduxjs/toolkit": "^2.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2122,7 +2123,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
       "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2811,6 +2811,18 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@redux-devtools/extension": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.3.0.tgz",
+      "integrity": "sha512-X34S/rC8S/M1BIrkYD1mJ5f8vlH0BDqxXrs96cvxSBo4FhMdbhU+GUGsmNYov1xjSyLMHgo8NYrUG8bNX7525g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "immutable": "^4.3.4"
+      },
+      "peerDependencies": {
+        "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.2.tgz",
@@ -6346,6 +6358,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8045,8 +8062,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",

package.json

@@ -16,6 +16,7 @@
     "prepare": "ts-patch install && typia patch"
   },
   "dependencies": {
+    "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Prototype.tsx

@@ -27,11 +27,11 @@ const Prototype = () => {
     message: dummyMessage,
   });
 
-  console.log('message:', message, 'possibleModalities:', possibleModalities);
+  //console.log('message:', message, 'possibleModalities:', possibleModalities);
 
   // demonstration of using a selector to access redux state
   const widgets = useAppSelector(getWidgets);
-  console.log('widgets:', widgets);
+  //console.log('widgets:', widgets);
 
   // get single widget by id
   // const oneWidget = useAppSelector((store) => getWidgetById(store, '1'));
@@ -40,11 +40,9 @@ const Prototype = () => {
   // demonstration of using dispatch function to update redux state
   const handleAddWidget = () => {
     const expirationTime = new Date();
-    console.log(expirationTime);
     expirationTime.setSeconds(
       expirationTime.getSeconds() + (Math.floor(Math.random() * 10) + 5),
     ); //set the time to expire to a time between 5 and 15 seconds
-    console.log(expirationTime);
 
     // construct dummy widget
     const newWidget: Widget = {
@@ -53,6 +51,7 @@ const Prototype = () => {
         {
           id: uuid(),
           expiration: expirationTime.toISOString(),
+          onExpiration: 'delete',
           modality: 'auditory',
           type: 'table',
         },
@@ -65,7 +64,7 @@ const Prototype = () => {
 
   useEffect(() => {
     // use setInterval to run monitor every second (1000ms)
-    const interval = setInterval(() => monitor({ widgets }), ONE_SECOND_IN_MS);
+    const interval = setInterval(() => monitor({dispatch}), ONE_SECOND_IN_MS);
     // clear interval when component unmounts to prevent memory leak
     return () => clearInterval(interval);
   }, []);

src/prototype/monitor.ts

@@ -1,10 +1,13 @@
+import { AppDispatch,  RootState, AppStore} from 'src/redux/store';
 import { useAppDispatch, useAppSelector } from '../redux/hooks';
-import { addWidget, getWidgetById, getWidgets } from '../redux/slices/cmSlice';
+import { addWidget, getWidgetById, getWidgets, updateWidgetDelete } from '../redux/slices/cmSlice';
 import type { Widget } from '../types/modalities';
+import store from "src/redux/store"
+
 
 type MonitorProps = {
   // define expected input here and it's type (number, string, etc.)
-  widgets: Widget[]
+  dispatch: AppDispatch
 };
 
 /**
@@ -12,15 +15,20 @@ type MonitorProps = {
  * @param ???
  * @returns ???
  */
-const monitor = ({widgets}: MonitorProps) => {
+const monitor = ({dispatch}: MonitorProps) => {
+  const widgets = store.getState().cm.widgets
+  console.log(widgets)
+  
   console.log('monitor went off!');
-
-  widgets.forEach(function(widget,widgetIndex){
-    widget.elements.forEach(function(element, elementIndex) {
+  widgets.forEach(function(widget,widgetIndex){ //go through each widget
+    widget.elements.forEach(function(element, elementIndex) { //go through each element
       if (element.expiration){
         const time = new Date().toISOString();
         if(element.expiration <= time){
-          console.log("element " + element.id + " expired!")
+          //console.log("element " + element.id + " expired! deleting...")
+          if(element.onExpiration === "delete"){
+            dispatch(updateWidgetDelete(element.id))
+          } 
         }
       }
     });

src/redux/slices/cmSlice.ts

@@ -23,8 +23,24 @@ export const cmSlice = createSlice({
       state.widgets.push(action.payload);
     },
     removeWidget: (state, action) => {},
-    // add/remove elements to/from widget
-    updateWidget: (state, action) => {},
+    
+    updateWidgetDelete: (state, action) => {//remove elements from widget
+      console.log("called!")
+      const tempWidgets = state.widgets;
+      tempWidgets.forEach(function(widget,widgetIndex){ //go through each widget
+        widget.elements.forEach(function(element, elementIndex) { //go through each element
+          if(element.id == action.payload){
+              console.log(tempWidgets)
+              widget.elements = widget.elements.splice(elementIndex, elementIndex);
+              console.log(tempWidgets)
+          }
+          
+        });
+      });
+
+      state.widgets = tempWidgets;
+      
+    },
     updateVisualComplexity: (state, action) => {},
     updateAudioComplexity: (state, action) => {},
   },
@@ -43,7 +59,7 @@ export const cmSlice = createSlice({
 export const {
   addWidget,
   removeWidget,
-  updateWidget,
+  updateWidgetDelete,
   updateVisualComplexity,
   updateAudioComplexity,
 } = cmSlice.actions;

src/types/modalities.ts

@@ -8,7 +8,10 @@ export type Modality =
   | 'gustatory';
 
 export type Element = {
-  expiration: string;
+  expirationInterval?: number;
+  expiration?: string;
+  onExpiration?: 'delete' | 'escalate' | 'deescalate';
+  interacted?: boolean;
   id: string;
   modality: Modality;
   type: 'table' | 'button' | 'text' | 'image' | 'audio' | 'icon';