Skip to content

Commit 6250cda

Browse files
frankcalisefrankcalise
committed
feat(app): apollo client ui and routes
1 parent f47e85d commit 6250cda

File tree

5 files changed

+370
-0
lines changed

5 files changed

+370
-0
lines changed

‎apps/reactotron-app/src/renderer/App.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import Overlay from "./pages/reactNative/Overlay"
1515
import Storybook from "./pages/reactNative/Storybook"
1616
import CustomCommands from "./pages/customCommands"
1717
import Help from "./pages/help"
18+
import Cache from "./pages/apolloClient/Cache"
19+
import Mutations from "./pages/apolloClient/Mutations"
20+
import Queries from "./pages/apolloClient/Queries"
1821

1922
const AppContainer = styled.div`
2023
position: absolute;
@@ -68,6 +71,11 @@ function App() {
6871
{/* Custom Commands */}
6972
<Route path="/customCommands" element={<CustomCommands />} />
7073

74+
{/* TODO: Load custom UI pages from installed plugins */}
75+
<Route path="/apolloClient/cache" element={<Cache />} />
76+
<Route path="/apolloClient/queries" element={<Queries />} />
77+
<Route path="/apolloClient/mutations" element={<Mutations />} />
78+
7179
{/* Help */}
7280
<Route path="/help" element={<Help />} />
7381
</Routes>

‎apps/reactotron-app/src/renderer/components/SideBar/Stateless.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react"
22
import { MdReorder, MdAssignment, MdPhoneIphone, MdLiveHelp } from "react-icons/md"
33
import { FaMagic } from "react-icons/fa"
4+
import { SiApollographql } from "react-icons/si"
45
import styled from "styled-components"
56

67
import SideBarButton from "../SideBarButton"
@@ -42,6 +43,12 @@ function SideBar({ isOpen }: { isOpen: boolean }) {
4243
text="React Native"
4344
/>
4445
<SideBarButton icon={FaMagic} path="/customCommands" text="Custom Commands" iconSize={25} />
46+
<SideBarButton
47+
icon={SiApollographql}
48+
path="/apolloClient/cache"
49+
matchPath="/apolloClient"
50+
text="Apollo Client"
51+
/>
4552
<Spacer />
4653
<SideBarButton icon={MdLiveHelp} path="/help" text="Help" hideTopBar />
4754
</SideBarContainer>

‎apps/reactotron-app/src/renderer/pages/apolloClient/Cache.tsx

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React from "react"
2+
import styled from "styled-components"
3+
import { Header } from "reactotron-core-ui"
4+
import { MdWarning } from "react-icons/md"
5+
import { HiDocumentSearch, HiOutlinePencilAlt } from "react-icons/hi"
6+
import { TbDatabaseDollar } from "react-icons/tb"
7+
import { Title } from "../reactNative/components/Shared"
8+
9+
const Container = styled.div`
10+
display: flex;
11+
flex-direction: column;
12+
width: 100%;
13+
`
14+
15+
const StorybookContainer = styled.div`
16+
display: flex;
17+
flex-direction: column;
18+
height: 100%;
19+
`
20+
21+
const TopSection = styled.div`
22+
flex: 1;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
`
28+
29+
const WarningContainer = styled.div`
30+
display: flex;
31+
color: ${(props) => props.theme.warning};
32+
background-color: ${(props) => props.theme.backgroundDarker};
33+
border-top: 1px solid ${(props) => props.theme.chromeLine};
34+
align-items: center;
35+
padding: 0 20px;
36+
`
37+
const WarningDescription = styled.div`
38+
margin-left: 20px;
39+
`
40+
41+
function Cache() {
42+
return (
43+
<Container>
44+
<Header
45+
isDraggable
46+
tabs={[
47+
{
48+
text: "Cache",
49+
icon: TbDatabaseDollar,
50+
isActive: true,
51+
52+
// eslint-disable-next-line @typescript-eslint/no-empty-function
53+
onClick: () => {},
54+
},
55+
{
56+
text: "Queries",
57+
icon: HiDocumentSearch,
58+
isActive: false,
59+
onClick: () => {
60+
// TODO: Couldn't get react-router-dom to do it for me so I forced it.
61+
window.location.hash = "#/apolloClient/queries"
62+
},
63+
},
64+
{
65+
text: "Mutations",
66+
icon: HiOutlinePencilAlt,
67+
isActive: false,
68+
onClick: () => {
69+
// TODO: Couldn't get react-router-dom to do it for me so I forced it.
70+
window.location.hash = "#/apolloClient/mutations"
71+
},
72+
},
73+
]}
74+
// actions={[
75+
// {
76+
// tip: "Search",
77+
// icon: MdSearch,
78+
// onClick: () => {
79+
// toggleSearch()
80+
// },
81+
// },
82+
// {
83+
// tip: "Filter",
84+
// icon: MdFilterList,
85+
// onClick: () => {
86+
// openFilter()
87+
// },
88+
// },
89+
// {
90+
// tip: "Reverse Order",
91+
// icon: MdSwapVert,
92+
// onClick: () => {
93+
// toggleReverse()
94+
// },
95+
// },
96+
// {
97+
// tip: "Clear",
98+
// icon: MdDeleteSweep,
99+
// onClick: () => {
100+
// clearSelectedConnectionCommands()
101+
// },
102+
// },
103+
// ]}
104+
/>
105+
<StorybookContainer>
106+
<TopSection>
107+
<Title>TODO (utilize state subscription for right now)</Title>
108+
</TopSection>
109+
<WarningContainer>
110+
<MdWarning size={60} />
111+
<WarningDescription>This is preview feature.</WarningDescription>
112+
</WarningContainer>
113+
</StorybookContainer>
114+
</Container>
115+
)
116+
}
117+
118+
export default Cache

‎apps/reactotron-app/src/renderer/pages/apolloClient/Mutations.tsx

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import React from "react"
2+
import styled from "styled-components"
3+
import { Header } from "reactotron-core-ui"
4+
import { MdWarning } from "react-icons/md"
5+
import { HiDocumentSearch, HiOutlinePencilAlt } from "react-icons/hi"
6+
import { TbDatabaseDollar } from "react-icons/tb"
7+
import { Title } from "../reactNative/components/Shared"
8+
9+
const Container = styled.div`
10+
display: flex;
11+
flex-direction: column;
12+
width: 100%;
13+
`
14+
15+
const StorybookContainer = styled.div`
16+
display: flex;
17+
flex-direction: column;
18+
height: 100%;
19+
`
20+
21+
const TopSection = styled.div`
22+
flex: 1;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
`
28+
29+
const WarningContainer = styled.div`
30+
display: flex;
31+
color: ${(props) => props.theme.warning};
32+
background-color: ${(props) => props.theme.backgroundDarker};
33+
border-top: 1px solid ${(props) => props.theme.chromeLine};
34+
align-items: center;
35+
padding: 0 20px;
36+
`
37+
const WarningDescription = styled.div`
38+
margin-left: 20px;
39+
`
40+
41+
function Mutations() {
42+
return (
43+
<Container>
44+
<Header
45+
isDraggable
46+
tabs={[
47+
{
48+
text: "Cache",
49+
icon: TbDatabaseDollar,
50+
isActive: false,
51+
onClick: () => {
52+
// TODO: Couldn't get react-router-dom to do it for me so I forced it.
53+
window.location.hash = "#/apolloClient/cache"
54+
},
55+
},
56+
{
57+
text: "Queries",
58+
icon: HiDocumentSearch,
59+
isActive: false,
60+
onClick: () => {
61+
// TODO: Couldn't get react-router-dom to do it for me so I forced it.
62+
window.location.hash = "#/apolloClient/queries"
63+
},
64+
},
65+
{
66+
text: "Mutations",
67+
icon: HiOutlinePencilAlt,
68+
isActive: true,
69+
// eslint-disable-next-line @typescript-eslint/no-empty-function
70+
onClick: () => {},
71+
},
72+
]}
73+
// actions={[
74+
// {
75+
// tip: "Search",
76+
// icon: MdSearch,
77+
// onClick: () => {
78+
// toggleSearch()
79+
// },
80+
// },
81+
// {
82+
// tip: "Filter",
83+
// icon: MdFilterList,
84+
// onClick: () => {
85+
// openFilter()
86+
// },
87+
// },
88+
// {
89+
// tip: "Reverse Order",
90+
// icon: MdSwapVert,
91+
// onClick: () => {
92+
// toggleReverse()
93+
// },
94+
// },
95+
// {
96+
// tip: "Clear",
97+
// icon: MdDeleteSweep,
98+
// onClick: () => {
99+
// clearSelectedConnectionCommands()
100+
// },
101+
// },
102+
// ]}
103+
/>
104+
<StorybookContainer>
105+
<TopSection>
106+
<Title>TODO</Title>
107+
</TopSection>
108+
<WarningContainer>
109+
<MdWarning size={60} />
110+
<WarningDescription>This is preview feature.</WarningDescription>
111+
</WarningContainer>
112+
</StorybookContainer>
113+
</Container>
114+
)
115+
}
116+
117+
export default Mutations

0 commit comments

Comments
 (0)