|
1 | | -import React, { useState } from 'react'; |
2 | | -import { useSelector, useDispatch } from 'react-redux'; |
3 | | -import * as uiactions from './../../features/ui/uiSlice'; |
4 | | -import BarGraph from '../display/BarGraph'; |
5 | | -import WorkspaceContainer from './WorkspaceContainer'; |
6 | | -import ScheduleContainer from './ScheduleContainer'; |
7 | | -import CollectionsContainer from './CollectionsContainer'; |
8 | | - |
9 | | -const ContentsContainer = () => { |
10 | | - const dispatch = useDispatch(); |
11 | | - const activeTab = useSelector((store) => store.ui.workspaceActiveTab); |
12 | | - const currentResponse = useSelector( |
13 | | - (store) => store.business.currentResponse |
14 | | - ); |
15 | | - const isDark = useSelector((store) => store.ui.isDark); |
16 | | - |
17 | | - const setActiveTab = (tabName: string) => |
18 | | - dispatch(uiactions.setWorkspaceActiveTab(tabName)); |
19 | | - |
20 | | - const [showGraph, setShowGraph] = useState(false); |
21 | | - |
22 | | - return ( |
23 | | - <div |
24 | | - // className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} column is-tall is-one-third is-flex is-flex-direction-column`} // gigi playing with css |
25 | | - className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} box is-3 is-tall add-vertical-scroll`} |
26 | | - id="workspace" |
27 | | - style={{margin: "10px", maxHeight: "98vh"}} |
28 | | - > |
29 | | - {/* HEADER */} |
30 | | - <div className="hero is-primary has-text-centered"> |
31 | | - <h3>Workspace</h3> |
32 | | - </div> |
33 | | - |
34 | | - {/* TAB SELECTOR */} |
35 | | - <div className="tabs header-bar"> |
36 | | - <ul className={`columns is-gapless ${isDark ? 'dark-divider' : ''}`}> |
37 | | - <li |
38 | | - className={`column ${activeTab === 'workspace' ? 'is-active' : ''}`} |
39 | | - > |
40 | | - <a onClick={() => setActiveTab('workspace')}>Requests</a> |
41 | | - </li> |
42 | | - <li |
43 | | - className={`column ${ |
44 | | - activeTab === 'saved-workspace' ? 'is-active' : '' |
45 | | - }`} |
46 | | - > |
47 | | - <a onClick={() => setActiveTab('saved-workspace')}> |
48 | | - Saved Workspace |
49 | | - </a> |
50 | | - </li> |
51 | | - <li |
52 | | - className={`column ${activeTab === 'schedule' ? 'is-active' : ''}`} |
53 | | - > |
54 | | - <a onClick={() => setActiveTab('schedule')}>Schedule</a> |
55 | | - </li> |
56 | | - </ul> |
57 | | - </div> |
58 | | - |
59 | | - {/* WORKSPACE CONTENT */} |
60 | | - <div className="is-flex-grow-3 add-vertical-scroll"> |
61 | | - {activeTab === 'workspace' && <WorkspaceContainer />} |
62 | | - |
63 | | - {activeTab === 'saved-workspace' && <CollectionsContainer />} |
64 | | - |
65 | | - {activeTab === 'schedule' && <ScheduleContainer />} |
66 | | - </div> |
67 | | - |
68 | | - {/* BARGRAPH CONTENT */} |
69 | | - {currentResponse.id && ( |
70 | | - <div |
71 | | - className={`is-flex is-align-items-center is-justify-content-center is-graph-footer is-clickable`} |
72 | | - onClick={() => setShowGraph(showGraph === false)} |
73 | | - > |
74 | | - {showGraph && 'Hide Response History'} |
75 | | - {!showGraph && 'View Response History'} |
76 | | - </div> |
77 | | - )} |
78 | | - {showGraph && ( |
79 | | - <div> |
80 | | - <BarGraph /> |
81 | | - </div> |
82 | | - )} |
83 | | - </div> |
84 | | - ); |
85 | | -}; |
86 | | - |
87 | | -export default ContentsContainer; |
| 1 | +import React, { useState } from 'react'; |
| 2 | +import { useSelector, useDispatch } from 'react-redux'; |
| 3 | +import * as uiactions from './../../features/ui/uiSlice'; |
| 4 | +import BarGraph from '../display/BarGraph'; |
| 5 | +import WorkspaceContainer from './WorkspaceContainer'; |
| 6 | +import ScheduleContainer from './ScheduleContainer'; |
| 7 | +import CollectionsContainer from './CollectionsContainer'; |
| 8 | +import HistoryContainer from './HistoryContainer'; |
| 9 | + |
| 10 | + |
| 11 | +const ContentsContainer = () => { |
| 12 | + const dispatch = useDispatch(); |
| 13 | + const activeTab = useSelector((store) => store.ui.workspaceActiveTab); |
| 14 | + const currentResponse = useSelector( |
| 15 | + (store) => store.business.currentResponse |
| 16 | + ); |
| 17 | + const isDark = useSelector((store) => store.ui.isDark); |
| 18 | + |
| 19 | + const setActiveTab = (tabName: string) => |
| 20 | + dispatch(uiactions.setWorkspaceActiveTab(tabName)); |
| 21 | + |
| 22 | + const [showGraph, setShowGraph] = useState(false); |
| 23 | + |
| 24 | + return ( |
| 25 | + <div |
| 26 | + // className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} column is-tall is-one-third is-flex is-flex-direction-column`} // gigi playing with css |
| 27 | + className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} box is-3 is-tall add-vertical-scroll`} |
| 28 | + id="workspace" |
| 29 | + style={{margin: "10px", maxHeight: "98vh", width: '26vw'}} |
| 30 | + > |
| 31 | + {/* HEADER */} |
| 32 | + <div className="hero is-primary has-text-centered"> |
| 33 | + <h3>Workspace</h3> |
| 34 | + </div> |
| 35 | + |
| 36 | + {/* TAB SELECTOR */} |
| 37 | + <div className="tabs header-bar"> |
| 38 | + <ul className={`columns is-gapless ${isDark ? 'dark-divider' : ''}`}> |
| 39 | + <li |
| 40 | + className={`column ${activeTab === 'workspace' ? 'is-active' : ''}`} |
| 41 | + > |
| 42 | + <a onClick={() => setActiveTab('workspace')}>Requests</a> |
| 43 | + </li> |
| 44 | + <li |
| 45 | + className={`column ${activeTab === 'history' ? 'is-active' : ''}`} |
| 46 | + > |
| 47 | + <a onClick={() => setActiveTab('history')}>History</a> |
| 48 | + </li> |
| 49 | + <li |
| 50 | + className={`column ${activeTab === 'saved' ? 'is-active' : ''}`} |
| 51 | + > |
| 52 | + <a onClick={() => setActiveTab('saved')}> |
| 53 | + Saved |
| 54 | + </a> |
| 55 | + </li> |
| 56 | + <li |
| 57 | + className={`column ${activeTab === 'schedule' ? 'is-active' : ''}`} |
| 58 | + > |
| 59 | + <a onClick={() => setActiveTab('schedule')}>Schedule</a> |
| 60 | + </li> |
| 61 | + </ul> |
| 62 | + </div> |
| 63 | + {/* WORKSPACE CONTENT */} |
| 64 | + <div className="is-flex-grow-3 add-vertical-scroll"> |
| 65 | + {activeTab === 'workspace' && <WorkspaceContainer />} |
| 66 | + |
| 67 | + {activeTab === 'history' && <HistoryContainer />} |
| 68 | + |
| 69 | + {activeTab === 'saved' && <CollectionsContainer />} |
| 70 | + |
| 71 | + {activeTab === 'schedule' && <ScheduleContainer />} |
| 72 | + </div> |
| 73 | + |
| 74 | + {/* BARGRAPH CONTENT */} |
| 75 | + {currentResponse.id && ( |
| 76 | + <div |
| 77 | + className={`is-flex is-align-items-center is-justify-content-center is-graph-footer is-clickable`} |
| 78 | + onClick={() => setShowGraph(showGraph === false)} |
| 79 | + > |
| 80 | + {showGraph && 'Hide Response History'} |
| 81 | + {!showGraph && 'View Response History'} |
| 82 | + </div> |
| 83 | + )} |
| 84 | + {showGraph && ( |
| 85 | + <div> |
| 86 | + <BarGraph /> |
| 87 | + </div> |
| 88 | + )} |
| 89 | + </div> |
| 90 | + ); |
| 91 | +}; |
| 92 | + |
| 93 | +export default ContentsContainer; |
0 commit comments