diff --git a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx index 19fe2ced504..0288a1cd9c4 100644 --- a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx +++ b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx @@ -7,7 +7,7 @@ import { StickyContainer } from 'react-sticky'; import { compose as composeComponent } from 'recompose'; import CircleProgress from 'src/components/CircleProgress'; import AppBar from 'src/components/core/AppBar'; -import Tab from 'src/components/core/Tab'; +import MUITab from 'src/components/core/Tab'; import Tabs from 'src/components/core/Tabs'; import Typography from 'src/components/core/Typography'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; @@ -24,6 +24,7 @@ import { } from 'src/features/Profile/permissionsHelpers'; import { ApplicationState } from 'src/store'; import { MapState } from 'src/store/types'; +import SubTabs, { Tab } from './CALinodeCreateSubTabs'; import { ExtendedType } from './SelectPlanPanel'; import FromImageContent from './TabbedContent/FromImageContent'; import { Info } from './util'; @@ -48,11 +49,6 @@ interface State { selectedTab: number; } -interface Tab { - title: string; - render: () => JSX.Element; -} - export class LinodeCreate extends React.Component { constructor(props: CombinedProps) { super(props); @@ -113,13 +109,13 @@ export class LinodeCreate extends React.Component { { title: 'One-Click', render: () => { - return ; + return ; } }, { title: 'My Images', render: () => { - return ; + return ; } } ]; @@ -219,7 +215,7 @@ export class LinodeCreate extends React.Component { scrollButtons="on" > {this.tabs.map((tab, idx) => ( - JSX.Element; +} + +interface Props { + history: any; + type: 'oneClick' | 'myImages'; +} + +interface State { + selectedTab: number; +} + +type CombinedProps = Props; + +class CALinodeCreateSubTabs extends React.PureComponent { + constructor(props: CombinedProps) { + super(props); + + const tabsToRender = + props.type === 'oneClick' ? this.oneClickTabs : this.myImagesTabs; + + /** get the query params as an object, excluding the "?" */ + const queryParams = parse(location.search.replace('?', '')); + + /** will be -1 if the query param is not found */ + const preSelectedTab = tabsToRender.findIndex((eachTab, index) => { + return eachTab.title === queryParams.subtype; + }); + + this.state = { + selectedTab: preSelectedTab !== -1 ? preSelectedTab : 0 + }; + } + + oneClickTabs: Tab[] = [ + { + title: 'One-Click Apps', + render: () => { + return ; + } + }, + { + title: 'Community StackScripts', + render: () => { + return ; + } + } + ]; + + myImagesTabs: Tab[] = [ + { + title: 'Backups and My Images', + render: () => { + return ; + } + }, + { + title: 'Clone From Existing Linode', + render: () => { + return ; + } + }, + { + title: 'My StackScripts', + render: () => { + return ; + } + } + ]; + + handleTabChange = ( + event: React.ChangeEvent, + value: number + ) => { + /** get the query params as an object, excluding the "?" */ + const queryParams = parse(location.search.replace('?', '')); + + this.props.history.push({ + search: `?type=${queryParams.type}&subtype=${event.target.textContent}` + }); + this.setState({ + selectedTab: value + }); + }; + + render() { + const { type } = this.props; + const { selectedTab } = this.state; + + const tabsToRender = + type === 'oneClick' ? this.oneClickTabs : this.myImagesTabs; + + const selectedTabContentRender = tabsToRender[selectedTab].render; + + return ( + + + + + {tabsToRender.map((tab, idx) => ( + + ))} + + + + {selectedTabContentRender()} + + ); + } +} + +export default CALinodeCreateSubTabs;