Skip to content

Commit d62cbf4

Browse files
ywy-wywy-w
committed
integrating frontendfixes
1 parent 6d0656e commit d62cbf4

File tree

3 files changed

+108
-65
lines changed

3 files changed

+108
-65
lines changed

‎src/client/components-v2/main/http2-composer/Http2Composer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function Http2Composer(props) {
6262
warningMessage,
6363
} = props;
6464

65-
console.log(newRequestBody)
65+
// console.log(newRequestBody)
6666

6767
const {
6868
gRPC,

‎src/client/components-v2/navbar/ProtocolSelect.tsx‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,51 @@ import * as actions from './../../features/business/businessSlice';
77
import * as uiactions from './../../features/ui/uiSlice';
88

99
// Import MUI components.
10+
import { styled } from '@mui/system';
1011
import { Box, Button } from '@mui/material';
12+
import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
13+
14+
const blue = {
15+
500: '#51819b',
16+
600: '#51819b',
17+
700: '#7ebdde',
18+
};
19+
20+
const white = {
21+
500: '#f0f6fa',
22+
}
23+
24+
const CustomButton = styled(ButtonUnstyled)`
25+
font-family: IBM Plex Sans, sans-serif;
26+
font-weight: bold;
27+
font-size: 0.875rem;
28+
background-color: ${blue[500]};
29+
padding: 10px 0px;
30+
border-radius: 3px;
31+
color: ${white[500]};
32+
transition: all 150ms ease;
33+
cursor: pointer;
34+
border: none;
35+
width: 8vw;
36+
37+
&:hover {
38+
background-color: ${blue[600]};
39+
}
40+
41+
&.${buttonUnstyledClasses.active} {
42+
background-color: ${blue[700]};
43+
}
44+
45+
&.${buttonUnstyledClasses.focusVisible} {
46+
box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
47+
outline: none;
48+
}
49+
50+
&.${buttonUnstyledClasses.disabled} {
51+
opacity: 0.5;
52+
cursor: not-allowed;
53+
}
54+
`;
1155

1256
const mapStateToProps = (store) => {
1357
return {
@@ -71,13 +115,13 @@ const mapDispatchToProps = (dispatch) => ({
71115
* value: The value of the button used to update the Redux store.
72116
*/
73117
const pages = [
74-
{ name: 'HTTP2', route: '/', value: 'rest' },
75-
{ name: 'GRAPHQL', route: '/graphql', value: 'graphQL' },
76-
{ name: 'GRPC', route: '/grpc', value: 'grpc' },
77-
{ name: 'WEB SOCKET', route: '/websocket', value: 'ws' },
78-
{ name: 'WEBRTC', route: '/webrtc', value: 'webrtc' },
79-
{ name: 'OPENAPI', route: '/openapi', value: 'openapi' },
80-
{ name: 'WEBHOOK', route: '/webhook', value: 'webhook' },
118+
{ name: 'HTTP/2', route: '/', value: 'rest' },
119+
{ name: 'GraphQL', route: '/graphql', value: 'graphQL' },
120+
{ name: 'gRPC', route: '/grpc', value: 'grpc' },
121+
{ name: 'WebSocket', route: '/websocket', value: 'ws' },
122+
{ name: 'WebRTC', route: '/webrtc', value: 'webrtc' },
123+
{ name: 'OpenAPI', route: '/openapi', value: 'openapi' },
124+
{ name: 'Webhook', route: '/webhook', value: 'webhook' },
81125
]
82126

83127
/**
@@ -274,10 +318,10 @@ function ProtocolSelect(props) {
274318
key={page.name}
275319
to={page.route}
276320
>
277-
<Button
321+
<CustomButton
278322
key={page.name}
279-
variant="contained"
280-
color="primary"
323+
// variant="contained"
324+
// color="primary"
281325
onClick={() => {
282326
console.log(page.value)
283327
onProtocolSelect(page.value)}
@@ -286,7 +330,7 @@ function ProtocolSelect(props) {
286330
m: 1
287331
}}>
288332
{page.name}
289-
</Button>
333+
</CustomButton>
290334
</Link>
291335
))}
292336
</Box>

‎src/client/controllers/historyController.ts‎

Lines changed: 52 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
1-
import { format, parse, parseISO } from 'date-fns';
2-
import * as store from '../store';
3-
import * as actions from './../features/business/businessSlice';
4-
import * as uiactions from './../features/ui/uiSlice';
5-
import db from '../db';
6-
import { ReqRes } from '../../types';
7-
8-
const historyController = {
9-
addHistoryToIndexedDb(reqRes: ReqRes): void {
10-
db.table('history')
11-
.put(reqRes)
12-
.catch((err: string) => console.log('Error in addHistoryToIndexedDb', err));
13-
},
14-
15-
deleteHistoryFromIndexedDb(id: string): void {
16-
db.table('history')
17-
.delete(id)
18-
.catch((err: string) => console.log('Error in deleteFromHistory', err));
19-
},
20-
21-
clearHistoryFromIndexedDb(): void {
22-
db.table('history').clear().catch((err: string) => console.log(err));
23-
},
24-
25-
async getHistory(): Promise<void> {
26-
try {
27-
const history: ReqRes[] = await db.table('history').toArray()
28-
const historyGroupsObj = history.reduce((groups: Record<string, ReqRes[]>, hist: ReqRes) => {
29-
const date = format(hist.createdAt, 'MM/dd/yyyy');
30-
if (!groups[date]) {
31-
groups[date] = [];
32-
}
33-
groups[date].push(hist);
34-
return groups;
35-
}, {});
36-
const historyGroupsArr = Object.keys(historyGroupsObj)
37-
.sort((a, b) => parse(b, 'MM/dd/yyyy', new Date()).valueOf() - parse(a, 'MM/dd/yyyy', new Date()).valueOf())
38-
.map((date: string) => ({ // this returns an array of objects with K:date T:string and K:array of history objects
39-
date,
40-
history: historyGroupsObj[date].sort(
41-
(a: ReqRes, b: ReqRes) => b.createdAt.valueOf() - a.createdAt.valueOf()),
42-
}));
43-
console.log(historyGroupsArr)
44-
store.default.dispatch(actions.getHistory(historyGroupsArr));
45-
} catch {
46-
((err: string) => console.log('Error in getHistory', err))
47-
};
48-
}
49-
};
50-
51-
export default historyController;
52-
53-
1+
import { format, parse, parseISO } from 'date-fns';
2+
import * as store from '../store';
3+
import * as actions from './../features/business/businessSlice';
4+
import * as uiactions from './../features/ui/uiSlice';
5+
import db from '../db';
6+
import { ReqRes } from '../../types';
7+
8+
const historyController = {
9+
addHistoryToIndexedDb(reqRes: ReqRes): void {
10+
db.table('history')
11+
.put(reqRes)
12+
.catch((err: string) => console.log('Error in addHistoryToIndexedDb', err));
13+
},
14+
15+
deleteHistoryFromIndexedDb(id: string): void {
16+
db.table('history')
17+
.delete(id)
18+
.catch((err: string) => console.log('Error in deleteFromHistory', err));
19+
},
20+
21+
clearHistoryFromIndexedDb(): void {
22+
db.table('history').clear().catch((err: string) => console.log(err));
23+
},
24+
25+
async getHistory(): Promise<void> {
26+
try {
27+
const history: ReqRes[] = await db.table('history').toArray()
28+
const historyGroupsObj = history.reduce((groups: Record<string, ReqRes[]>, hist: ReqRes) => {
29+
const date = format(hist.createdAt, 'MM/dd/yyyy');
30+
if (!groups[date]) {
31+
groups[date] = [];
32+
}
33+
groups[date].push(hist);
34+
return groups;
35+
}, {});
36+
const historyGroupsArr = Object.keys(historyGroupsObj)
37+
.sort((a, b) => parse(b, 'MM/dd/yyyy', new Date()).valueOf() - parse(a, 'MM/dd/yyyy', new Date()).valueOf())
38+
.map((date: string) => ({ // this returns an array of objects with K:date T:string and K:array of history objects
39+
date,
40+
history: historyGroupsObj[date].sort(
41+
(a: ReqRes, b: ReqRes) => b.createdAt.valueOf() - a.createdAt.valueOf()),
42+
}));
43+
store.default.dispatch(actions.getHistory(historyGroupsArr));
44+
} catch {
45+
((err: string) => console.log('Error in getHistory', err))
46+
};
47+
}
48+
};
49+
50+
export default historyController;
51+
52+

0 commit comments

Comments
 (0)