Skip to content

Commit 47432d1

Browse files
ShyykoSerhiyShyykoSerhiy
committed
WIP: rewrited filelist with normalized data structure
1 parent bce092f commit 47432d1

File tree

9 files changed

+193
-54
lines changed

9 files changed

+193
-54
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"author": "Shyyko Serhiy <[email protected]>",
1717
"license": "MIT",
1818
"dependencies": {
19+
"immutable": "^3.8.1",
1920
"koa": "^1.2.4",
2021
"koa-static": "^2.0.0",
2122
"material-ui": "^0.16.6",

‎src/public/actions/Actions.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch } from 'redux';
1+
import { Dispatch, Action } from 'redux';
22
import { SocketIoCodeService } from '../service/SocketIoCodeService';
33
/*
44
* action types
@@ -31,10 +31,10 @@ export interface JoinRoomAction extends HasRoomUuid {
3131
type: 'JOIN_ROOM';
3232
}
3333

34-
export interface CodeChangedLocalAction extends HasCode {
34+
export interface CodeChangedLocalAction extends HasCode, Action {
3535
type: 'CODE_CHANGED_LOCAL';
3636
}
37-
export interface CodeChangedRemoteAction extends HasCode {
37+
export interface CodeChangedRemoteAction extends HasCode, Action {
3838
type: 'CODE_CHANGED_REMOTE';
3939
}
4040
/*

‎src/public/actions/FileListActions.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Dispatch } from 'redux';
2+
import { SocketIoCodeService } from '../service/SocketIoCodeService';
3+
import { File, FileId } from '../reducers/FileList';
4+
/*
5+
* action types
6+
*/
7+
export const EXPAND_COLLAPSE = 'EXPAND_COLLAPSE' as 'EXPAND_COLLAPSE';
8+
export const OPEN_FILE = 'OPEN_FILE' as 'OPEN_FILE';
9+
10+
interface ActionWithFile {
11+
fileId: FileId
12+
}
13+
14+
export interface ExpandCollapseAction extends ActionWithFile {
15+
type: typeof EXPAND_COLLAPSE;
16+
}
17+
18+
export interface OpenFileAction extends ActionWithFile {
19+
type: typeof OPEN_FILE;
20+
}
21+
22+
export type FileListActions = ExpandCollapseAction | OpenFileAction;
23+
/*
24+
* action creators
25+
*/
26+
export function expandCollapse(fileId: FileId): ExpandCollapseAction {
27+
return { type: EXPAND_COLLAPSE, fileId }
28+
}
29+
30+
31+
export function openFile(fileId: FileId): OpenFileAction {
32+
return { type: OPEN_FILE, fileId }
33+
}
34+
35+
export default {
36+
expandCollapse,
37+
openFile
38+
}

‎src/public/components/files/FileList.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import * as React from 'react';
32
import CSSModules from 'react-css-modules';
43
import { List, ListItem, makeSelectable } from 'material-ui/List';
@@ -8,14 +7,15 @@ import ContentInbox from 'material-ui/svg-icons/content/inbox';
87
import ContentDrafts from 'material-ui/svg-icons/content/drafts';
98
import ContentSend from 'material-ui/svg-icons/content/send';
109
import Subheader from 'material-ui/Subheader';
11-
import { FileListState, File } from '../../reducers/FileList'
10+
import { FileListState, File, FileId } from '../../reducers/FileList'
11+
import FileItem from '../../containers/files/FileItem'
1212
import { FileIcon } from './FileIcon';
1313
const styles = require("./FileList.css");
1414

1515
const SelectableList = makeSelectable(List);
1616

1717
interface FileListReduxProps {
18-
fileList: FileListState
18+
rootFile: File
1919
}
2020

