Mission replay view setup

client/src/utils/view-provider.tsx

@@ -7,12 +7,13 @@ import ComponentDocs from '../views/component-docs-view';
 import RocketDetailsView from '../views/rocket-details-view';
 import DataConfigView from '../views/data-config-view';
 import ActiveMissionView from '../views/active-mission';
+import MissionReplayView from '../views/mission-replay-view';
 import { ActiveMissionProvider } from './ActiveMissionContext';
 import { SocketGateway } from './socket-context';
 
 const ROCKET_SELECT_KEY = 'ROCKET_SELECT';
 const COMPONENT_DOCUMENT_KEY = 'COMPONENT_DOCUMENT';
-// const MISSION_REPLAY_KEY = 'MISSION_REPLAY';
+const MISSION_REPLAY_KEY = 'MISSION_REPLAY';
 
 // Rocket Details
 const ROCKET_DETAILS_KEY = 'ROCKET_DETAILS';
@@ -103,6 +104,15 @@ export default function ViewProvider(props: ViewProviderProps) {
 						/>
 					</SocketGateway>
 				}
+			case MISSION_REPLAY_KEY:
+				return {
+					view: MISSION_REPLAY_KEY,
+					currentView: <MissionReplayView 
+						rocketID={currentRocketId}
+						toDataConfig={handleToDataConfig}
+						setActiveView={handleToActiveFlight}  
+      					openActiveMission={updateMissionId}/>
+				}
 			default:
 				throw Error(`Unknown action type: ${action.type}`);
 		}

client/src/views/mission-replay-view.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface MissionReplayViewProps {
+    rocketID: string;
+    toDataConfig: (id: string) => void;
+    setActiveView: () => void;
+    openActiveMission: (id: string) => void;
+}
+
+const MissionReplayView: React.FC<MissionReplayViewProps> = ({
+    rocketID,
+    toDataConfig,
+    setActiveView,
+    openActiveMission
+}) => {
+    const a = rocketID
+    const b = toDataConfig
+    const c = setActiveView
+    const d = openActiveMission
+    return <div className="blank-screen" style={{ width: '100vw', height: '100vh', backgroundColor: 'white' }}>hi</div>;
+};
+
+export default MissionReplayView;

client/src/views/rocket-details-view.tsx

@@ -51,9 +51,9 @@ function TabPanel(props: TabPanelProps) {
 
 interface RocketDetailsProps {
     rocketID: string;
-    openActiveMission: (view: string) => void;
-    setActiveView: (key: string) => void;
     toDataConfig: (id: string) => void;
+    setActiveView: (key: string) => void;
+    openActiveMission: (view: string) => void;
 }
 
 export default function RocketDetailsView(props: RocketDetailsProps) {

client/src/views/tabs/rocket-missions-tab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useContext } from 'react';
 import { IMission, IRocketPopulated } from '../../utils/entities';
 import MUIDataTable, { MUIDataTableOptions } from 'mui-datatables';
 import { useActiveMission } from '../../utils/ActiveMissionContext';
@@ -59,18 +59,20 @@ const RocketDetailsTab: React.FC<Props> = (props: Props) => {
 
     const activeMissionContext = useActiveMission()
 
-
     const options: MUIDataTableOptions = {
         filter: true,
         responsive: 'standard',
         onRowClick: (rowData: any[], rowMeta: { dataIndex: number, rowIndex: number }) => {
+            console.log('Navigating to mission replay view');
             activeMissionContext.updateMission(rocket.Missions[rowMeta.dataIndex]);
             activeMissionContext.updateRocket(rocket);
-            console.log(activeMissionContext.activeMission);
-            onMissionClick(missions[rowMeta.dataIndex]);
+            //What do I put here to get the new view?
+            dataConfigClick={ROCKET_DETAILS_KEY}
         }
     };
 
+
+
     const columns: ITableColumns[] = [
         {
             name: "Name",
@@ -149,4 +151,4 @@ const RocketDetailsTab: React.FC<Props> = (props: Props) => {
     );
 };
 
-export default RocketDetailsTab;
+export default RocketDetailsTab;