Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit 8e577ca

Browse files
thefringeninjathefringeninja
committed
aligning Stream and StreamMessage views
1 parent fbdd7a3 commit 8e577ca

File tree

5 files changed

+77
-105
lines changed

5 files changed

+77
-105
lines changed

‎src/stream-store/Viewer/HalViewer/Stream.tsx‎

Lines changed: 5 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
import React, { ComponentType, CSSProperties, StatelessComponent } from 'react';
1+
import React, { ComponentType, StatelessComponent } from 'react';
22
import { Observable as obs } from 'rxjs';
3-
import { Hyperlink } from '../../../components';
4-
import {
5-
Table,
6-
TableBody,
7-
TableCell,
8-
TableHead,
9-
TableRow,
10-
} from '../../../components/StripeyTable';
3+
import { Table, TableBody } from '../../../components/StripeyTable';
114
import { connect, createState } from '../../../reactive';
125
import { HalResource } from '../../../types';
136
import { hal } from '../../../utils';
147
import rels from '../../rels';
158
import store from '../../store';
9+
import { StreamHeader, StreamMessageDetails } from './components';
1610
import { HalViewerProps } from './types';
1711

1812
interface Message {
@@ -39,50 +33,16 @@ const state$ = createState<StreamState>(
3933
obs.of({ messages: [] }),
4034
);
4135

42-
const nowrap: CSSProperties = { whiteSpace: 'nowrap' };
43-
44-
const Message = ({
45-
messageId,
46-
createdUtc,
47-
position,
48-
streamId,
49-
streamVersion,
50-
type,
51-
_links,
52-
}: Message & HalResource) => (
53-
<TableRow>
54-
<TableCell style={nowrap}>{messageId}</TableCell>
55-
<TableCell style={nowrap}>{createdUtc}</TableCell>
56-
<TableCell style={nowrap}>{type}</TableCell>
57-
<TableCell style={nowrap}>
58-
<Hyperlink _links={_links} rel={rels.feed} />
59-
</TableCell>
60-
<TableCell>
61-
<Hyperlink _links={_links} rel={rels.self} />
62-
</TableCell>
63-
<TableCell>{position}</TableCell>
64-
</TableRow>
65-
);
66-
6736
interface MessagesState {
6837
messages: Array<Message & HalResource>;
6938
}
7039

7140
const Messages: StatelessComponent<MessagesState> = ({ messages }) => (
7241
<Table>
73-
<TableHead>
74-
<TableRow>
75-
<TableCell>{'Message Id'}</TableCell>
76-
<TableCell>{'Created UTC'}</TableCell>
77-
<TableCell>{'Type'}</TableCell>
78-
<TableCell>{'Stream'}</TableCell>
79-
<TableCell>{'Stream Id@Version'}</TableCell>
80-
<TableCell numeric>{'Position'}</TableCell>
81-
</TableRow>
82-
</TableHead>
42+
<StreamHeader />
8343
<TableBody>
8444
{messages.map(message => (
85-
<Message key={message.messageId} {...message} />
45+
<StreamMessageDetails key={message.messageId} {...message} />
8646
))}
8747
</TableBody>
8848
</Table>

‎src/stream-store/Viewer/HalViewer/StreamMessage.tsx‎

Lines changed: 4 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ import {
1010
} from '@material-ui/core';
1111
import React, {
1212
ComponentType,
13-
CSSProperties,
1413
FormEvent,
1514
PureComponent,
1615
ReactNode,
17-
StatelessComponent,
1816
} from 'react';
1917
import Inspector, {
2018
NodeRendererProps,
@@ -24,20 +22,15 @@ import Inspector, {
2422
} from 'react-inspector';
2523
import { Observable as obs } from 'rxjs';
2624
import uriTemplate from 'uri-template';
27-
import { Hyperlink, StreamBrowser } from '../../../components';
25+
import { StreamBrowser } from '../../../components';
2826
import { Notes, Settings } from '../../../components/Icons';
29-
import {
30-
Table,
31-
TableBody,
32-
TableCell,
33-
TableHead,
34-
TableRow,
35-
} from '../../../components/StripeyTable';
27+
import { Table, TableBody } from '../../../components/StripeyTable';
3628
import { connect, createState } from '../../../reactive';
3729
import { HalResource, NavigatableProps } from '../../../types';
3830
import { hal, http } from '../../../utils';
3931
import rels from '../../rels';
4032
import store from '../../store';
33+
import { StreamHeader, StreamMessageDetails } from './components';
4134
import { HalViewerProps } from './types';
4235

4336
const tryParseJson = (payload: string): object => {
@@ -85,53 +78,6 @@ const state$ = createState<StreamMessageState>(
8578
}),
8679
);
8780

88-
const StreamMessageHeader = () => (
89-
<TableRow>
90-
<TableCell>{'StreamId'}</TableCell>
91-
<TableCell>{'Message Id'}</TableCell>
92-
<TableCell>{'Created UTC'}</TableCell>
93-
<TableCell>{'Type'}</TableCell>
94-
<TableCell style={{ width: '100%' }}>{'Stream Id@Version'}</TableCell>
95-
<TableCell>{'Position'}</TableCell>
96-
</TableRow>
97-
);
98-
99-
const nowrap: CSSProperties = { whiteSpace: 'nowrap' };
100-
101-
interface StreamMessageDetailsProps {
102-
messageId: string;
103-
createdUtc: string;
104-
position: number;
105-
streamId: string;
106-
streamVersion: number;
107-
type: string;
108-
}
109-
110-
const StreamMessageDetails: StatelessComponent<
111-
StreamMessageDetailsProps & HalResource
112-
> = ({
113-
messageId,
114-
createdUtc,
115-
position,
116-
streamId,
117-
streamVersion,
118-
type,
119-
_links,
120-
}) => (
121-
<TableRow>
122-
<TableCell style={nowrap}>
123-
<Hyperlink _links={_links} rel={rels.feed} />
124-
</TableCell>
125-
<TableCell style={nowrap}>{messageId}</TableCell>
126-
<TableCell style={nowrap}>{createdUtc}</TableCell>
127-
<TableCell style={nowrap}>{type}</TableCell>
128-
<TableCell style={{ width: '100%' }}>
129-
<Hyperlink _links={_links} rel={rels.self} />
130-
</TableCell>
131-
<TableCell numeric>{position}</TableCell>
132-
</TableRow>
133-
);
134-
13581
const isPotentialStreamId = (data: any) =>
13682
typeof data === 'number' || typeof data === 'string';
13783

@@ -333,9 +279,7 @@ const StreamMessage: ComponentType<StreamMessageState & HalViewerProps> = ({
333279
}) => (
334280
<section>
335281
<Table style={{ tableLayout: 'auto' }}>
336-
<TableHead>
337-
<StreamMessageHeader />
338-
</TableHead>
282+
<StreamHeader />
339283
<TableBody>
340284
<StreamMessageDetails {...message} {...props} />
341285
</TableBody>

‎src/stream-store/Viewer/HalViewer/components/StreamHeader.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import {
3+
TableCell,
4+
TableHead,
5+
TableRow,
6+
} from '../../../../components/StripeyTable';
7+
8+
const StreamHeader = () => (
9+
<TableHead>
10+
<TableRow>
11+
<TableCell>{'StreamId'}</TableCell>
12+
<TableCell>{'Message Id'}</TableCell>
13+
<TableCell>{'Created UTC'}</TableCell>
14+
<TableCell>{'Type'}</TableCell>
15+
<TableCell style={{ width: '100%' }}>
16+
{'Stream Id@Version'}
17+
</TableCell>
18+
<TableCell>{'Position'}</TableCell>
19+
</TableRow>
20+
</TableHead>
21+
);
22+
23+
export default StreamHeader;

‎src/stream-store/Viewer/HalViewer/components/StreamMessageDetails.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { CSSProperties, StatelessComponent } from 'react';
2+
import { Hyperlink } from '../../../../components';
3+
import { TableCell, TableRow } from '../../../../components/StripeyTable';
4+
import { HalResource } from '../../../../types';
5+
import rels from '../../../rels';
6+
7+
const nowrap: CSSProperties = { whiteSpace: 'nowrap' };
8+
9+
interface StreamMessageDetailsProps {
10+
messageId: string;
11+
createdUtc: string;
12+
position: number;
13+
streamId: string;
14+
streamVersion: number;
15+
type: string;
16+
}
17+
18+
const StreamMessageDetails: StatelessComponent<
19+
StreamMessageDetailsProps & HalResource
20+
> = ({
21+
messageId,
22+
createdUtc,
23+
position,
24+
streamId,
25+
streamVersion,
26+
type,
27+
_links,
28+
}) => (
29+
<TableRow>
30+
<TableCell style={nowrap}>
31+
<Hyperlink _links={_links} rel={rels.feed} />
32+
</TableCell>
33+
<TableCell style={nowrap}>{messageId}</TableCell>
34+
<TableCell style={nowrap}>{createdUtc}</TableCell>
35+
<TableCell style={nowrap}>{type}</TableCell>
36+
<TableCell style={{ width: '100%' }}>
37+
<Hyperlink _links={_links} rel={rels.self} />
38+
</TableCell>
39+
<TableCell numeric>{position}</TableCell>
40+
</TableRow>
41+
);
42+
43+
export default StreamMessageDetails;

‎src/stream-store/Viewer/HalViewer/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as StreamHeader } from './StreamHeader';
2+
export { default as StreamMessageDetails } from './StreamMessageDetails';

0 commit comments

Comments
 (0)