2121
interface FilesListProps extends FileListReduxProps {
@@ -26,6 +26,7 @@ interface FilesListState {
2626

2727
@CSSModules(styles)
2828
export class FileList extends React.Component<FilesListProps, FilesListState>{
29+
2930
render() {
3031
return <div className={styles.container}>
3132
<SelectableList value={0} onChange={(...args: any[]) => { console.log(args) }}>
@@ -36,17 +37,11 @@ export class FileList extends React.Component<FilesListProps, FilesListState>{
3637
}
3738

3839
renderFileList() {
39-
let i = 0;
40-
const renderFile = (file: File): JSX.Element => {
41-
return <ListItem
42-
key={i}
43-
value={i++}
44-
primaryText={file.filename}
45-
leftIcon={<FileIcon file={file} />}
46-
nestedItems={(file.children || []).map(renderFile)}
47-
/>
40+
const { rootFile } = this.props;
41+
const renderFile = (fileId: FileId): JSX.Element => {
42+
return <FileItem key={fileId} fileId={fileId} parentFileId={rootFile.id} />;
4843
}
4944

50-
return this.props.fileList.files.map(renderFile)
45+
return rootFile.children.map(renderFile);
5146
}
5247
}

‎src/public/containers/files/FileItem.css

Whitespace-only changes.

‎src/public/containers/files/FileItem.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as React from 'react';
2+
import { connect } from 'react-redux';
3+
import { Dispatch } from 'redux';
4+
import { SockscodeState } from '../../reducers/Reducers';
5+
import CSSModules from 'react-css-modules';
6+
import { List, ListItem, makeSelectable } from 'material-ui/List';
7+
import SvgIcon from 'material-ui/SvgIcon';
8+
import ActionGrade from 'material-ui/svg-icons/action/grade';
9+
import ContentInbox from 'material-ui/svg-icons/content/inbox';
10+
import ContentDrafts from 'material-ui/svg-icons/content/drafts';
11+
import ContentSend from 'material-ui/svg-icons/content/send';
12+
import Subheader from 'material-ui/Subheader';
13+
import { FileListState, File, FileId } from '../../reducers/FileList'
14+
import fileListActions from '../../actions/FileListActions'
15+
import { FileIcon } from '../../components/files/FileIcon';
16+
const styles = require("./FileItem.css");
17+
18+
const SelectableList = makeSelectable(List);
19+
20+
interface FileItemReduxProps {
21+
file?: File;
22+
onExpandCollapse?: (fileId: FileId) => void;
23+
onFileOpen?: (fileId: FileId) => void;
24+
}
25+
26+
interface FileItemProps extends FileItemReduxProps {
27+
fileId: FileId;
28+
parentFileId: FileId;
29+
}
30+
31+
interface FileItemState {
32+
}
33+
34+
@CSSModules(styles)
35+
class FileItem extends React.Component<FileItemProps, FileItemState>{
36+
render() {
37+
const { onExpandCollapse, onFileOpen, fileId, file, ...other } = this.props;
38+
return <ListItem
39+
key={fileId}
40+
value={fileId}
41+
primaryText={file.filename}
42+
leftIcon={<FileIcon file={file} />}
43+
open={file.isExpanded}
44+
onClick={() => { if (file.isDirectory) { onExpandCollapse(fileId) } else { onFileOpen(fileId) } }}
45+
onNestedListToggle={() => { onExpandCollapse(fileId) }}
46+
nestedItems={(file.children || []).map((fileChildId) => {
47+
return <FileItemConnected key={fileChildId} fileId={fileChildId} parentFileId={fileId} />
48+
})}
49+
{...other}
50+
/>
51+
}
52+
}
53+
54+
55+
const mapStateToProps = (state: SockscodeState, props: FileItemProps): FileItemReduxProps => {
56+
return { file: state.fileList.files.get(props.fileId) };
57+
}
58+
59+
const mapDispatchToProps = (dispatch: Dispatch<{}>): FileItemReduxProps => {
60+
return {
61+
onExpandCollapse: (fileId: FileId) => {
62+
dispatch(fileListActions.expandCollapse(fileId));
63+
},
64+
onFileOpen: (fileId: FileId) => {
65+
dispatch(fileListActions.openFile(fileId));
66+
}
67+
}
68+
}
69+
70+
const FileItemConnected = connect(
71+
mapStateToProps,
72+
mapDispatchToProps
73+
)(FileItem);
74+
75+
export default FileItemConnected;

‎src/public/containers/files/FileList.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
import { connect } from 'react-redux';
22
import { Dispatch } from 'redux';
33
import { SockscodeState } from '../../reducers/Reducers';
4-
import { codeChanged } from '../../actions/Actions'
4+
import { expandCollapse } from '../../actions/FileListActions'
55
import { FileList as FileListComponent } from '../../components/files/FileList';
6+
import { File } from '../../reducers/FileList'
67

78

89
const mapStateToProps = (state: SockscodeState) => {
9-
return { fileList: state.fileList };
10+
return { rootFile: state.fileList.files.get(0) };
1011
}
1112

12-
const mapDispatchToProps = (dispatch: Dispatch<{}>) => {
13-
return {
14-
//onCodeChange: (code: string) => {
15-
// dispatch(codeChanged(code));
16-
//}
17-
}
13+
const mapDispatchToProps = (dispatch: Dispatch<{}>) => {
14+
return {};
1815
}
1916

2017
const FileList = connect(

0 commit comments

Comments
 (0)