From 7bbb1679ada7f369293aa360491f7d125743d7e0 Mon Sep 17 00:00:00 2001 From: Qolzam Date: Mon, 30 Oct 2017 20:48:18 +0700 Subject: [PATCH] Migrate components to typescript --- .gitignore | 4 +- app/api/CircleAPI.jsx | 51 --- app/api/FileAPI.jsx | 144 ------ app/api/PostAPI.jsx | 29 -- app/api/StringAPI.jsx | 30 -- app/components/Circle.jsx | 266 ----------- app/components/CommentWrite.jsx | 84 ---- app/components/ImageGallery.jsx | 248 ---------- app/components/Master/index.ts | 2 - app/components/MasterLoading.jsx | 55 --- app/components/SidebarContent.jsx | 54 --- app/components/SidebarMain.jsx | 36 -- app/components/Signup.jsx | 285 ------------ app/components/UserBox.jsx | 295 ------------ app/components/pattern | 63 --- .../notifications/notificationService.ts | 72 --- app/layouts/IconMenuElement.jsx | 0 app/reducers/global/GlobalState.ts | 107 ----- app/tests/components/CommentWrite.test.jsx | 14 - package.json | 5 +- playground/moment-examples.js | 16 - {app => src}/actions/authorizeActions.ts | 30 +- {app => src}/actions/circleActions.ts | 12 +- {app => src}/actions/commentActions.ts | 27 +- {app => src}/actions/globalActions.ts | 12 +- {app => src}/actions/imageGalleryActions.ts | 8 +- {app => src}/actions/index.ts | 0 {app => src}/actions/notifyActions.ts | 23 +- {app => src}/actions/postActions.ts | 18 +- {app => src}/actions/userActions.ts | 16 +- {app => src}/actions/voteActions.ts | 6 +- src/api/CircleAPI.ts | 47 ++ src/api/FileAPI.ts | 147 ++++++ src/api/PostAPI.ts | 29 ++ src/api/StringAPI.ts | 30 ++ src/components/circle/CircleComponent.tsx | 270 +++++++++++ .../circle/ICircleComponentProps.ts | 84 ++++ .../circle/ICircleComponentState.ts | 27 ++ src/components/circle/index.ts | 2 + .../components/comment/CommentComponent.tsx | 217 ++++----- .../comment/ICommentComponentProps.ts | 98 ++++ .../comment/ICommentComponentState.ts | 43 ++ src/components/comment/index.ts | 2 + .../commentGroup/CommentGroupComponent.tsx | 146 +++--- .../ICommentGroupComponentProps.ts | 93 ++++ .../ICommentGroupComponentState.ts | 19 + src/components/commentGroup/index.ts | 2 + .../commentList/CommentListComponent.tsx | 50 +- .../commentList/ICommentListComponentProps.ts | 28 ++ .../commentList/ICommentListComponentState.ts | 4 + src/components/commentList/index.ts | 2 + .../editProfile/EditProfileComponent.tsx | 427 +++++++++--------- .../editProfile/IEditProfileComponentProps.ts | 58 +++ .../editProfile/IEditProfileComponentState.ts | 68 +++ src/components/editProfile/index.ts | 2 + .../findPeople/FindPeopleComponent.tsx | 94 ++-- .../findPeople/IFindPeopleComponentProps.ts | 20 + .../findPeople/IFindPeopleComponentState.ts | 4 + src/components/findPeople/index.ts | 2 + .../followers/FollowersComponent.tsx | 57 +-- .../followers/IFollowersComponentProps.ts | 12 + .../followers/IFollowersComponentState.ts | 4 + src/components/followers/index.ts | 2 + .../following/FollowingComponent.tsx | 56 +-- .../following/IFollowingComponentProps.ts | 6 + .../following/IFollowingComponentState.ts | 4 + src/components/following/index.ts | 2 + .../components/home/HomeComponent.tsx | 98 ++-- src/components/home/IHomeComponentProps.ts | 28 ++ src/components/home/IHomeComponentState.ts | 27 ++ src/components/home/index.ts | 2 + .../homeHeader/HomeHeaderComponent.tsx | 163 ++++--- .../homeHeader/IHomeHeaderComponentProps.ts | 63 +++ .../homeHeader/IHomeHeaderComponentState.ts | 35 ++ src/components/homeHeader/index.ts | 2 + .../IImageGalleryComponentProps.ts | 48 ++ .../IImageGalleryComponentState.ts | 4 + .../imageGallery/ImageGalleryComponent.tsx | 256 +++++++++++ src/components/imageGallery/index.ts | 2 + src/components/img/IImgComponentProps.ts | 19 + src/components/img/IImgComponentState.ts | 11 + .../components/img/ImgComponent.tsx | 85 ++-- src/components/img/index.ts | 2 + .../imgCover/IImgCoverComponentProps.ts | 42 ++ .../imgCover/IImgCoverComponentState.ts | 12 + .../components/imgCover/ImgCoverComponent.tsx | 102 ++--- src/components/imgCover/index.ts | 2 + src/components/login/ILoginComponentProps.ts | 16 + src/components/login/ILoginComponentState.ts | 43 ++ .../components/login/LoginComponent.tsx | 87 ++-- src/components/login/index.ts | 2 + .../master/IMasterComponentProps.ts | 2 +- .../master/IMasterComponentState.ts | 14 +- .../components/master/MasterComponent.tsx | 33 +- src/components/master/index.ts | 2 + .../IMasterLoadingComponentProps.ts | 12 + .../IMasterLoadingComponentState.ts | 4 + .../masterLoading/MasterLoadingComponent.tsx | 47 ++ src/components/masterLoading/index.ts | 2 + .../notify/INotifyComponentProps.ts | 45 ++ .../notify/INotifyComponentState.ts | 4 + .../components/notify/NotifyComponent.tsx | 45 +- src/components/notify/index.ts | 2 + .../notifyItem/INotifyItemComponentProps.ts | 86 ++++ .../notifyItem/INotifyItemComponentState.ts | 4 + .../notifyItem/NotifyItemComponent.tsx | 103 ++--- src/components/notifyItem/index.ts | 2 + .../people/IPeopleComponentProps.ts | 32 ++ .../people/IPeopleComponentState.ts | 4 + .../components/people/PeopleComponent.tsx | 91 ++-- src/components/people/index.ts | 2 + src/components/post/IPostComponentProps.ts | 161 +++++++ src/components/post/IPostComponentState.ts | 42 ++ .../components/post/PostComponent.tsx | 327 +++++++------- src/components/post/index.ts | 2 + .../postPage/IPostPageComponentProps.ts | 28 ++ .../postPage/IPostPageComponentState.ts | 4 + .../components/postPage/PostPageComponent.tsx | 65 ++- src/components/postPage/index.ts | 2 + .../postWrite/IPostWriteComponentProps.ts | 95 ++++ .../postWrite/IPostWriteComponentState.ts | 33 ++ .../postWrite/PostWriteComponent.tsx | 206 ++++----- src/components/postWrite/index.ts | 2 + .../profile/IProfileComponentProps.ts | 82 ++++ .../profile/IProfileComponentState.ts | 4 + .../components/profile/ProfileComponent.tsx | 64 +-- src/components/profile/index.ts | 2 + .../IProfileHeaderComponentProps.ts | 65 +++ .../IProfileHeaderComponentState.ts | 11 + .../profileHeader/ProfileHeaderComponent.tsx | 210 +++++---- src/components/profileHeader/index.ts | 2 + .../setting/ISettingComponentProps.ts | 16 + .../setting/ISettingComponentState.ts | 35 ++ .../components/setting/SettingComponent.tsx | 92 ++-- src/components/setting/index.ts | 2 + .../sidebar/ISidebarComponentProps.ts | 24 + .../sidebar/ISidebarComponentState.ts | 23 + .../components/sidebar/SidebarComponent.tsx | 142 +++--- src/components/sidebar/index.ts | 2 + .../ISidebarContentComponentProps.ts | 33 ++ .../ISidebarContentComponentState.ts | 4 + .../SidebarContentComponent.tsx | 54 +++ src/components/sidebarContent/index.ts | 2 + .../sidebarMain/ISidebarMainComponentProps.ts | 10 + .../sidebarMain/ISidebarMainComponentState.ts | 4 + .../sidebarMain/SidebarMainComponent.tsx | 38 ++ src/components/sidebarMain/index.ts | 2 + .../signup/ISignupComponentProps.ts | 23 + .../signup/ISignupComponentState.ts | 75 +++ src/components/signup/SignupComponent.tsx | 284 ++++++++++++ src/components/signup/index.ts | 2 + .../stream/IStreamComponentProps.ts | 77 ++++ .../stream/IStreamComponentState.ts | 43 ++ .../components/stream/StreamComponent.tsx | 148 +++--- src/components/stream/index.ts | 2 + .../userAvatar/IUserAvatarComponentProps.ts | 23 + .../userAvatar/IUserAvatarComponentState.ts | 4 + .../userAvatar/UserAvatarComponent.tsx | 28 +- src/components/userAvatar/index.ts | 2 + .../userBox/IUserBoxComponentProps.ts | 98 ++++ .../userBox/IUserBoxComponentState.ts | 35 ++ src/components/userBox/UserBoxComponent.tsx | 299 ++++++++++++ src/components/userBox/index.ts | 2 + .../userBoxList/IUserBoxListComponentProps.ts | 21 + .../userBoxList/IUserBoxListComponentState.ts | 4 + .../userBoxList/UserBoxListComponent.tsx | 76 ++-- src/components/userBoxList/index.ts | 2 + .../yourCircles/IYourCirclesComponentProps.ts | 20 + .../yourCircles/IYourCirclesComponentState.ts | 4 + .../yourCircles/YourCirclesComponent.tsx | 40 +- src/components/yourCircles/index.ts | 2 + {app => src}/constants/actionTypes.jsx | 0 {app => src}/constants/authorizeActionType.ts | 0 {app => src}/constants/circleActionType.ts | 0 {app => src}/constants/commentActionType.ts | 0 {app => src}/constants/globalActionType.ts | 1 + .../constants/imageGalleryActionType.ts | 0 .../constants/notificationActionType.ts | 0 {app => src}/constants/postActionType.ts | 0 {app => src}/constants/userActionType.ts | 0 {app => src}/constants/voteActionType.ts | 0 {app => src/core}/domain/authorize/index.ts | 0 .../core}/domain/authorize/loginResult.ts | 2 +- .../domain/authorize/registerUserResult.ts | 2 +- {app => src/core}/domain/circles/circle.ts | 28 +- {app => src/core}/domain/circles/index.ts | 0 .../core}/domain/circles/userFollower.ts | 29 +- {app => src/core}/domain/comments/comment.ts | 23 +- {app => src/core}/domain/comments/index.ts | 0 {app => src/core}/domain/common/baseDomain.ts | 0 {app => src/core}/domain/common/index.ts | 0 .../core}/domain/common/socialError.ts | 0 .../core}/domain/imageGallery/image.ts | 2 +- .../core}/domain/imageGallery/index.ts | 0 .../core}/domain/notifications/index.ts | 0 .../domain/notifications/notification.ts | 4 +- {app => src/core}/domain/posts/index.ts | 0 {app => src/core}/domain/posts/post.ts | 83 ++-- {app => src/core}/domain/users/index.ts | 0 {app => src/core}/domain/users/profile.ts | 28 +- {app => src/core}/domain/users/user.ts | 2 +- {app => src/core}/domain/votes/index.ts | 0 {app => src/core}/domain/votes/vote.ts | 2 +- src/core/environment.ts | 3 + .../core}/factories/IServiceProvider.ts | 2 +- {app => src/core}/factories/index.ts | 0 {app => src/core}/factories/serviceProvide.ts | 24 +- .../services/authorize/IAuthorizeService.ts | 4 +- {app => src/core}/services/authorize/index.ts | 0 .../core}/services/circles/ICircleService.ts | 4 +- {app => src/core}/services/circles/index.ts | 0 .../services/comments/ICommentService.ts | 6 +- {app => src/core}/services/comments/index.ts | 0 .../core}/services/common/ICommonService.ts | 2 +- {app => src/core}/services/common/index.ts | 0 .../imageGallery/IImageGalleryService.ts | 4 +- .../core}/services/imageGallery/index.ts | 0 src/core/services/index.ts | 21 + .../notifications/INotificationService.ts | 6 +- .../core}/services/notifications/index.ts | 0 .../core}/services/posts/IPostService.ts | 4 +- {app => src/core}/services/posts/index.ts | 0 .../core}/services/users/IUserService.ts | 2 +- {app => src/core}/services/users/index.ts | 0 .../core}/services/votes/IVoteService.ts | 4 +- {app => src/core}/services/votes/index.ts | 0 {app => src/data}/firebaseClient/index.ts | 0 .../services/authorize/AuthorizeService.ts | 10 +- .../services/authorize/index.ts | 0 .../services/circles/CircleService.ts | 10 +- .../firebaseClient/services/circles/index.ts | 0 .../services/comments/CommentService.ts | 22 +- .../firebaseClient/services/comments/index.ts | 0 .../services/common/CommonService.ts | 11 +- .../firebaseClient/services/common/index.ts | 0 .../imageGallery/ImageGalleryService.ts | 12 +- .../services/imageGallery/index.ts | 0 .../data}/firebaseClient/services/index.ts | 0 .../services/notifications/index.ts | 0 .../notifications/notificationService.ts | 69 +++ .../services/posts/PostService.ts | 8 +- .../firebaseClient/services/posts/index.ts | 0 .../services/users/UserService.ts | 8 +- .../firebaseClient/services/users/index.ts | 0 .../services/votes/VoteService.ts | 8 +- .../firebaseClient/services/votes/index.ts | 0 app/app.tsx => src/index.tsx | 2 +- .../dialogTitle/DialogTitleComponent.tsx | 47 +- .../dialogTitle/IDialogTitleComponentProps.ts | 40 ++ .../dialogTitle/IDialogTitleComponentState.ts | 3 + src/layouts/dialogTitle/index.ts | 2 + .../IconButtonElementComponent.tsx | 32 +- src/layouts/iconButtonElement/index.ts | 2 + src/models/users/index.ts | 1 + src/models/users/userRegisterModel.ts | 35 ++ .../reducers/authorize/AuthorizeState.ts | 0 .../reducers/authorize/IAuthorizeAction.ts | 0 .../reducers/authorize/authorizeReducer.ts | 34 +- {app => src}/reducers/authorize/index.ts | 0 {app => src}/reducers/circles/CircleState.ts | 2 +- .../reducers/circles/ICircleAction.ts | 0 .../reducers/circles/circleReducer.ts | 4 +- {app => src}/reducers/circles/index.ts | 0 .../reducers/comments/CommentState.ts | 2 +- .../reducers/comments/ICommentAction.ts | 0 .../reducers/comments/commentReducer.ts | 4 +- {app => src}/reducers/comments/index.ts | 0 src/reducers/global/GlobalState.ts | 107 +++++ {app => src}/reducers/global/IGlobalAction.ts | 10 +- {app => src}/reducers/global/globalReducer.ts | 13 +- {app => src}/reducers/global/index.ts | 0 .../imageGallery/IImageGalleryAction.ts | 0 .../imageGallery/ImageGalleryState.ts | 2 +- .../imageGallery/imageGalleryReducer.ts | 26 +- {app => src}/reducers/imageGallery/index.ts | 0 {app => src}/reducers/index.ts | 0 .../notifications/INotificationAction.ts | 0 .../notifications/NotificationState.ts | 2 +- {app => src}/reducers/notifications/index.ts | 0 .../notifications/notificationReducer.ts | 2 +- {app => src}/reducers/posts/IPostAction.ts | 0 {app => src}/reducers/posts/PostState.ts | 0 {app => src}/reducers/posts/index.ts | 0 {app => src}/reducers/posts/postReducer.ts | 0 {app => src}/reducers/users/IUserAction.ts | 0 {app => src}/reducers/users/UserState.ts | 2 +- {app => src}/reducers/users/index.ts | 0 {app => src}/reducers/users/userReducer.ts | 2 +- {app => src}/reducers/votes/IVoteAction.ts | 0 {app => src}/reducers/votes/VoteState.ts | 2 +- {app => src}/reducers/votes/index.ts | 0 {app => src}/reducers/votes/voteReducer.ts | 2 +- {app => src}/store/configureStore.ts | 16 +- {app => src}/styles/app.scss | 0 {app => src}/styles/base/_animate.scss | 0 {app => src}/styles/base/_grid.scss | 0 {app => src}/styles/base/_variables.scss | 0 {app => src}/styles/components/_blog.scss | 0 {app => src}/styles/components/_comment.scss | 0 {app => src}/styles/components/_global.scss | 0 {app => src}/styles/components/_home.scss | 0 .../styles/components/_homeHeader.scss | 0 .../styles/components/_imageGallery.scss | 0 {app => src}/styles/components/_login.scss | 0 {app => src}/styles/components/_master.scss | 0 .../styles/components/_masterLoading.scss | 0 {app => src}/styles/components/_people.scss | 0 {app => src}/styles/components/_post.scss | 0 .../styles/components/_postWrite.scss | 0 {app => src}/styles/components/_profile.scss | 6 + {app => src}/styles/components/_settings.scss | 0 {app => src}/styles/components/_sidebar.scss | 0 {app => src}/styles/components/_signup.scss | 0 .../tests/actions/authorizeActions.test.jsx | 2 +- {app => src}/tests/app.test.jsx | 0 {app => src}/tests/components/Blog.test.jsx | 6 +- {app => src}/tests/components/Circle.test.jsx | 6 +- .../tests/components/Comment.test.jsx | 0 .../tests/components/CommnetGroup.test.jsx | 0 {app => src}/tests/components/CommnetList.jsx | 0 .../tests/components/EditProfile.test.jsx | 0 .../tests/components/FindPeople.test.jsx | 0 .../tests/components/Followers.test.jsx | 0 .../tests/components/Following.test.jsx | 0 {app => src}/tests/components/Home.test.jsx | 0 .../tests/components/HomeHeader.test.jsx | 0 .../tests/components/ImageGallery.test.jsx | 0 {app => src}/tests/components/Img.test.jsx | 0 .../tests/components/ImgCover.test.jsx | 0 {app => src}/tests/components/Login.test.jsx | 0 {app => src}/tests/components/Master.test.jsx | 0 .../tests/components/NotifyItem.test.jsx | 0 {app => src}/tests/components/Post.test.jsx | 0 .../tests/components/PostWrite.test.jsx | 0 .../tests/components/Settings.test.jsx | 0 .../tests/components/Sidebar.test.jsx | 0 {app => src}/tests/components/Signup.test.jsx | 0 .../tests/components/UserBox.test.jsx | 0 .../tests/components/UserBoxList.test.jsx | 0 .../tests/components/YourCircles.test.jsx | 0 .../tests/reducers/authorizeReducer.test.jsx | 0 src/typings/react-linkif.d.ts | 1 + src/typings/react-parallax.ts | 1 + src/typings/react-string-replace.d.ts | 1 + tsconfig.json | 16 +- webpack.config.js | 45 +- 346 files changed, 6045 insertions(+), 3946 deletions(-) delete mode 100644 app/api/CircleAPI.jsx delete mode 100644 app/api/FileAPI.jsx delete mode 100644 app/api/PostAPI.jsx delete mode 100644 app/api/StringAPI.jsx delete mode 100644 app/components/Circle.jsx delete mode 100644 app/components/CommentWrite.jsx delete mode 100644 app/components/ImageGallery.jsx delete mode 100644 app/components/Master/index.ts delete mode 100644 app/components/MasterLoading.jsx delete mode 100644 app/components/SidebarContent.jsx delete mode 100644 app/components/SidebarMain.jsx delete mode 100644 app/components/Signup.jsx delete mode 100644 app/components/UserBox.jsx delete mode 100644 app/components/pattern delete mode 100644 app/firebaseClient/services/notifications/notificationService.ts delete mode 100644 app/layouts/IconMenuElement.jsx delete mode 100644 app/reducers/global/GlobalState.ts delete mode 100644 app/tests/components/CommentWrite.test.jsx delete mode 100644 playground/moment-examples.js rename {app => src}/actions/authorizeActions.ts (82%) rename {app => src}/actions/circleActions.ts (96%) rename {app => src}/actions/commentActions.ts (87%) rename {app => src}/actions/globalActions.ts (94%) rename {app => src}/actions/imageGalleryActions.ts (95%) rename {app => src}/actions/index.ts (100%) rename {app => src}/actions/notifyActions.ts (84%) rename {app => src}/actions/postActions.ts (93%) rename {app => src}/actions/userActions.ts (90%) rename {app => src}/actions/voteActions.ts (95%) create mode 100644 src/api/CircleAPI.ts create mode 100644 src/api/FileAPI.ts create mode 100644 src/api/PostAPI.ts create mode 100644 src/api/StringAPI.ts create mode 100644 src/components/circle/CircleComponent.tsx create mode 100644 src/components/circle/ICircleComponentProps.ts create mode 100644 src/components/circle/ICircleComponentState.ts create mode 100644 src/components/circle/index.ts rename app/components/Comment.jsx => src/components/comment/CommentComponent.tsx (57%) create mode 100644 src/components/comment/ICommentComponentProps.ts create mode 100644 src/components/comment/ICommentComponentState.ts create mode 100644 src/components/comment/index.ts rename app/components/CommentGroup.jsx => src/components/commentGroup/CommentGroupComponent.tsx (57%) create mode 100644 src/components/commentGroup/ICommentGroupComponentProps.ts create mode 100644 src/components/commentGroup/ICommentGroupComponentState.ts create mode 100644 src/components/commentGroup/index.ts rename app/components/CommentList.jsx => src/components/commentList/CommentListComponent.tsx (66%) create mode 100644 src/components/commentList/ICommentListComponentProps.ts create mode 100644 src/components/commentList/ICommentListComponentState.ts create mode 100644 src/components/commentList/index.ts rename app/components/EditProfile.jsx => src/components/editProfile/EditProfileComponent.tsx (50%) create mode 100644 src/components/editProfile/IEditProfileComponentProps.ts create mode 100644 src/components/editProfile/IEditProfileComponentState.ts create mode 100644 src/components/editProfile/index.ts rename app/components/FindPeople.jsx => src/components/findPeople/FindPeopleComponent.tsx (55%) create mode 100644 src/components/findPeople/IFindPeopleComponentProps.ts create mode 100644 src/components/findPeople/IFindPeopleComponentState.ts create mode 100644 src/components/findPeople/index.ts rename app/components/Followers.jsx => src/components/followers/FollowersComponent.tsx (56%) create mode 100644 src/components/followers/IFollowersComponentProps.ts create mode 100644 src/components/followers/IFollowersComponentState.ts create mode 100644 src/components/followers/index.ts rename app/components/Following.jsx => src/components/following/FollowingComponent.tsx (64%) create mode 100644 src/components/following/IFollowingComponentProps.ts create mode 100644 src/components/following/IFollowingComponentState.ts create mode 100644 src/components/following/index.ts rename app/components/Home.jsx => src/components/home/HomeComponent.tsx (57%) create mode 100644 src/components/home/IHomeComponentProps.ts create mode 100644 src/components/home/IHomeComponentState.ts create mode 100644 src/components/home/index.ts rename app/components/HomeHeader.jsx => src/components/homeHeader/HomeHeaderComponent.tsx (62%) create mode 100644 src/components/homeHeader/IHomeHeaderComponentProps.ts create mode 100644 src/components/homeHeader/IHomeHeaderComponentState.ts create mode 100644 src/components/homeHeader/index.ts create mode 100644 src/components/imageGallery/IImageGalleryComponentProps.ts create mode 100644 src/components/imageGallery/IImageGalleryComponentState.ts create mode 100644 src/components/imageGallery/ImageGalleryComponent.tsx create mode 100644 src/components/imageGallery/index.ts create mode 100644 src/components/img/IImgComponentProps.ts create mode 100644 src/components/img/IImgComponentState.ts rename app/components/Img.jsx => src/components/img/ImgComponent.tsx (58%) create mode 100644 src/components/img/index.ts create mode 100644 src/components/imgCover/IImgCoverComponentProps.ts create mode 100644 src/components/imgCover/IImgCoverComponentState.ts rename app/components/ImgCover.jsx => src/components/imgCover/ImgCoverComponent.tsx (58%) create mode 100644 src/components/imgCover/index.ts create mode 100644 src/components/login/ILoginComponentProps.ts create mode 100644 src/components/login/ILoginComponentState.ts rename app/components/Login.jsx => src/components/login/LoginComponent.tsx (66%) create mode 100644 src/components/login/index.ts rename app/components/Master/IMasterProps.ts => src/components/master/IMasterComponentProps.ts (97%) rename app/components/Master/IMasterState.ts => src/components/master/IMasterComponentState.ts (64%) rename app/components/Master/Master.tsx => src/components/master/MasterComponent.tsx (86%) create mode 100644 src/components/master/index.ts create mode 100644 src/components/masterLoading/IMasterLoadingComponentProps.ts create mode 100644 src/components/masterLoading/IMasterLoadingComponentState.ts create mode 100644 src/components/masterLoading/MasterLoadingComponent.tsx create mode 100644 src/components/masterLoading/index.ts create mode 100644 src/components/notify/INotifyComponentProps.ts create mode 100644 src/components/notify/INotifyComponentState.ts rename app/components/Notify.jsx => src/components/notify/NotifyComponent.tsx (68%) create mode 100644 src/components/notify/index.ts create mode 100644 src/components/notifyItem/INotifyItemComponentProps.ts create mode 100644 src/components/notifyItem/INotifyItemComponentState.ts rename app/components/NotifyItem.jsx => src/components/notifyItem/NotifyItemComponent.tsx (61%) create mode 100644 src/components/notifyItem/index.ts create mode 100644 src/components/people/IPeopleComponentProps.ts create mode 100644 src/components/people/IPeopleComponentState.ts rename app/components/People.jsx => src/components/people/PeopleComponent.tsx (57%) create mode 100644 src/components/people/index.ts create mode 100644 src/components/post/IPostComponentProps.ts create mode 100644 src/components/post/IPostComponentState.ts rename app/components/Post.jsx => src/components/post/PostComponent.tsx (63%) create mode 100644 src/components/post/index.ts create mode 100644 src/components/postPage/IPostPageComponentProps.ts create mode 100644 src/components/postPage/IPostPageComponentState.ts rename app/components/PostPage.jsx => src/components/postPage/PostPageComponent.tsx (55%) create mode 100644 src/components/postPage/index.ts create mode 100644 src/components/postWrite/IPostWriteComponentProps.ts create mode 100644 src/components/postWrite/IPostWriteComponentState.ts rename app/components/PostWrite.jsx => src/components/postWrite/PostWriteComponent.tsx (65%) create mode 100644 src/components/postWrite/index.ts create mode 100644 src/components/profile/IProfileComponentProps.ts create mode 100644 src/components/profile/IProfileComponentState.ts rename app/components/Profile.jsx => src/components/profile/ProfileComponent.tsx (69%) create mode 100644 src/components/profile/index.ts create mode 100644 src/components/profileHeader/IProfileHeaderComponentProps.ts create mode 100644 src/components/profileHeader/IProfileHeaderComponentState.ts rename app/components/ProfileHead.jsx => src/components/profileHeader/ProfileHeaderComponent.tsx (56%) create mode 100644 src/components/profileHeader/index.ts create mode 100644 src/components/setting/ISettingComponentProps.ts create mode 100644 src/components/setting/ISettingComponentState.ts rename app/components/Settings.jsx => src/components/setting/SettingComponent.tsx (66%) create mode 100644 src/components/setting/index.ts create mode 100644 src/components/sidebar/ISidebarComponentProps.ts create mode 100644 src/components/sidebar/ISidebarComponentState.ts rename app/components/Sidebar.jsx => src/components/sidebar/SidebarComponent.tsx (62%) create mode 100644 src/components/sidebar/index.ts create mode 100644 src/components/sidebarContent/ISidebarContentComponentProps.ts create mode 100644 src/components/sidebarContent/ISidebarContentComponentState.ts create mode 100644 src/components/sidebarContent/SidebarContentComponent.tsx create mode 100644 src/components/sidebarContent/index.ts create mode 100644 src/components/sidebarMain/ISidebarMainComponentProps.ts create mode 100644 src/components/sidebarMain/ISidebarMainComponentState.ts create mode 100644 src/components/sidebarMain/SidebarMainComponent.tsx create mode 100644 src/components/sidebarMain/index.ts create mode 100644 src/components/signup/ISignupComponentProps.ts create mode 100644 src/components/signup/ISignupComponentState.ts create mode 100644 src/components/signup/SignupComponent.tsx create mode 100644 src/components/signup/index.ts create mode 100644 src/components/stream/IStreamComponentProps.ts create mode 100644 src/components/stream/IStreamComponentState.ts rename app/components/Blog.jsx => src/components/stream/StreamComponent.tsx (62%) create mode 100644 src/components/stream/index.ts create mode 100644 src/components/userAvatar/IUserAvatarComponentProps.ts create mode 100644 src/components/userAvatar/IUserAvatarComponentState.ts rename app/components/UserAvatar.jsx => src/components/userAvatar/UserAvatarComponent.tsx (76%) create mode 100644 src/components/userAvatar/index.ts create mode 100644 src/components/userBox/IUserBoxComponentProps.ts create mode 100644 src/components/userBox/IUserBoxComponentState.ts create mode 100644 src/components/userBox/UserBoxComponent.tsx create mode 100644 src/components/userBox/index.ts create mode 100644 src/components/userBoxList/IUserBoxListComponentProps.ts create mode 100644 src/components/userBoxList/IUserBoxListComponentState.ts rename app/components/UserBoxList.jsx => src/components/userBoxList/UserBoxListComponent.tsx (53%) create mode 100644 src/components/userBoxList/index.ts create mode 100644 src/components/yourCircles/IYourCirclesComponentProps.ts create mode 100644 src/components/yourCircles/IYourCirclesComponentState.ts rename app/components/YourCircles.jsx => src/components/yourCircles/YourCirclesComponent.tsx (65%) create mode 100644 src/components/yourCircles/index.ts rename {app => src}/constants/actionTypes.jsx (100%) rename {app => src}/constants/authorizeActionType.ts (100%) rename {app => src}/constants/circleActionType.ts (100%) rename {app => src}/constants/commentActionType.ts (100%) rename {app => src}/constants/globalActionType.ts (96%) rename {app => src}/constants/imageGalleryActionType.ts (100%) rename {app => src}/constants/notificationActionType.ts (100%) rename {app => src}/constants/postActionType.ts (100%) rename {app => src}/constants/userActionType.ts (100%) rename {app => src}/constants/voteActionType.ts (100%) rename {app => src/core}/domain/authorize/index.ts (100%) rename {app => src/core}/domain/authorize/loginResult.ts (87%) rename {app => src/core}/domain/authorize/registerUserResult.ts (87%) rename {app => src/core}/domain/circles/circle.ts (62%) rename {app => src/core}/domain/circles/index.ts (100%) rename {app => src/core}/domain/circles/userFollower.ts (61%) rename {app => src/core}/domain/comments/comment.ts (64%) rename {app => src/core}/domain/comments/index.ts (100%) rename {app => src/core}/domain/common/baseDomain.ts (100%) rename {app => src/core}/domain/common/index.ts (100%) rename {app => src/core}/domain/common/socialError.ts (100%) rename {app => src/core}/domain/imageGallery/image.ts (95%) rename {app => src/core}/domain/imageGallery/index.ts (100%) rename {app => src/core}/domain/notifications/index.ts (100%) rename {app => src/core}/domain/notifications/notification.ts (91%) rename {app => src/core}/domain/posts/index.ts (100%) rename {app => src/core}/domain/posts/post.ts (70%) rename {app => src/core}/domain/users/index.ts (100%) rename {app => src/core}/domain/users/profile.ts (68%) rename {app => src/core}/domain/users/user.ts (94%) rename {app => src/core}/domain/votes/index.ts (100%) rename {app => src/core}/domain/votes/vote.ts (93%) create mode 100644 src/core/environment.ts rename {app => src/core}/factories/IServiceProvider.ts (96%) rename {app => src/core}/factories/index.ts (100%) rename {app => src/core}/factories/serviceProvide.ts (78%) rename {app => src/core}/services/authorize/IAuthorizeService.ts (85%) rename {app => src/core}/services/authorize/index.ts (100%) rename {app => src/core}/services/circles/ICircleService.ts (86%) rename {app => src/core}/services/circles/index.ts (100%) rename {app => src/core}/services/comments/ICommentService.ts (62%) rename {app => src/core}/services/comments/index.ts (100%) rename {app => src/core}/services/common/ICommonService.ts (74%) rename {app => src/core}/services/common/index.ts (100%) rename {app => src/core}/services/imageGallery/IImageGalleryService.ts (83%) rename {app => src/core}/services/imageGallery/index.ts (100%) create mode 100644 src/core/services/index.ts rename {app => src/core}/services/notifications/INotificationService.ts (63%) rename {app => src/core}/services/notifications/index.ts (100%) rename {app => src/core}/services/posts/IPostService.ts (84%) rename {app => src/core}/services/posts/index.ts (100%) rename {app => src/core}/services/users/IUserService.ts (86%) rename {app => src/core}/services/users/index.ts (100%) rename {app => src/core}/services/votes/IVoteService.ts (77%) rename {app => src/core}/services/votes/index.ts (100%) rename {app => src/data}/firebaseClient/index.ts (100%) rename {app => src/data}/firebaseClient/services/authorize/AuthorizeService.ts (91%) rename {app => src/data}/firebaseClient/services/authorize/index.ts (100%) rename {app => src/data}/firebaseClient/services/circles/CircleService.ts (93%) rename {app => src/data}/firebaseClient/services/circles/index.ts (100%) rename {app => src/data}/firebaseClient/services/comments/CommentService.ts (70%) rename {app => src/data}/firebaseClient/services/comments/index.ts (100%) rename {app => src/data}/firebaseClient/services/common/CommonService.ts (52%) rename {app => src/data}/firebaseClient/services/common/index.ts (100%) rename {app => src/data}/firebaseClient/services/imageGallery/ImageGalleryService.ts (89%) rename {app => src/data}/firebaseClient/services/imageGallery/index.ts (100%) rename {app => src/data}/firebaseClient/services/index.ts (100%) rename {app => src/data}/firebaseClient/services/notifications/index.ts (100%) create mode 100644 src/data/firebaseClient/services/notifications/notificationService.ts rename {app => src/data}/firebaseClient/services/posts/PostService.ts (93%) rename {app => src/data}/firebaseClient/services/posts/index.ts (100%) rename {app => src/data}/firebaseClient/services/users/UserService.ts (91%) rename {app => src/data}/firebaseClient/services/users/index.ts (100%) rename {app => src/data}/firebaseClient/services/votes/VoteService.ts (87%) rename {app => src/data}/firebaseClient/services/votes/index.ts (100%) rename app/app.tsx => src/index.tsx (97%) rename app/layouts/DialogTitle.jsx => src/layouts/dialogTitle/DialogTitleComponent.tsx (71%) create mode 100644 src/layouts/dialogTitle/IDialogTitleComponentProps.ts create mode 100644 src/layouts/dialogTitle/IDialogTitleComponentState.ts create mode 100644 src/layouts/dialogTitle/index.ts rename app/layouts/IconButtonElement.jsx => src/layouts/iconButtonElement/IconButtonElementComponent.tsx (64%) create mode 100644 src/layouts/iconButtonElement/index.ts create mode 100644 src/models/users/index.ts create mode 100644 src/models/users/userRegisterModel.ts rename {app => src}/reducers/authorize/AuthorizeState.ts (100%) rename {app => src}/reducers/authorize/IAuthorizeAction.ts (100%) rename {app => src}/reducers/authorize/authorizeReducer.ts (55%) rename {app => src}/reducers/authorize/index.ts (100%) rename {app => src}/reducers/circles/CircleState.ts (91%) rename {app => src}/reducers/circles/ICircleAction.ts (100%) rename {app => src}/reducers/circles/circleReducer.ts (97%) rename {app => src}/reducers/circles/index.ts (100%) rename {app => src}/reducers/comments/CommentState.ts (91%) rename {app => src}/reducers/comments/ICommentAction.ts (100%) rename {app => src}/reducers/comments/commentReducer.ts (97%) rename {app => src}/reducers/comments/index.ts (100%) create mode 100644 src/reducers/global/GlobalState.ts rename {app => src}/reducers/global/IGlobalAction.ts (75%) rename {app => src}/reducers/global/globalReducer.ts (94%) rename {app => src}/reducers/global/index.ts (100%) rename {app => src}/reducers/imageGallery/IImageGalleryAction.ts (100%) rename {app => src}/reducers/imageGallery/ImageGalleryState.ts (96%) rename {app => src}/reducers/imageGallery/imageGalleryReducer.ts (77%) rename {app => src}/reducers/imageGallery/index.ts (100%) rename {app => src}/reducers/index.ts (100%) rename {app => src}/reducers/notifications/INotificationAction.ts (100%) rename {app => src}/reducers/notifications/NotificationState.ts (90%) rename {app => src}/reducers/notifications/index.ts (100%) rename {app => src}/reducers/notifications/notificationReducer.ts (96%) rename {app => src}/reducers/posts/IPostAction.ts (100%) rename {app => src}/reducers/posts/PostState.ts (100%) rename {app => src}/reducers/posts/index.ts (100%) rename {app => src}/reducers/posts/postReducer.ts (100%) rename {app => src}/reducers/users/IUserAction.ts (100%) rename {app => src}/reducers/users/UserState.ts (92%) rename {app => src}/reducers/users/index.ts (100%) rename {app => src}/reducers/users/userReducer.ts (96%) rename {app => src}/reducers/votes/IVoteAction.ts (100%) rename {app => src}/reducers/votes/VoteState.ts (92%) rename {app => src}/reducers/votes/index.ts (100%) rename {app => src}/reducers/votes/voteReducer.ts (97%) rename {app => src}/store/configureStore.ts (79%) rename {app => src}/styles/app.scss (100%) rename {app => src}/styles/base/_animate.scss (100%) rename {app => src}/styles/base/_grid.scss (100%) rename {app => src}/styles/base/_variables.scss (100%) rename {app => src}/styles/components/_blog.scss (100%) rename {app => src}/styles/components/_comment.scss (100%) rename {app => src}/styles/components/_global.scss (100%) rename {app => src}/styles/components/_home.scss (100%) rename {app => src}/styles/components/_homeHeader.scss (100%) rename {app => src}/styles/components/_imageGallery.scss (100%) rename {app => src}/styles/components/_login.scss (100%) rename {app => src}/styles/components/_master.scss (100%) rename {app => src}/styles/components/_masterLoading.scss (100%) rename {app => src}/styles/components/_people.scss (100%) rename {app => src}/styles/components/_post.scss (100%) rename {app => src}/styles/components/_postWrite.scss (100%) rename {app => src}/styles/components/_profile.scss (94%) rename {app => src}/styles/components/_settings.scss (100%) rename {app => src}/styles/components/_sidebar.scss (100%) rename {app => src}/styles/components/_signup.scss (100%) rename {app => src}/tests/actions/authorizeActions.test.jsx (92%) rename {app => src}/tests/app.test.jsx (100%) rename {app => src}/tests/components/Blog.test.jsx (62%) rename {app => src}/tests/components/Circle.test.jsx (62%) rename {app => src}/tests/components/Comment.test.jsx (100%) rename {app => src}/tests/components/CommnetGroup.test.jsx (100%) rename {app => src}/tests/components/CommnetList.jsx (100%) rename {app => src}/tests/components/EditProfile.test.jsx (100%) rename {app => src}/tests/components/FindPeople.test.jsx (100%) rename {app => src}/tests/components/Followers.test.jsx (100%) rename {app => src}/tests/components/Following.test.jsx (100%) rename {app => src}/tests/components/Home.test.jsx (100%) rename {app => src}/tests/components/HomeHeader.test.jsx (100%) rename {app => src}/tests/components/ImageGallery.test.jsx (100%) rename {app => src}/tests/components/Img.test.jsx (100%) rename {app => src}/tests/components/ImgCover.test.jsx (100%) rename {app => src}/tests/components/Login.test.jsx (100%) rename {app => src}/tests/components/Master.test.jsx (100%) rename {app => src}/tests/components/NotifyItem.test.jsx (100%) rename {app => src}/tests/components/Post.test.jsx (100%) rename {app => src}/tests/components/PostWrite.test.jsx (100%) rename {app => src}/tests/components/Settings.test.jsx (100%) rename {app => src}/tests/components/Sidebar.test.jsx (100%) rename {app => src}/tests/components/Signup.test.jsx (100%) rename {app => src}/tests/components/UserBox.test.jsx (100%) rename {app => src}/tests/components/UserBoxList.test.jsx (100%) rename {app => src}/tests/components/YourCircles.test.jsx (100%) rename {app => src}/tests/reducers/authorizeReducer.test.jsx (100%) create mode 100644 src/typings/react-linkif.d.ts create mode 100644 src/typings/react-parallax.ts create mode 100644 src/typings/react-string-replace.d.ts diff --git a/.gitignore b/.gitignore index 93e04a4..d694596 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ node_modules/ public/bundle.js config/ -.vscode/ \ No newline at end of file +.vscode/ +src/data/awsClient +src/components/AWS.tsx \ No newline at end of file diff --git a/app/api/CircleAPI.jsx b/app/api/CircleAPI.jsx deleted file mode 100644 index 2611d52..0000000 --- a/app/api/CircleAPI.jsx +++ /dev/null @@ -1,51 +0,0 @@ - - - -/** - * Get the circles which the specify users is in that circle - * @param {object} circles - * @param {string} followingId - */ -export const getUserBelongCircles = (circles,followingId) => { - let userBelongCircles = [] - Object.keys(circles).forEach((cid) => { - if(cid.trim() !== '-Followers' && circles[cid].users){ - let isExist = Object.keys(circles[cid].users).indexOf(followingId) > -1 - if(isExist){ - userBelongCircles.push(cid) - } - } - }) - return userBelongCircles -} - - -/** - * Get the following users - * @param {object} circles - */ -export const getFollowingUsers = (circles) => { - let followingUsers = {} - Object.keys(circles).forEach((cid) => { - if(cid.trim() !== '-Followers' && circles[cid].users){ - Object.keys(circles[cid].users).forEach((userId)=>{ - let isExist = Object.keys(followingUsers).indexOf(userId) > -1 - if(!isExist){ - followingUsers[userId] = { - ...circles[cid].users[userId] - } - } - }) - - } - }) - return followingUsers -} - - - - -export default { - getUserBelongCircles, - getFollowingUsers -} \ No newline at end of file diff --git a/app/api/FileAPI.jsx b/app/api/FileAPI.jsx deleted file mode 100644 index f1e8d0e..0000000 --- a/app/api/FileAPI.jsx +++ /dev/null @@ -1,144 +0,0 @@ -// - Import react component -import { storageRef } from 'app/firebaseClient/' - -//- Import actions - -// - Get file Extension -const getExtension = (fileName) => { - let re = /(?:\.([^.]+))?$/ - return re.exec(fileName)[1] -} - -// Converts image to canvas returns new canvas element -const convertImageToCanvas = (image) => { - let canvas = document.createElement('canvas') - canvas.width = image.width - canvas.height = image.height - canvas.getContext('2d').drawImage(image, 0, 0) - - return canvas -} - -/** - * Upload image on the server - * @param {file} file - * @param {string} fileName - */ -const uploadImage = (file, fileName, progress) => { - - return new Promise((resolve, reject) => { - // Create a storage refrence - let storegeFile = storageRef.child(`images/${fileName}`) - - // Upload file - let task = storegeFile.put(file) - task.then((result) => { - resolve(result) - }).catch((error) => { - reject(error) - }) - - // Upload storage bar - task.on('state_changed', (snapshot) => { - let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100 - progress(percentage, true) - }, (error) => { - console.log('========== Upload Image ============') - console.log(error) - console.log('====================================') - - }, (complete) => { - progress(100, false) - }) - }) - - } - -/** - * Constraint image size - * @param {file} file - * @param {number} maxWidth - * @param {number} maxHeight - */ -const constraintImage = (file,fileName, maxWidth, maxHeight) => { - // Ensure it's an image - if(file.type.match(/image.*/)) { - - // Load the image - let reader = new FileReader() - reader.onload = function (readerEvent) { - let image = new Image() - image.onload = function (imageEvent) { - - // Resize the image - let canvas = document.createElement('canvas'), - max_size = 986,// TODO : pull max size from a site config - width = image.width, - height = image.height - if (width > height) { - if (width > max_size) { - height *= max_size / width - width = max_size - } - } else { - if (height > max_size) { - width *= max_size / height - height = max_size - } - } - canvas.width = width - canvas.height = height - canvas.getContext('2d').drawImage(image, 0, 0, width, height) - let dataUrl = canvas.toDataURL() - let resizedImage = dataURLToBlob(dataUrl) - let evt = new CustomEvent('onSendResizedImage', { detail: {resizedImage,fileName} }) - window.dispatchEvent(evt) - - - } - image.src = readerEvent.target.result - } - reader.readAsDataURL(file) - } -} - - -/** - * Convert data URL to blob - * @param {object} dataURL - */ -const dataURLToBlob = (dataURL) => { - - let BASE64_MARKER = 'base64,' - if (dataURL.indexOf(BASE64_MARKER) == -1) { - let parts = dataURL.split(',') - let contentType = parts[0].split(':')[1] - let raw = parts[1] - - return new Blob([raw], {type: contentType}) - } - - let parts = dataURL.split(BASE64_MARKER) - let contentType = parts[0].split(':')[1] - let raw = window.atob(parts[1]) - let rawLength = raw.length - - let uInt8Array = new Uint8Array(rawLength) - - for (let i = 0 ;i < rawLength; ++i) { - uInt8Array[i] = raw.charCodeAt(i) - } - - return new Blob([uInt8Array], {type: contentType}) -} - - - -export default { - dataURLToBlob, - convertImageToCanvas, - getExtension, - constraintImage, - uploadImage - -} \ No newline at end of file diff --git a/app/api/PostAPI.jsx b/app/api/PostAPI.jsx deleted file mode 100644 index 853f1e9..0000000 --- a/app/api/PostAPI.jsx +++ /dev/null @@ -1,29 +0,0 @@ - -// Get tags from post content -export const detectTags = (content,character) => { - - return content.split(" ").filter((word) => { - return (word.slice(0,1) === character) - }) - -} -export const getContentTags = (content) => { - let newTags = [] - let tags = detectTags(content,'#') - tags.forEach((tag)=>{ - newTags.push(tag.slice(1)) - }) - return newTags -} - -export const sortObjectsDate = (objects) => { - let sortedObjects = objects - - // Sort posts with creation date - sortedObjects.sort((a, b) => { - return parseInt(b.creationDate) - parseInt(a.creationDate) - - }) - - return sortedObjects - } \ No newline at end of file diff --git a/app/api/StringAPI.jsx b/app/api/StringAPI.jsx deleted file mode 100644 index 0a2667d..0000000 --- a/app/api/StringAPI.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// - Import react component -import { storageRef } from 'app/firebaseClient/' - -//- Import actions - -const isValidEmail = (email) => { - let re = /^(([^<>()\[\]\\.,:\s@"]+(\.[^<>()\[\]\\.,:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ - return re.test(email) -} - -function queryString(name, url = window.location.href) { - name = name.replace(/[[]]/g, "\\$&"); - - const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i"); - const results = regex.exec(url); - - if (!results) { - return null; - } - if (!results[2]) { - return ""; - } - - return decodeURIComponent(results[2].replace(/\+/g, " ")); -} - -export default { - isValidEmail, - queryString -} \ No newline at end of file diff --git a/app/components/Circle.jsx b/app/components/Circle.jsx deleted file mode 100644 index 36ff912..0000000 --- a/app/components/Circle.jsx +++ /dev/null @@ -1,266 +0,0 @@ -// - Import react components -import React, { Component } from 'react' -import { connect } from 'react-redux' -import PropTypes from 'prop-types' -import {push} from 'react-router-redux' -import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors' -import { List, ListItem } from 'material-ui/List' -import SvgGroup from 'material-ui/svg-icons/action/group-work' -import IconButton from 'material-ui/IconButton' -import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert' -import IconMenu from 'material-ui/IconMenu' -import TextField from 'material-ui/TextField' -import MenuItem from 'material-ui/MenuItem' -import IconButtonElement from 'IconButtonElement' -import Dialog from 'material-ui/Dialog' -import Divider from 'material-ui/Divider' -import FlatButton from 'material-ui/FlatButton' -import RaisedButton from 'material-ui/RaisedButton' -import SvgClose from 'material-ui/svg-icons/navigation/close' -import AppBar from 'material-ui/AppBar' - -// - Import app components -import UserAvatar from 'UserAvatar' - - -// - Import API - - -// - Import actions -import * as circleActions from 'circleActions' - - - - - -/** -* Create component class - */ -export class Circle extends Component { - - static propTypes = { - /** - * Circle object - */ - circle: PropTypes.object.isRequired, - /** - * Circle identifier - */ - id: PropTypes.string.isRequired - - } - - /** - * Component constructor - * @param {object} props is an object properties of component - */ - constructor(props) { - super(props) - - //Defaul state - this.state = { - /** - * If is true circle is open to show users in circle list - */ - open:false, - /** - * Circle name on change - */ - circleName: this.props.circle.name, - /** - * Save operation will be disable if user doesn't meet requirement - */ - disabledSave: false - } - - // Binding functions to `this` - this.handleToggleCircle = this.handleToggleCircle.bind(this) - this.handleDeleteCircle = this.handleDeleteCircle.bind(this) - this.handleUpdateCircle = this.handleUpdateCircle.bind(this) - this.handleChangeCircleName = this.handleChangeCircleName.bind(this) - } - - - /** - * Handle chage circle name - * - * - * @memberof Circle - */ - handleChangeCircleName = (evt) => { - const {value} = evt.target - this.setState({ - circleName: value, - disabledSave: (!value || value.trim() === '') - }) - } - - /** - * Update user's circle - * - * - * @memberof Circle - */ - handleUpdateCircle = () => { - const {circleName} = this.state - if(circleName && circleName.trim() !== ''){ - this.props.updateCircle({name:circleName,id: this.props.id}) - } - } - - /** - * Handle delete circle - * - * - * @memberof Circle - */ - handleDeleteCircle = () => { - this.props.deleteCircle(this.props.id) - } - - /** - * Toggle circle to close/open - * - * - * @memberof Circle - */ - handleToggleCircle = () => { - this.setState({ - open: !this.state.open - }) - } - - - userList = () => { - const {users} = this.props.circle - const {userInfo} = this.props - let usersParsed =[] - - if(users){ - Object.keys(users).forEach((key, index) => { - const { fullName} = users[key] - let avatar = userInfo && userInfo[key] ? userInfo[key].avatar || '' : '' - usersParsed.push(} - onClick={()=> this.props.goTo(`/${key}`)} - />) - - }) - return usersParsed - } - } - /** - * Right icon menue of circle - * - * - * @memberof Circle - */ - rightIconMenu =( - - - - - ) - /** - * Reneder component DOM - * @return {react element} return the DOM which rendered by component - */ - render() { - - const circleTitle =( -
-
-
- -
-
- Circle settings -
-
- -
-
- -
- ) - return ( -
- {this.props.circle.name}} - leftIcon={} - rightIconButton={this.rightIconMenu} - initiallyOpen={false} - onClick={this.handleToggleCircle} - open={this.state.open} - nestedItems={this.userList()} - > - -
- -
- - -
- ) - } -} - - -/** - * Map dispatch to props - * @param {func} dispatch is the function to dispatch action to reducers - * @param {object} ownProps is the props belong to component - * @return {object} props of component - */ -const mapDispatchToProps = (dispatch, ownProps) => { - let {uid} = ownProps - return { - deleteCircle: (id) => dispatch(circleActions.dbDeleteCircle(id)), - updateCircle: (circle) => dispatch(circleActions.dbUpdateCircle(circle)), - closeCircleSettings: () => dispatch(circleActions.closeCircleSettings(uid,ownProps.id)), - openCircleSettings: () => dispatch(circleActions.openCircleSettings(uid,ownProps.id)), - goTo: (url)=> dispatch(push(url)) - - } -} - -/** - * Map state to props - * @param {object} state is the obeject from redux store - * @param {object} ownProps is the props belong to component - * @return {object} props of component - */ -const mapStateToProps = (state, ownProps) => { - let {uid} = state.authorize - return { - openSetting: state.circle ? (state.circle.userCircles[uid] ? (state.circle.userCircles[uid][ownProps.id].openCircleSettings || false) : false ) : false, - userInfo: state.user.info - - } -} - -// - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(Circle) \ No newline at end of file diff --git a/app/components/CommentWrite.jsx b/app/components/CommentWrite.jsx deleted file mode 100644 index 60e1c6b..0000000 --- a/app/components/CommentWrite.jsx +++ /dev/null @@ -1,84 +0,0 @@ -// - Import react components -import React, {Component} from 'react' -import {connect} from 'react-redux' -import Faker from 'faker' - -// - Import app components - -// - Import actions -import * as commentActions from 'commentActions' - -// - Define variable -const buttonStyle = { - marginTop: '5px' -} - -// - Create CommentWrite component class -export class CommentWrite extends Component { - constructor(props) { - super(props) - - this.state = { - inputValue:'' - } - - // Binding functions to `this` - this.handleRef = this.handleRef.bind(this) - this.focus = this.focus.bind(this) - this.handleAddComment = this.handleAddComment.bind(this) - this.handleOnChange = this.handleOnChange.bind(this) - - } - - handleOnChange = (evt) =>{ - this.setState({inputValue:evt.target.value}) - - } - - handleRef = c => { - this.inputRef = c - } - - focus = () => { - this.inputRef.focus() - } - handleAddComment = (evt) => { - this.props.send(this.state.inputValue,this.props.postId,this.props.close) - - } - -// Render DOM - render() { - return ( -
- + {(!this.props.isCommentOwner && !this.props.isPostOwner && this.props.disableComments ) ? '' : ()} +
+ -
{this.state.text}
+
{this.state.text}
-
- - +
+ +
@@ -280,20 +296,19 @@ export class Comment extends Component { } } - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: any) => { return { - delete: (id, postId) => dispatch(commentActions.dbDeleteComment(id, postId)), - update: (id, postId, comment) => dispatch(commentActions.dbUpdateComment(id, postId, comment)), + delete: (id: string| null, postId: string) => dispatch(commentActions.dbDeleteComment(id, postId)), + update: (id: string, postId: string, comment: string) => dispatch(commentActions.dbUpdateComment(id, postId, comment)), openEditor: () => dispatch(commentActions.openCommentEditor({ id: ownProps.comment.id, postId: ownProps.comment.postId })), closeEditor: () => dispatch(commentActions.closeCommentEditor({ id: ownProps.comment.id, postId: ownProps.comment.postId })), - getUserInfo: () => dispatch(userActions.dbGetUserInfoByUserId(ownProps.comment.userId)) + getUserInfo: () => dispatch(userActions.dbGetUserInfoByUserId(ownProps.comment.userId,'')) } } @@ -303,7 +318,7 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: any) => { const {uid} = state.authorize const avatar = state.user.info && state.user.info[ownProps.comment.userId] ? state.user.info[ownProps.comment.userId].avatar || '' : '' const fullName = state.user.info && state.user.info[ownProps.comment.userId] ? state.user.info[ownProps.comment.userId].fullName || '' : '' @@ -313,10 +328,8 @@ const mapStateToProps = (state, ownProps) => { info: state.user.info, avatar, fullName - - } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(Comment) +export default connect(mapStateToProps, mapDispatchToProps)(CommentComponent as any) diff --git a/src/components/comment/ICommentComponentProps.ts b/src/components/comment/ICommentComponentProps.ts new file mode 100644 index 0000000..f9f593d --- /dev/null +++ b/src/components/comment/ICommentComponentProps.ts @@ -0,0 +1,98 @@ +import { Comment } from 'core/domain/comments' +import { Profile } from 'core/domain/users' +export interface ICommentComponentProps { + + /** + * Comment + * + * @type {Comment} + * @memberof ICommentComponentProps + */ + comment: Comment + + /** + * Open profile editor + * + * @type {Function} + * @memberof ICommentComponentProps + */ + openEditor: Function + + /** + * Close comment editor + * + * @type {Function} + * @memberof ICommentComponentProps + */ + closeEditor: () => any + + /** + * Current user is comment owner {true} or not {false} + * + * @type {boolean} + * @memberof ICommentComponentProps + */ + isCommentOwner: boolean + + /** + * Current user is post owner {true} or not {false} + * + * @type {boolean} + * @memberof ICommentComponentProps + */ + isPostOwner: boolean + + /** + * Update comment + * + * @memberof ICommentComponentProps + */ + update: (id?: string | null, postId?: string, comment?: string | null) => any + + /** + * Delete comment + * + * @memberof ICommentComponentProps + */ + delete: (id?: string| null, postId?: string) => any + + /** + * Get user profile + * + * @memberof ICommentComponentProps + */ + getUserInfo: () => void + + /** + * User profile + * + * @type {{[userId: string]: Profile}} + * @memberof ICommentComponentProps + */ + info: {[userId: string]: Profile} + + /** + * User full name + * + * @type {string} + * @memberof ICommentComponentProps + */ + fullName: string + + /** + * User avatar address + * + * @type {string} + * @memberof Comment + */ + avatar: string + + /** + * Writing comment on the post is disabled {true} or not false + * + * @type {boolean} + * @memberof ICommentComponentProps + */ + disableComments: boolean + +} diff --git a/src/components/comment/ICommentComponentState.ts b/src/components/comment/ICommentComponentState.ts new file mode 100644 index 0000000..ce87911 --- /dev/null +++ b/src/components/comment/ICommentComponentState.ts @@ -0,0 +1,43 @@ + +export interface ICommentComponentState { + + /** + * Initialt text comment + * + * @type {string} + * @memberof ICommentComponentProps + */ + initialText?: string | null + + /** + * Initialt text comment + * + * @type {string} + * @memberof ICommentComponentProps + */ + text?: string | null + + /** + * Comment is in edit state {true} or not {false} + * + * @type {boolean} + * @memberof ICommentComponentState + */ + editDisabled: boolean + + /** + * Current user is the post owner {true} or not falses + * + * @type {boolean} + * @memberof ICommentComponentState + */ + isPostOwner: boolean + + /** + * Display comment {true} or not {false} + * + * @type {boolean} + * @memberof ICommentComponentState + */ + display?: boolean +} diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts new file mode 100644 index 0000000..a402dd6 --- /dev/null +++ b/src/components/comment/index.ts @@ -0,0 +1,2 @@ +import CommentComponent from './CommentComponent' +export default CommentComponent diff --git a/app/components/CommentGroup.jsx b/src/components/commentGroup/CommentGroupComponent.tsx similarity index 57% rename from app/components/CommentGroup.jsx rename to src/components/commentGroup/CommentGroupComponent.tsx index 83d22e8..430d95d 100644 --- a/app/components/CommentGroup.jsx +++ b/src/components/commentGroup/CommentGroupComponent.tsx @@ -10,60 +10,76 @@ import { ListItem } from 'material-ui/List' import { grey400, darkBlack, lightBlack } from 'material-ui/styles/colors' // - Import actions -import * as commentActions from 'commentActions' +import * as commentActions from 'actions/commentActions' // - Import app components -import CommentList from 'CommentList' -import CommentWrite from 'CommentWrite' -import UserAvatar from 'UserAvatar' +import CommentListComponent from 'components/CommentList' +import UserAvatarComponent from 'components/userAvatar' +import { ICommentGroupComponentProps } from './ICommentGroupComponentProps' +import { ICommentGroupComponentState } from './ICommentGroupComponentState' +import { Comment } from 'core/domain/comments/comment' /** * Create component class */ -export class CommentGroup extends Component { +export class CommentGroupComponent extends Component { - -static propTypes = { + static propTypes = { /** * If it's true comment box will be open */ - open: PropTypes.bool, + open: PropTypes.bool, /** * If it's true the comment is disable to write */ - disableComments: PropTypes.bool, + disableComments: PropTypes.bool, /** * The post identifier which comment belong to */ - postId: PropTypes.string, + postId: PropTypes.string, /** * If it's true the post owner is the logged in user which this post be long to the comment */ - isPostOwner: PropTypes.bool, + isPostOwner: PropTypes.bool, /** * Toggle on show/hide comment by passing callback from parent component */ - onToggleRequest: PropTypes.func, + onToggleRequest: PropTypes.func, /** - * The user identifier of the post owner which comment belong to + * The user identifier of the post owner which comment belong to */ - ownerPostUserId:PropTypes.string + ownerPostUserId: PropTypes.string -} + } + + styles = { + commentItem: { + height: '60px', + position: '', + zIndex: '' + }, + toggleShowList: { + height: '60px', + zIndex: 5 + }, + writeCommentTextField: { + width: '100%' + } + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: ICommentGroupComponentProps) { super(props) /** * Defaul state */ this.state = { - commentText: "", + commentText: '', postDisable: true } @@ -72,8 +88,6 @@ static propTypes = { this.commentList = this.commentList.bind(this) this.handlePostComment = this.handlePostComment.bind(this) this.clearCommentWrite = this.clearCommentWrite.bind(this) - - } /** @@ -90,7 +104,7 @@ static propTypes = { * Post comment */ handlePostComment = () => { - this.props.send(this.state.commentText, this.props.postId, this.clearCommentWrite) + this.props.send!(this.state.commentText, this.props.postId, this.clearCommentWrite) } /** @@ -98,15 +112,14 @@ static propTypes = { * @param {event} evt is an event passed by change comment text callback funciton * @param {string} data is the comment text which user writes */ - handleOnChange = (evt, data) => { + handleOnChange = (evt: any, data: any) => { this.setState({ commentText: data }) if (data.length === 0 || data.trim() === '') { this.setState({ commentText: '', postDisable: true }) - } - else { + } else { this.setState({ commentText: data, postDisable: false @@ -123,48 +136,45 @@ static propTypes = { let comments = this.props.comments if (comments) { - - let parsedComments = [] + let parsedComments: Comment[] = [] Object.keys(comments).slice(0, 3).forEach((commentId) => { parsedComments.push({ id: commentId, - ...comments[commentId] + ...comments![commentId] }) }) if (parsedComments.length === 2) { parsedComments.push(parsedComments[0]) - } - else if (parsedComments.length === 1) { + } else if (parsedComments.length === 1) { parsedComments.push(parsedComments[0]) parsedComments.push(parsedComments[0]) } return parsedComments.map((comment, index) => { const {userInfo} = this.props - const commentAvatar = userInfo && userInfo[comment.userId] ? userInfo[comment.userId].avatar || '' : '' - const commentFullName = userInfo && userInfo[comment.userId] ? userInfo[comment.userId].fullName || '' : '' - - return (} - secondaryText={
+ const commentAvatar = userInfo && userInfo[comment.userId!] ? userInfo[comment.userId!].avatar || '' : '' + const commentFullName = userInfo && userInfo[comment.userId!] ? userInfo[comment.userId!].fullName || '' : '' + + return (} + secondaryText={
{comment.userDisplayName}: {comment.text} -
} secondaryTextLines={2} /> @@ -180,55 +190,53 @@ static propTypes = { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - - + render () { return (
-
0 ? { display: "block" } : { display: "none" }}> +
0 ? { display: 'block' } : { display: 'none' }}> - + -
- +
+ -
+
{this.commentList()}
{(this.props.comments && Object.keys(this.props.comments).length > 0) - ? ( - + ? ( + ) : ''}
{!this.props.disableComments ? (
- + -
- -
+
+ +
- + -
): ''} +
) : ''}
) } @@ -240,9 +248,9 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: ICommentGroupComponentProps) => { return { - send: (text, postId, callBack) => { + send: (text: string, postId: string, callBack: Function) => { dispatch(commentActions.dbAddComment(ownProps.ownerPostUserId,{ postId: postId, text: text @@ -257,15 +265,15 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: ICommentGroupComponentProps) => { return { comments: state.comment.postComments[ownProps.postId], avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar || '' : '', fullName: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].fullName || '' : '', - userInfo: state.user.info + userInfo: state.user.info } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(CommentGroup) +export default connect(mapStateToProps, mapDispatchToProps)(CommentGroupComponent as any) diff --git a/src/components/commentGroup/ICommentGroupComponentProps.ts b/src/components/commentGroup/ICommentGroupComponentProps.ts new file mode 100644 index 0000000..5da4e07 --- /dev/null +++ b/src/components/commentGroup/ICommentGroupComponentProps.ts @@ -0,0 +1,93 @@ +import { Profile } from 'core/domain/users' +import { Comment } from 'core/domain/comments' +export interface ICommentGroupComponentProps { + + /** + * Commnets + * + * @type {{[commentId: string]: Comment}} + * @memberof ICommentGroupComponentProps + */ + comments?: {[commentId: string]: Comment} + + /** + * The post identifier which comment belong to + * + * @type {string} + * @memberof ICommentGroupComponentProps + */ + postId: string + + /** + * Users` profile + * + * @type {{[userId: string]: Profile}} + * @memberof ICommentGroupComponentProps + */ + userInfo?: {[userId: string]: Profile} + + /** + * Comment group is open {true} or not {false} + * + * @type {boolean} + * @memberof ICommentGroupComponentProps + */ + open: boolean + + /** + * Comment is disabled {true} or not {false} + * + * @type {boolean} + * @memberof ICommentGroupComponentProps + */ + disableComments: boolean + + /** + * Current user is the post owner {true} or not {false} + * + * @type {boolean} + * @memberof ICommentGroupComponentProps + */ + isPostOwner: boolean + + /** + * User full name + * + * @type {string} + * @memberof ICommentGroupComponentProps + */ + fullName?: string + + /** + * Avatar URL address + * + * @type {string} + * @memberof ICommentGroupComponentProps + */ + avatar?: string + + /** + * Toggle comment list open/close + * + * @type {Function} + * @memberof ICommentGroupComponentProps + */ + onToggleRequest: () => void + + /** + * The identifier of post owner + * + * @type {string} + * @memberof ICommentGroupComponentProps + */ + ownerPostUserId: string + + /** + * Send comment + * + * @type {(commentText: string, postId: string, clearCommentWrite: Function)} + * @memberof ICommentGroupComponentProps + */ + send?: (commentText: string, postId: string, clearCommentWrite: () => void) => any + +} diff --git a/src/components/commentGroup/ICommentGroupComponentState.ts b/src/components/commentGroup/ICommentGroupComponentState.ts new file mode 100644 index 0000000..993462b --- /dev/null +++ b/src/components/commentGroup/ICommentGroupComponentState.ts @@ -0,0 +1,19 @@ + +export interface ICommentGroupComponentState { + + /** + * Comment text + * + * @type {string} + * @memberof ICommentGroupComponentState + */ + commentText: string + + /** + * Disable post comment + * + * @type {boolean} + * @memberof ICommentGroupComponentState + */ + postDisable: boolean +} diff --git a/src/components/commentGroup/index.ts b/src/components/commentGroup/index.ts new file mode 100644 index 0000000..919a6e5 --- /dev/null +++ b/src/components/commentGroup/index.ts @@ -0,0 +1,2 @@ +import CommentGroupComponent from './CommentGroupComponent' +export default CommentGroupComponent diff --git a/app/components/CommentList.jsx b/src/components/commentList/CommentListComponent.tsx similarity index 66% rename from app/components/CommentList.jsx rename to src/components/commentList/CommentListComponent.tsx index f715073..1597549 100644 --- a/app/components/CommentList.jsx +++ b/src/components/commentList/CommentListComponent.tsx @@ -4,24 +4,23 @@ import { connect } from 'react-redux' import PropTypes from 'prop-types' import { List, ListItem } from 'material-ui/List' - - - // - Import app components -import Comment from 'Comment' -import * as PostAPI from 'PostAPI' +import CommentComponent from 'components/Comment' + +import * as PostAPI from 'api/PostAPI' + +import { ICommentListComponentProps } from './ICommentListComponentProps' +import { ICommentListComponentState } from './ICommentListComponentState' +import { Comment } from 'core/domain/comments' // - Import actions - - - /** * Create component class */ -export class CommentList extends Component { +export class CommentListComponent extends Component { - static propTypes = { + static propTypes = { /** * If it's true the post owner is the logged in user which this post be long to the comment */ @@ -29,14 +28,14 @@ export class CommentList extends Component { /** * If it's true the comment is disable to write */ - disableComments: PropTypes.bool, - } + disableComments: PropTypes.bool + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: ICommentListComponentProps) { super(props) /** @@ -50,8 +49,6 @@ export class CommentList extends Component { } - - /** * Get comments' DOM * @return {DOM} list of comments' DOM @@ -60,8 +57,7 @@ export class CommentList extends Component { let comments = this.props.comments if (comments) { - - let parsedComments = [] + let parsedComments: Comment[] = [] Object.keys(comments).forEach((commentId) => { parsedComments.push({ id: commentId, @@ -69,10 +65,10 @@ export class CommentList extends Component { }) }) let sortedComments = PostAPI.sortObjectsDate(parsedComments) - - return sortedComments.map((comment, index, array) => { - return + return sortedComments.map((comment: Comment, index: number, array: Comment) => { + + return }) @@ -83,11 +79,11 @@ export class CommentList extends Component { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { - const styles = { + const styles: any = { list: { - width: "100%", + width: '100%', maxHeight: 450, overflowY: 'auto' } @@ -95,7 +91,6 @@ export class CommentList extends Component { return ( - {this.commentList()} @@ -110,10 +105,9 @@ export class CommentList extends Component { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: ICommentListComponentProps) => { return { - } } @@ -123,11 +117,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state) => { +const mapStateToProps = (state: any) => { return { } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(CommentList) +export default connect(mapStateToProps, mapDispatchToProps)(CommentListComponent as any) diff --git a/src/components/commentList/ICommentListComponentProps.ts b/src/components/commentList/ICommentListComponentProps.ts new file mode 100644 index 0000000..4e11ebd --- /dev/null +++ b/src/components/commentList/ICommentListComponentProps.ts @@ -0,0 +1,28 @@ +import { Comment } from 'core/domain/comments' + +export interface ICommentListComponentProps { + + /** + * Ad dictionary of comment + * + * @type {{[commentId: string]: Comment}} + * @memberof ICommentListComponentProps + */ + comments: {[commentId: string]: Comment} + + /** + * Current user is post the post owner {true} or not false + * + * @type {boolean} + * @memberof ICommentListComponentProps + */ + isPostOwner: boolean + + /** + * Comment on the post is disabled {false} or not {true} + * + * @type {boolean} + * @memberof ICommentListComponentProps + */ + disableComments: boolean +} diff --git a/src/components/commentList/ICommentListComponentState.ts b/src/components/commentList/ICommentListComponentState.ts new file mode 100644 index 0000000..85c7393 --- /dev/null +++ b/src/components/commentList/ICommentListComponentState.ts @@ -0,0 +1,4 @@ + +export interface ICommentListComponentState { + +} diff --git a/src/components/commentList/index.ts b/src/components/commentList/index.ts new file mode 100644 index 0000000..e54685a --- /dev/null +++ b/src/components/commentList/index.ts @@ -0,0 +1,2 @@ +import CommentListComponent from './CommentListComponent' +export default CommentListComponent diff --git a/app/components/EditProfile.jsx b/src/components/editProfile/EditProfileComponent.tsx similarity index 50% rename from app/components/EditProfile.jsx rename to src/components/editProfile/EditProfileComponent.tsx index bf1a16a..0c900b3 100644 --- a/app/components/EditProfile.jsx +++ b/src/components/editProfile/EditProfileComponent.tsx @@ -1,5 +1,3 @@ - - // - Import react components import React, { Component } from 'react' import { connect } from 'react-redux' @@ -18,316 +16,296 @@ import Divider from 'material-ui/Divider' import Paper from 'material-ui/Paper' import TextField from 'material-ui/TextField' - // - Import app components -import ImgCover from 'ImgCover' -import DialogTitle from 'DialogTitle' -import ImageGallery from 'ImageGallery' -import FileAPI from 'FileAPI' -import UserAvatar from 'UserAvatar' - - - +import ImgCover from 'components/imgCover' +import UserAvatarComponent from 'components/userAvatar' +import ImageGallery from 'components/imageGallery' +import DialogTitle from 'layouts/DialogTitle' // - Import API - +import FileAPI from 'api/FileAPI' // - Import actions -import * as userActions from 'userActions' -import * as globalActions from 'globalActions' -import * as imageGalleryActions from 'imageGalleryActions' +import * as userActions from 'actions/userActions' +import * as globalActions from 'actions/globalActions' +import * as imageGalleryActions from 'actions/imageGalleryActions' + +import { IEditProfileComponentProps } from './IEditProfileComponentProps' +import { IEditProfileComponentState } from './IEditProfileComponentState' +import { Profile } from 'core/domain/users' /** -* Create component class + * Create component class */ -export class EditProfile extends Component { +export class EditProfileComponent extends Component { - static propTypes = { + static propTypes = { /** * User avatar address */ - avatar: PropTypes.string, + avatar: PropTypes.string, /** * User avatar address */ - banner: PropTypes.string, + banner: PropTypes.string, /** * User full name */ - fullName: PropTypes.string.isRequired + fullName: PropTypes.string.isRequired + } + styles = { + avatar: { + border: '2px solid rgb(255, 255, 255)' + }, + paper: { + width: '90%', + height: '100%', + margin: '0 auto', + display: 'block' + }, + title: { + padding: '24px 24px 20px 24px', + font: '500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif', + display: 'flex', + wordWrap: 'break-word', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + flexGrow: 1 + }, + actions: { + display: 'flex', + justifyContent: 'flex-end', + padding: '24px 24px 20px' + }, + updateButton: { + marginLeft: '10px' + }, + box: { + padding: '0px 24px 20px 24px', + display: 'flex' + }, + dialogGallery: { + width: '', + maxWidth: '530px', + borderRadius: '4px' + }, + iconButtonSmall: { + }, + iconButton: { } + } + /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { - super(props) - //Defaul state - this.state = { + constructor (props: IEditProfileComponentProps) { + super(props) + // Defaul state + this.state = { /** * If it's true the winow is in small size */ - isSmall: false, + isSmall: false, /** * User tag line input value */ - tagLineInput: props.info.tagLine || '', + tagLineInput: props.info!.tagLine || '', /** * User full name input value */ - fullNameInput: props.info.fullName || '', + fullNameInput: props.info!.fullName || '', /** * Error message of full name input */ - fullNameInputError: '', + fullNameInputError: '', /** * User banner address */ - banner: this.props.banner || 'https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57', + banner: props.banner || 'https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57', /** * User avatar address */ - avatar: this.props.avatar || '', + avatar: props.avatar || '', /** * It's true if the image galley for banner is open */ - openBanner: false, + openBanner: false, /** * It's true if the image gallery for avatar is open */ - openAvatar: false + openAvatar: false - } + } // Binding functions to `this` - this.handleChangeDate = this.handleChangeDate.bind(this) - this.handleUpdate = this.handleUpdate.bind(this) - this.handleRequestSetAvatar = this.handleRequestSetAvatar.bind(this) - this.handleRequestSetBanner = this.handleRequestSetBanner.bind(this) + this.handleUpdate = this.handleUpdate.bind(this) + this.handleRequestSetAvatar = this.handleRequestSetAvatar.bind(this) + this.handleRequestSetBanner = this.handleRequestSetBanner.bind(this) - } + } - /** + /** * Close image gallery of banner */ - handleCloseBannerGallery = () => { - this.setState({ - openBanner: false - }) - } + handleCloseBannerGallery = () => { + this.setState({ + openBanner: false + }) + } - /** + /** * Open image gallery of banner */ - handleOpenBannerGallery = () => { - this.setState({ - openBanner: true - }) - } + handleOpenBannerGallery = () => { + this.setState({ + openBanner: true + }) + } /** * Close image gallery of avatar */ - handleCloseAvatarGallery = () => { - this.setState({ - openAvatar: false - }) - } + handleCloseAvatarGallery = () => { + this.setState({ + openAvatar: false + }) + } /** * Open image gallery of avatar */ - handleOpenAvatarGallery = () => { - this.setState({ - openAvatar: true - }) - } + handleOpenAvatarGallery = () => { + this.setState({ + openAvatar: true + }) + } - - /** + /** * Set banner image url */ - handleRequestSetBanner = (url) => { - console.log('==========Banner==================') - console.log(url) - console.log('====================================') - this.setState({ - banner: url - }) - } + handleRequestSetBanner = (url: string) => { + this.setState({ + banner: url + }) + } - /** + /** * Set avatar image url */ - handleRequestSetAvatar = (fileName) => { - this.setState({ - avatar: fileName - }) - } + handleRequestSetAvatar = (fileName: string) => { + this.setState({ + avatar: fileName + }) + } /** * Update profile on the server - * - * + * + * * @memberof EditProfile */ - handleUpdate = () => { - const {fullNameInput, tagLineInput, avatar, banner} = this.state - - if (this.state.fullNameInput.trim() === '') { - this.setState({ - fullNameInputError: 'This field is required' - }) - } - else { - this.setState({ - fullNameInputError: '' - }) + handleUpdate = () => { + const {fullNameInput, tagLineInput, avatar, banner} = this.state - this.props.update({ - fullName: fullNameInput, - tagLine: tagLineInput, - avatar: avatar, - banner: banner - }) - } + if (this.state.fullNameInput.trim() === '') { + this.setState({ + fullNameInputError: 'This field is required' + }) + } else { + this.setState({ + fullNameInputError: '' + }) + + this.props.update!({ + fullName: fullNameInput, + tagLine: tagLineInput, + avatar: avatar, + banner: banner + }) } + } /** * Handle data on input change * @param {event} evt is an event of inputs of element on change */ - handleInputChange = (evt) => { - const target = evt.target - const value = target.type === 'checkbox' ? target.checked : target.value - const name = target.name - this.setState({ - [name]: value - }) - } - /** - * Handle change date - */ - handleChangeDate = (evt, date) => { - this.setState({ - birthdayInput: date, - }) - } + handleInputChange = (event: any) => { + const target = event.target + const value = target.type === 'checkbox' ? target.checked : target.value + const name = target.name + this.setState({ + [name]: value + }) + } - /** - * Handle resize event for window to change sidebar status - * @param {event} evt is the event is passed by winodw resize event - */ - handleResize = (evt) => { + /** + * Handle resize event for window to change sidebar status + * @param {any} event is the event is passed by winodw resize event + */ + handleResize = (event: any) => { // Set initial state - let width = window.innerWidth + let width = window.innerWidth - if (width > 900) { - this.setState({ - isSmall: false - }) + if (width > 900) { + this.setState({ + isSmall: false + }) - } - else { - this.setState({ - isSmall: true - }) - } - } - - - componentDidMount = () => { - this.handleResize() + } else { + this.setState({ + isSmall: true + }) } + } + componentDidMount () { + this.handleResize(null) + } /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { - const styles = { - avatar: { - border: '2px solid rgb(255, 255, 255)' - }, - paper: { - width: '90%', - height: '100%', - margin: '0 auto', - display: 'block', - }, - title: { - padding: '24px 24px 20px 24px', - font: '500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif', - display: 'flex', - wordWrap: 'break-word', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - flexGrow: 1 - }, - actions: { - display: 'flex', - justifyContent: "flex-end", - padding: '24px 24px 20px' - }, - updateButton: { - marginLeft: '10px' - }, - box: { - padding: '0px 24px 20px 24px', - display: 'flex' - - }, - dialogGallery: { - width: '', - maxWidth: '530px', - borderRadius: "4px" - } - - } - - - const iconButtonElement = ( - ) - - const RightIconMenu = () => ( + const RightIconMenu = () => ( - Reply - Edit - Delete + Reply + Edit + Delete ) - - - return ( + return (
{/* Edit profile dialog */} {/* Banner */}
@@ -338,7 +316,7 @@ export class EditProfile extends Component {
@@ -348,25 +326,24 @@ export class EditProfile extends Component {
- +
{this.props.fullName}
-
{/* Edit user information box*/} - -
Personal Information
-
+ +
Personal Information
+

-
+

-
- - +
+ +
- {/* Image gallery for banner*/} @@ -398,9 +374,9 @@ export class EditProfile extends Component { title={} modal={false} open={this.state.openBanner} - contentStyle={styles.dialogGallery} + contentStyle={this.styles.dialogGallery} onRequestClose={this.handleCloseBannerGallery} - overlayStyle={{ background: "rgba(0,0,0,0.12)" }} + overlayStyle={{ background: 'rgba(0,0,0,0.12)' }} autoDetectWindowHeight={false} > @@ -412,9 +388,9 @@ export class EditProfile extends Component { title={} modal={false} open={this.state.openAvatar} - contentStyle={styles.dialogGallery} + contentStyle={this.styles.dialogGallery} onRequestClose={this.handleCloseAvatarGallery} - overlayStyle={{ background: "rgba(0,0,0,0.12)" }} + overlayStyle={{ background: 'rgba(0,0,0,0.12)' }} autoDetectWindowHeight={false} > @@ -422,23 +398,22 @@ export class EditProfile extends Component {
- ) - } + ) + } } - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { - return { - update: (info) => dispatch(userActions.dbUpdateUserInfo(info)), - onRequestClose: () => dispatch(userActions.closeEditProfile()) +const mapDispatchToProps = (dispatch: any, ownProps: IEditProfileComponentProps) => { + return { + update: (info: Profile) => dispatch(userActions.dbUpdateUserInfo(info)), + onRequestClose: () => dispatch(userActions.closeEditProfile()) - } + } } /** @@ -447,14 +422,14 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { - return { - open: state.user.openEditProfile, - info: state.user.info[state.authorize.uid], - avatarURL: state.imageGallery.imageURLList +const mapStateToProps = (state: any, ownProps: IEditProfileComponentProps) => { + return { + open: state.user.openEditProfile, + info: state.user.info[state.authorize.uid], + avatarURL: state.imageGallery.imageURLList - } + } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(EditProfile) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(EditProfileComponent as any) diff --git a/src/components/editProfile/IEditProfileComponentProps.ts b/src/components/editProfile/IEditProfileComponentProps.ts new file mode 100644 index 0000000..ab57ce9 --- /dev/null +++ b/src/components/editProfile/IEditProfileComponentProps.ts @@ -0,0 +1,58 @@ +import { Profile } from 'core/domain/users' + +export interface IEditProfileComponentProps { + + /** + * User profile + * + * @type {Profile} + * @memberof IEditProfileComponentProps + */ + info?: Profile + + /** + * User profile banner addresss + * + * @type {string} + * @memberof IEditProfileComponentProps + */ + banner: string + + /** + * User avatar address + * + * @type {string} + * @memberof IEditProfileComponentProps + */ + avatar: string + + /** + * User full name + * + * @type {string} + * @memberof IEditProfileComponentProps + */ + fullName: string + + /** + * Edit profile dialog is open {true} or not {false} + * + * @type {boolean} + * @memberof IEditProfileComponentProps + */ + open?: boolean + + /** + * Update user profile + * + * @memberof IEditProfileComponentProps + */ + update?: (profile: Profile) => void + + /** + * On edit profile dialog close event + * + * @memberof IEditProfileComponentProps + */ + onRequestClose?: () => void +} diff --git a/src/components/editProfile/IEditProfileComponentState.ts b/src/components/editProfile/IEditProfileComponentState.ts new file mode 100644 index 0000000..154dc4d --- /dev/null +++ b/src/components/editProfile/IEditProfileComponentState.ts @@ -0,0 +1,68 @@ + +export interface IEditProfileComponentState { + + /** + * Full name input value + * + * @type {string} + * @memberof IEditProfileComponentState + */ + fullNameInput: string + + /** + * Full name input error message + * + * @type {string} + * @memberof IEditProfileComponentState + */ + fullNameInputError: string + + /** + * Tag line input value + * + * @type {string} + * @memberof IEditProfileComponentState + */ + tagLineInput: string + + /** + * Edit profile page is small size {true} or big {false} + * + * @type {boolean} + * @memberof IEditProfileComponentState + */ + isSmall: boolean + + /** + * User's banner URL + * + * @type {string} + * @memberof IEditProfileComponentState + */ + banner: string + + /** + * User's avatar URL address + * + * @type {string} + * @memberof IEditProfileComponentState + */ + avatar: string + + /** + * Image gallery dialog is open for choosing banner image {true} or not {false} + * + * @type {boolean} + * @memberof IEditProfileComponentState + */ + openBanner: boolean + + /** + * Image gallery dialog is open for choosing avatar image {true} or not {false} + * + * @type {boolean} + * @memberof IEditProfileComponentState + */ + openAvatar: boolean + +} diff --git a/src/components/editProfile/index.ts b/src/components/editProfile/index.ts new file mode 100644 index 0000000..dae62e4 --- /dev/null +++ b/src/components/editProfile/index.ts @@ -0,0 +1,2 @@ +import EditProfileComponent from './EditProfileComponent' +export default EditProfileComponent diff --git a/app/components/FindPeople.jsx b/src/components/findPeople/FindPeopleComponent.tsx similarity index 55% rename from app/components/FindPeople.jsx rename to src/components/findPeople/FindPeopleComponent.tsx index f41c21c..b5c84e6 100644 --- a/app/components/FindPeople.jsx +++ b/src/components/findPeople/FindPeopleComponent.tsx @@ -4,70 +4,69 @@ import { connect } from 'react-redux' import PropTypes from 'prop-types' import Paper from 'material-ui/Paper' - // - Import app components -import UserBoxList from 'UserBoxList' - +import UserBoxList from 'components/userBoxList' // - Import API - // - Import actions -import * as userActions from 'userActions' +import * as userActions from 'actions/userActions' +import { IFindPeopleComponentProps } from './IFindPeopleComponentProps' +import { IFindPeopleComponentState } from './IFindPeopleComponentState' /** -* Create component class + * Create component class */ -export class FindPeople extends Component { +export class FindPeopleComponent extends Component { - static propTypes = { + static propTypes = { - } + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { - super(props) + constructor (props: IFindPeopleComponentProps) { + super(props) - //Defaul state - this.state = { + // Defaul state + this.state = { - } + } // Binding functions to `this` - } + } - componentWillMount() { - this.props.loadPeople() - } + componentWillMount () { + this.props.loadPeople!() + } /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { - const styles = { - paper: { - height: 254, - width: 243, - margin: 10, - textAlign: 'center', - maxWidth: '257px' - }, - followButton:{ - position: 'absolute', - bottom: '8px', - left: 0, - right: 0 - } - } + const styles = { + paper: { + height: 254, + width: 243, + margin: 10, + textAlign: 'center', + maxWidth: '257px' + }, + followButton: { + position: 'absolute', + bottom: '8px', + left: 0, + right: 0 + } + } - return ( + return (
- {this.props.peopleInfo && Object.keys(this.props.peopleInfo).length !== 0 ? (
+ {this.props.peopleInfo && Object.keys(this.props.peopleInfo).length !== 0 ? (
Suggestions for you
@@ -77,21 +76,20 @@ export class FindPeople extends Component { Nothing to show! :(
)}
- ) - } + ) + } } - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { - return { - loadPeople: () => dispatch(userActions.dbGetPeopleInfo()) - } +const mapDispatchToProps = (dispatch: any, ownProps: IFindPeopleComponentProps) => { + return { + loadPeople: () => dispatch(userActions.dbGetPeopleInfo()) + } } /** @@ -100,11 +98,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { - return { - peopleInfo: state.user.info - } +const mapStateToProps = (state: any, ownProps: IFindPeopleComponentProps) => { + return { + peopleInfo: state.user.info + } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(FindPeople) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(FindPeopleComponent as any) diff --git a/src/components/findPeople/IFindPeopleComponentProps.ts b/src/components/findPeople/IFindPeopleComponentProps.ts new file mode 100644 index 0000000..3108072 --- /dev/null +++ b/src/components/findPeople/IFindPeopleComponentProps.ts @@ -0,0 +1,20 @@ +import { Profile } from 'core/domain/users/profile' + +export interface IFindPeopleComponentProps { + + /** + * Load users' profile + * + * @memberof IFindPeopleComponentProps + */ + loadPeople?: () => any + + /** + * Users' profile + * + * @type {{[userId: string]: Profile}} + * @memberof IFindPeopleComponentProps + */ + peopleInfo?: {[userId: string]: Profile} + +} diff --git a/src/components/findPeople/IFindPeopleComponentState.ts b/src/components/findPeople/IFindPeopleComponentState.ts new file mode 100644 index 0000000..862fcaf --- /dev/null +++ b/src/components/findPeople/IFindPeopleComponentState.ts @@ -0,0 +1,4 @@ + +export interface IFindPeopleComponentState { + +} diff --git a/src/components/findPeople/index.ts b/src/components/findPeople/index.ts new file mode 100644 index 0000000..263fd8b --- /dev/null +++ b/src/components/findPeople/index.ts @@ -0,0 +1,2 @@ +import FindPeopleComponent from './FindPeopleComponent' +export default FindPeopleComponent diff --git a/app/components/Followers.jsx b/src/components/followers/FollowersComponent.tsx similarity index 56% rename from app/components/Followers.jsx rename to src/components/followers/FollowersComponent.tsx index 2353550..652a1c5 100644 --- a/app/components/Followers.jsx +++ b/src/components/followers/FollowersComponent.tsx @@ -1,33 +1,35 @@ // - Import react components -import React, {Component} from 'react' -import {connect} from 'react-redux' +import React, { Component } from 'react' +import { connect } from 'react-redux' import PropTypes from 'prop-types' // - Import app components -import UserBoxList from 'UserBoxList' +import UserBoxList from 'components/userBoxList' + +import { IFollowersComponentProps } from './IFollowersComponentProps' +import { IFollowersComponentState } from './IFollowersComponentState' // - Import API - // - Import actions /** -* Create component class + * Create component class */ -export class Followers extends Component { +export class FollowersComponent extends Component { -static propTypes = { + static propTypes = { - } + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props){ + constructor (props: IFollowersComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { } @@ -40,24 +42,23 @@ static propTypes = { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - return ( + render () { + return (
- {(this.props.followers && Object.keys(this.props.followers).length !==0) ? (
+ {(this.props.followers && Object.keys(this.props.followers).length !== 0) ? (
Followers
-
) +
) : (
No followers!
)}
- ) - } - } - + ) + } +} /** * Map dispatch to props @@ -65,11 +66,11 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ - const mapDispatchToProps = (dispatch,ownProps) => { - return{ +const mapDispatchToProps = (dispatch: any,ownProps: IFollowersComponentProps) => { + return{ - } } +} /** * Map state to props @@ -77,13 +78,13 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ - const mapStateToProps = (state,ownProps) => { - const { uid } = state.authorize - const circles = state.circle ? state.circle.userCircles[uid] : {} - return{ - followers: circles ? (circles['-Followers'] ? circles['-Followers'].users || {} : {}) : {} - } +const mapStateToProps = (state: any,ownProps: IFollowersComponentProps) => { + const { uid } = state.authorize + const circles = state.circle ? state.circle.userCircles[uid] : {} + return{ + followers: circles ? (circles['-Followers'] ? circles['-Followers'].users || {} : {}) : {} } +} // - Connect component to redux store - export default connect(mapStateToProps,mapDispatchToProps)(Followers) \ No newline at end of file +export default connect(mapStateToProps,mapDispatchToProps)(FollowersComponent as any) diff --git a/src/components/followers/IFollowersComponentProps.ts b/src/components/followers/IFollowersComponentProps.ts new file mode 100644 index 0000000..7c544cd --- /dev/null +++ b/src/components/followers/IFollowersComponentProps.ts @@ -0,0 +1,12 @@ +import { UserFollower } from 'core/domain/circles' + +export interface IFollowersComponentProps { + + /** + * User followers info + * + * @type {{[userId: string]: UserFollower}} + * @memberof IFindPeopleComponentProps + */ + followers?: {[userId: string]: UserFollower} +} diff --git a/src/components/followers/IFollowersComponentState.ts b/src/components/followers/IFollowersComponentState.ts new file mode 100644 index 0000000..621116c --- /dev/null +++ b/src/components/followers/IFollowersComponentState.ts @@ -0,0 +1,4 @@ + +export interface IFollowersComponentState { + +} diff --git a/src/components/followers/index.ts b/src/components/followers/index.ts new file mode 100644 index 0000000..10af3f3 --- /dev/null +++ b/src/components/followers/index.ts @@ -0,0 +1,2 @@ +import FollowersComponent from './FollowersComponent' +export default FollowersComponent diff --git a/app/components/Following.jsx b/src/components/following/FollowingComponent.tsx similarity index 64% rename from app/components/Following.jsx rename to src/components/following/FollowingComponent.tsx index b44ae8d..1c2e951 100644 --- a/app/components/Following.jsx +++ b/src/components/following/FollowingComponent.tsx @@ -1,34 +1,35 @@ // - Import react components -import React, {Component} from 'react' -import {connect} from 'react-redux' +import React, { Component } from 'react' +import { connect } from 'react-redux' import PropTypes from 'prop-types' // - Import app components -import UserBoxList from 'UserBoxList' +import UserBoxList from 'components/userBoxList' // - Import API -import CircleAPI from 'CircleAPI' - +import CircleAPI from 'api/CircleAPI' +import { IFollowingComponentProps } from './IFollowingComponentProps' +import { IFollowingComponentState } from './IFollowingComponentState' // - Import actions /** -* Create component class + * Create component class */ -export class Following extends Component { +export class FollowingComponent extends Component { -static propTypes = { + static propTypes = { - } + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props){ + constructor (props: IFollowingComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { } @@ -41,25 +42,24 @@ static propTypes = { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - - return ( + render () { + + return (
- {(this.props.followingUsers && Object.keys(this.props.followingUsers).length !== 0 )? (
+ {(this.props.followingUsers && Object.keys(this.props.followingUsers).length !== 0 ) ? (
Following
- +
) : (
No following user!
)}
- ) - } - } - + ) + } +} /** * Map dispatch to props @@ -67,11 +67,11 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ - const mapDispatchToProps = (dispatch,ownProps) => { - return{ +const mapDispatchToProps = (dispatch: any,ownProp: IFollowingComponentProps) => { + return{ - } } +} /** * Map state to props @@ -79,17 +79,17 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ - const mapStateToProps = (state,ownProps) => { +const mapStateToProps = (state: any,ownProps: IFollowingComponentProps) => { const { uid } = state.authorize const circles = state.circle ? state.circle.userCircles[uid] : {} const followingUsers = CircleAPI.getFollowingUsers(circles) return { uid, circles, - followingUsers, - - } + followingUsers + } +} // - Connect component to redux store - export default connect(mapStateToProps,mapDispatchToProps)(Following) \ No newline at end of file +export default connect(mapStateToProps,mapDispatchToProps)(FollowingComponent as any) diff --git a/src/components/following/IFollowingComponentProps.ts b/src/components/following/IFollowingComponentProps.ts new file mode 100644 index 0000000..3f92362 --- /dev/null +++ b/src/components/following/IFollowingComponentProps.ts @@ -0,0 +1,6 @@ +import { UserFollower } from 'core/domain/circles' + +export interface IFollowingComponentProps { + + followingUsers?: {[userId: string]: UserFollower} +} diff --git a/src/components/following/IFollowingComponentState.ts b/src/components/following/IFollowingComponentState.ts new file mode 100644 index 0000000..58f4f44 --- /dev/null +++ b/src/components/following/IFollowingComponentState.ts @@ -0,0 +1,4 @@ + +export interface IFollowingComponentState { + +} diff --git a/src/components/following/index.ts b/src/components/following/index.ts new file mode 100644 index 0000000..d2c763c --- /dev/null +++ b/src/components/following/index.ts @@ -0,0 +1,2 @@ +import FollowingComponent from './FollowingComponent' +export default FollowingComponent diff --git a/app/components/Home.jsx b/src/components/home/HomeComponent.tsx similarity index 57% rename from app/components/Home.jsx rename to src/components/home/HomeComponent.tsx index c44d37d..35de46f 100644 --- a/app/components/Home.jsx +++ b/src/components/home/HomeComponent.tsx @@ -15,34 +15,36 @@ import SvgAccountCircle from 'material-ui/svg-icons/action/account-circle' import SvgPeople from 'material-ui/svg-icons/social/people' // - Import app components -import Sidebar from 'Sidebar' -import Blog from 'Blog' -import HomeHeader from 'HomeHeader' -import SidebarContent from 'SidebarContent' -import SidebarMain from 'SidebarMain' -import Profile from 'Profile' -import PostPage from 'PostPage' -import People from 'People' +import Sidebar from 'components/sidebar' +import StreamComponent from 'components/stream' +import HomeHeader from 'components/homeHeader' +import SidebarContent from 'components/sidebarContent' +import SidebarMain from 'components/sidebarMain' +import Profile from 'components/profile' +import PostPage from 'components/postPage' +import People from 'components/people' // - Import API -import CircleAPI from 'CircleAPI' +import CircleAPI from 'api/CircleAPI' // - Import actions -import * as globalActions from 'globalActions' +import * as globalActions from 'actions/globalActions' +import { IHomeComponentProps } from './IHomeComponentProps' +import { IHomeComponentState } from './IHomeComponentState' // - Create Home component class -export class Home extends Component { +export class HomeComponent extends Component { // Constructor - constructor(props) { + constructor (props: IHomeComponentProps) { super(props) // Default state this.state = { sidebarOpen: () => _, sidebarStatus: true, - sidebaOverlay: false + sidebarOverlay: false } // Binding function to `this` @@ -57,37 +59,35 @@ export class Home extends Component { * handle close sidebar */ handleCloseSidebar = () => { - this.state.sidebarOpen(false, 'overlay') + this.state.sidebarOpen!(false, 'overlay') } /** * Change sidebar overlay status * @param {boolean} status if is true, the sidebar is on overlay status */ - sidebarOverlay = (status) => { + sidebarOverlay = (status: boolean) => { this.setState({ sidebarOverlay: status }) } - /** - * Pass function to change sidebar status + * Pass the function to change sidebar status * @param {boolean} open is a function callback to change sidebar status out of sidebar component */ - sidebar = (open) => { + sidebar = (open: (status: boolean, source: string) => void) => { this.setState({ sidebarOpen: open }) } - /** * Change sidebar status if is open or not * @param {boolean} status is true, if the sidebar is open */ - sidebarStatus = (status) => { + sidebarStatus = (status: boolean) => { this.setState({ sidebarStatus: status }) @@ -95,60 +95,59 @@ export class Home extends Component { /** * Render DOM component - * + * * @returns DOM - * + * * @memberof Home */ - render() { - + render () { return ( -
+
- + {this.state.sidebarOverlay - ?
Green} rightIcon={} />
- : "" + ?
Green} rightIcon={} />
+ : '' } - } /> - } /> - } /> + } /> + } /> + } /> - } /> - } /> + } /> + } /> - { + { return ( this.props.authed ? - : + : ) }} /> - { + { return ( this.props.authed - ?
- : + ?
+ : ) }} /> - - + + - { + { return ( this.props.authed - ?
- : + ?
+ : ) }} /> @@ -167,10 +166,9 @@ export class Home extends Component { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IHomeComponentProps) => { return { - } } @@ -180,15 +178,15 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IHomeComponentProps) => { const { uid } = state.authorize let mergedPosts = {} const circles = state.circle ? (state.circle.userCircles[uid] || {}) : {} const followingUsers = CircleAPI.getFollowingUsers(circles) const posts = state.post.userPosts ? state.post.userPosts[state.authorize.uid] : {} - Object.keys(followingUsers).forEach((userId)=>{ - let newPosts = state.post.userPosts ? state.post.userPosts[userId] : {} - _.merge(mergedPosts,newPosts) + Object.keys(followingUsers).forEach((userId) => { + let newPosts = state.post.userPosts ? state.post.userPosts[userId] : {} + _.merge(mergedPosts,newPosts) }) _.merge(mergedPosts,posts) return { @@ -199,4 +197,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home)) +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(HomeComponent as any)) diff --git a/src/components/home/IHomeComponentProps.ts b/src/components/home/IHomeComponentProps.ts new file mode 100644 index 0000000..be538ff --- /dev/null +++ b/src/components/home/IHomeComponentProps.ts @@ -0,0 +1,28 @@ +import { Post } from 'core/domain/posts' + +export interface IHomeComponentProps { + + /** + * Current user is authenticated {true} or not {false} + * + * @type {boolean} + * @memberof IHomeComponentProps + */ + authed?: boolean + + /** + * User identifier + * + * @type {string} + * @memberof IHomeComponentProps + */ + uid: string + + /** + * Merged all users posts to show in stream + * + * @type {{[postId: string]: Post}} + * @memberof IHomeComponentProps + */ + mergedPosts?: {[postId: string]: Post} +} diff --git a/src/components/home/IHomeComponentState.ts b/src/components/home/IHomeComponentState.ts new file mode 100644 index 0000000..83b6af1 --- /dev/null +++ b/src/components/home/IHomeComponentState.ts @@ -0,0 +1,27 @@ + +export interface IHomeComponentState { + + /** + * Change sidebar status to {open(status:true)/close(status:false)} + * + * @type {(status: boolean, state: string)} + * @memberof IHomeComponentState + */ + sidebarOpen: (status: boolean, source: string) => void + + /** + * Sidebar status + * + * @type {boolean} + * @memberof IHomeComponentState + */ + sidebarStatus: boolean + + /** + * Sidebar overlay status + * + * @type {boolean} + * @memberof IHomeComponentState + */ + sidebarOverlay: boolean +} diff --git a/src/components/home/index.ts b/src/components/home/index.ts new file mode 100644 index 0000000..d1dbfdf --- /dev/null +++ b/src/components/home/index.ts @@ -0,0 +1,2 @@ +import HomeComponent from './HomeComponent' +export default HomeComponent diff --git a/app/components/HomeHeader.jsx b/src/components/homeHeader/HomeHeaderComponent.tsx similarity index 62% rename from app/components/HomeHeader.jsx rename to src/components/homeHeader/HomeHeaderComponent.tsx index d908758..922ce7d 100644 --- a/app/components/HomeHeader.jsx +++ b/src/components/homeHeader/HomeHeaderComponent.tsx @@ -14,24 +14,43 @@ import Paper from 'material-ui/Paper' import NotificationsIcon from 'material-ui/svg-icons/social/notifications' import EventListener, { withOptions } from 'react-event-listener' - // - Import components -import UserAvatar from 'UserAvatar' -import Notify from 'Notify' - +import UserAvatarComponent from 'components/userAvatar' +import Notify from 'components/notify' // - Import actions -import * as globalActions from 'globalActions' -import * as authorizeActions from 'authorizeActions' +import * as globalActions from 'actions/globalActions' +import { authorizeActions } from 'actions' +import { IHomeHeaderComponentProps } from './IHomeHeaderComponentProps' +import { IHomeHeaderComponentState } from './IHomeHeaderComponentState' // - Create HomeHeader component class -export class HomeHeader extends Component { +export class HomeHeaderComponent extends Component { + + styles = { + toolbarStyle: { + backgroundColor: '', + transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms', + boxSizing: 'border-box', + fontFamily: 'Roboto, sans-serif', + position: 'fixed', + zIndex: '1101', + width: '100%', + top: '0px', + boxShadow: '0 1px 8px rgba(0,0,0,.3)' + }, + avatarStyle: { + margin: 5, + cursor: 'pointer' + } + + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: IHomeHeaderComponentProps) { super(props) // Default state @@ -56,12 +75,10 @@ export class HomeHeader extends Component { } - - /** - * Handle close notification menu - * - * + * Handle close notification menu + * + * * @memberof HomeHeader */ handleCloseNotify = () => { @@ -70,78 +87,80 @@ export class HomeHeader extends Component { }) } - // On click toggle sidebar onToggleSidebar = () => { if (this.props.sidebarStatus) { - this.props.sidebar(false) + this.props.sidebar!(false,'onToggle') } else { - this.props.sidebar(true) + this.props.sidebar!(true,'onToggle') } } /** - * Handle notification touch - * - * + * Handle notification touch + * + * * @memberof HomeHeader */ - handleNotifyTouchTap = (event) => { + handleNotifyTouchTap = (event: any) => { // This prevents ghost click. event.preventDefault() this.setState({ openNotifyMenu: true, - anchorEl: event.currentTarget, + anchorEl: event.currentTarget }) } /** * Handle touch on user avatar for popover - * - * + * + * * @memberof HomeHeader */ - handleAvatarTouchTap = (event) => { + handleAvatarTouchTap = (event: any) => { // This prevents ghost click. event.preventDefault() this.setState({ openAvatarMenu: true, - anchorEl: event.currentTarget, + anchorEl: event.currentTarget }) } /** * Handle logout user - * - * + * + * * @memberof HomeHeader */ handleLogout = () => { - this.props.logout() + this.props.logout!() } /** * Handle close popover - * - * + * + * * @memberof HomeHeader */ handleRequestClose = () => { this.setState({ - openAvatarMenu: false, + openAvatarMenu: false }) } + handleKeyUp = () => { + // TODO: Handle key up on press ESC to close menu + } /** * Handle resize event for window to manipulate home header status * @param {event} evt is the event is passed by winodw resize event */ - handleResize = (evt) => { + handleResize = (event: any) => { // Set initial state let width = window.innerWidth @@ -151,8 +170,7 @@ export class HomeHeader extends Component { showTitle: true }) - } - else if (width < 600 && this.state.showTitle) { + } else if (width < 600 && this.state.showTitle) { this.setState({ showTitle: false @@ -160,54 +178,30 @@ export class HomeHeader extends Component { } } - componentDidMount = () => { - this.handleResize() + componentDidMount () { + this.handleResize(null) } - // Render app DOM component - render() { - - /** - * Styles - */ - let styles = { - toolbarStyle: { - backgroundColor: "", - transition: "all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms", - boxSizing: "border-box", - fontFamily: "Roboto, sans-serif", - position: "fixed", - zIndex: "1101", - width: "100%", - top: "0px", - boxShadow: '0 1px 8px rgba(0,0,0,.3)' - }, - avatarStyle: { - margin: 5, - cursor: 'pointer' - } - - - } + render () { return ( - + {/* Left side */} - - + + {/* Header title */} - - {this.state.showTitle ?
{this.props.title}
: ''} + + {this.state.showTitle ?
{this.props.title}
: ''} @@ -215,26 +209,25 @@ export class HomeHeader extends Component { {/* Notification */} -
- {this.props.notifyCount > 0 ? ( -
+
+ {this.props.notifyCount! > 0 ? ( +
{this.props.notifyCount}
) - : ( + : ( )} - {/* User avatar*/} - - - + + @@ -254,26 +247,24 @@ export class HomeHeader extends Component { - - ) } } // - Map dispatch to props -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: Function, ownProps: IHomeHeaderComponentProps) => { return { logout: () => dispatch(authorizeActions.dbLogout()) } } // - Map state to props -const mapStateToProps = (state, ownProps) => { - - let notifyCount = state.notify.userNotifies +const mapStateToProps = (state: any, ownProps: IHomeHeaderComponentProps) => { + + let notifyCount = state.notify.userNotifies ? Object .keys(state.notify.userNotifies) - .filter((key)=> !state.notify.userNotifies[key].isSeen).length + .filter((key) => !state.notify.userNotifies[key].isSeen).length : 0 return { avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '', @@ -284,4 +275,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(HomeHeader) +export default connect(mapStateToProps, mapDispatchToProps)(HomeHeaderComponent as any) diff --git a/src/components/homeHeader/IHomeHeaderComponentProps.ts b/src/components/homeHeader/IHomeHeaderComponentProps.ts new file mode 100644 index 0000000..e9b3a86 --- /dev/null +++ b/src/components/homeHeader/IHomeHeaderComponentProps.ts @@ -0,0 +1,63 @@ +import StringAPI from 'api/StringAPI' +export interface IHomeHeaderComponentProps { + + /** + * Sidebar is open {true} or not {false} + * + * @type {boolean} + * @memberof IHomeHeaderComponentProps + */ + sidebarStatus?: boolean + + /** + * Logout user + * + * @memberof IHomeHeaderComponentProps + */ + logout?: () => void + + /** + * Handle on resize window event + * + * @memberof IHomeHeaderComponentProps + */ + handleResize?: (event: any) => void + + /** + * Number of notifications + * + * @memberof IHomeHeaderComponentProps + */ + notifyCount?: number + + /** + * User full name + * + * @type {string} + * @memberof IHomeHeaderComponentProps + */ + fullName?: string + + /** + * User's avatar URL address + * + * @type {string} + * @memberof IHomeHeaderComponentProps + */ + avatar?: string + + /** + * Top bar title + * + * @type {string} + * @memberof IHomeHeaderComponentProps + */ + title?: string + + /** + * Toggle sidebar + * + * @memberof IHomeHeaderComponentProps + */ + sidebar?: (status: boolean, source: string) => void +} diff --git a/src/components/homeHeader/IHomeHeaderComponentState.ts b/src/components/homeHeader/IHomeHeaderComponentState.ts new file mode 100644 index 0000000..6a98cf7 --- /dev/null +++ b/src/components/homeHeader/IHomeHeaderComponentState.ts @@ -0,0 +1,35 @@ + +export interface IHomeHeaderComponentState { + + /** + * Popover menu on avatar is open {true} or not {false} + * + * @type {boolean} + * @memberof IHomeHeaderComponentState + */ + openAvatarMenu: boolean + + /** + * Show top bar title {true} or not {false} + * + * @type {boolean} + * @memberof IHomeHeaderComponentState + */ + showTitle: boolean + + /** + * Notification menu is open {true} or not {false} + * + * @type {boolean} + * @memberof IHomeHeaderComponentState + */ + openNotifyMenu: boolean + + /** + * This is the DOM element that will be used to set the position of the popover. + * + * @type {*} + * @memberof IHomeHeaderComponentState + */ + anchorEl?: HTMLElement +} diff --git a/src/components/homeHeader/index.ts b/src/components/homeHeader/index.ts new file mode 100644 index 0000000..c837ab0 --- /dev/null +++ b/src/components/homeHeader/index.ts @@ -0,0 +1,2 @@ +import HomeHeaderComponent from './HomeHeaderComponent' +export default HomeHeaderComponent diff --git a/src/components/imageGallery/IImageGalleryComponentProps.ts b/src/components/imageGallery/IImageGalleryComponentProps.ts new file mode 100644 index 0000000..9bcaa32 --- /dev/null +++ b/src/components/imageGallery/IImageGalleryComponentProps.ts @@ -0,0 +1,48 @@ +import { Image } from 'core/domain/imageGallery' + +export interface IImageGalleryComponentProps { + + /** + * Select image from image gallery + * + * @type {(URL: string,fullPath: string)} + * @memberof IImageGalleryComponentProps + */ + set?: (URL: string,fullPath: string) => void + + /** + * Delete an image + * + * @memberof IImageGalleryComponentProps + */ + deleteImage?: (imageId: string) => void + + /** + * Save image in image gallery + * + * @memberof IImageGalleryComponentProps + */ + saveImageGallery?: (URL: string,fullPath: string) => void + + /** + * Change progress state + * + * @memberof IImageGalleryComponentProps + */ + progressChange?: (percentage: number, status: boolean) => void + + /** + * Close image gallery + * + * @memberof IImageGalleryComponentProps + */ + close?: () => void + + /** + * List of image in image gallery + * + * @type {Image[]} + * @memberof IImageGalleryComponentProps + */ + images?: Image[] +} diff --git a/src/components/imageGallery/IImageGalleryComponentState.ts b/src/components/imageGallery/IImageGalleryComponentState.ts new file mode 100644 index 0000000..c6a86b3 --- /dev/null +++ b/src/components/imageGallery/IImageGalleryComponentState.ts @@ -0,0 +1,4 @@ + +export interface IImageGalleryComponentState { + +} diff --git a/src/components/imageGallery/ImageGalleryComponent.tsx b/src/components/imageGallery/ImageGalleryComponent.tsx new file mode 100644 index 0000000..b7db79a --- /dev/null +++ b/src/components/imageGallery/ImageGalleryComponent.tsx @@ -0,0 +1,256 @@ +// - Impoer react components +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { GridList, GridTile } from 'material-ui/GridList' +import IconButton from 'material-ui/IconButton' +import Subheader from 'material-ui/Subheader' +import StarBorder from 'material-ui/svg-icons/toggle/star-border' +import FloatingActionButton from 'material-ui/FloatingActionButton' +import SvgUpload from 'material-ui/svg-icons/file/cloud-upload' +import SvgAddImage from 'material-ui/svg-icons/image/add-a-photo' +import SvgDelete from 'material-ui/svg-icons/action/delete' +import { grey200, grey600 } from 'material-ui/styles/colors' +import FlatButton from 'material-ui/FlatButton' +import uuid from 'uuid' + +// - Import actions +import * as imageGalleryActions from 'actions/imageGalleryActions' +import * as globalActions from 'actions/globalActions' + +// - Import app components +import Img from 'components/img' + +// - Import API +import FileAPI from 'api/FileAPI' +import { IImageGalleryComponentProps } from './IImageGalleryComponentProps' +import { IImageGalleryComponentState } from './IImageGalleryComponentState' +import { Image } from 'core/domain/imageGallery' + +/** + * Create ImageGallery component class + */ +export class ImageGalleryComponent extends Component { + + static propTypes = { + + /** + * Callback function to ser image url on parent component + */ + open: PropTypes.func + } + + styles = { + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around' + }, + gridList: { + width: 500, + height: 450, + overflowY: 'auto' + }, + uploadButton: { + verticalAlign: 'middle' + }, + uploadInput: { + cursor: 'pointer', + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + left: 0, + width: '100%', + opacity: 0 + }, + deleteImage: { + marginLeft: '5px', + cursor: 'pointer' + }, + addImage: { + marginRight: '5px', + cursor: 'pointer' + } + } + + /** + * Component constructor + * @param {object} props is an object properties of component + */ + constructor (props: IImageGalleryComponentProps) { + super(props) + + // Binding function to `this` + this.close = this.close.bind(this) + this.onFileChange = this.onFileChange.bind(this) + this.handleSetImage = this.handleSetImage.bind(this) + this.handleDeleteImage = this.handleDeleteImage.bind(this) + this.imageList = this.imageList.bind(this) + } + + /** + * Handle set image + * @param {event} evt passed by on click event on add image + * @param {string} name is the name of the image + */ + handleSetImage = (event: any, URL: string,fullPath: string) => { + this.props.set!(URL,fullPath) + this.close() + } + + /** + * Handle delete image + * @param {event} evt passed by on click event on delete image + * @param {integer} id is the image identifier which selected to delete + */ + handleDeleteImage = (event: any, id: string) => { + this.props.deleteImage!(id) + } + + componentDidMount () { + window.addEventListener('onSendResizedImage', this.handleSendResizedImage) + } + componentWillUnmount () { + window.removeEventListener('onSendResizedImage', this.handleSendResizedImage) + } + + /** + * Handle send image resize event that pass the resized image + * + * + * @memberof ImageGallery + */ + handleSendResizedImage = (event: any) => { + + const { resizedImage, fileName } = event.detail + const {saveImageGallery, progressChange} = this.props + + FileAPI.uploadImage(resizedImage, fileName, (percent: number, status: boolean) => { + progressChange!(percent,status) + }).then((result) => { + + /* Add image to image gallery */ + saveImageGallery!(result.downloadURL,result.metadata.fullPath) + + }) + } + + /** + * Handle on change file upload + */ + onFileChange = (event: any) => { + + const extension = FileAPI.getExtension(event.target.files[0].name) + let fileName = (`${uuid()}.${extension}`) + let image = FileAPI.constraintImage(event.target.files[0], fileName) + + } + + /** + * Hide image gallery + */ + close = () => { + this.props.close!() + } + + imageList = () => { + + return this.props.images!.map((image: Image, index) => { + + return ( this.handleDeleteImage(evt, image.id!)} />} + subtitle={} + actionIcon={ this.handleSetImage(evt, image.URL,image.fullPath)} />} + > +
+
+
    +
    +
    +
  • + + +
    • +
    +
    + +
+
+
+ ) + }) + } + + /** + * When the post text changed + * @param {event} evt is an event passed by change post text callback funciton + * @param {string} data is the post content which user writes + */ + render () { + + /** + * Component styles + * @type {Object} + */ + + return ( +
+ + + +
+ + + + +
+ + {this.imageList()} + +
+ ) + } +} + +/** + * Map dispatch to props + * @param {func} dispatch is the function to dispatch action to reducers + * @param {object} ownProps is the props belong to component + * @return {object} props of component + */ +const mapDispatchToProps = (dispatch: any, ownProps: IImageGalleryComponentProps) => { + return { + saveImageGallery: (imageURL: string,imageFullPath: string) => dispatch(imageGalleryActions.dbSaveImage(imageURL,imageFullPath)), + deleteImage: (id: string) => dispatch(imageGalleryActions.dbDeleteImage(id)), + progressChange : (percent: number,status: boolean) => dispatch(globalActions.progressChange(percent, status)) + + } +} + +/** + * Map state to props + * @param {object} state is the obeject from redux store + * @param {object} ownProps is the props belong to component + * @return {object} props of component + */ +const mapStateToProps = (state: any) => { + return { + images: state.imageGallery.images, + avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '' + + } +} + +// - Connect component to redux store +export default connect(mapStateToProps, mapDispatchToProps)(ImageGalleryComponent as any) diff --git a/src/components/imageGallery/index.ts b/src/components/imageGallery/index.ts new file mode 100644 index 0000000..64d5b2d --- /dev/null +++ b/src/components/imageGallery/index.ts @@ -0,0 +1,2 @@ +import ImageGalleryComponent from './ImageGalleryComponent' +export default ImageGalleryComponent diff --git a/src/components/img/IImgComponentProps.ts b/src/components/img/IImgComponentProps.ts new file mode 100644 index 0000000..5c051ed --- /dev/null +++ b/src/components/img/IImgComponentProps.ts @@ -0,0 +1,19 @@ +export interface IImgComponentProps { + + /** + * Image file name + * + * @type {string} + * @memberof IImgComponentProps + */ + fileName: string + + /** + * Image style sheet + * + * @type {{}} + * @memberof IImgComponentProps + */ + style?: {} + +} diff --git a/src/components/img/IImgComponentState.ts b/src/components/img/IImgComponentState.ts new file mode 100644 index 0000000..fbabbb5 --- /dev/null +++ b/src/components/img/IImgComponentState.ts @@ -0,0 +1,11 @@ + +export interface IImgComponentState { + + /** + * Image is loaded {true} or not {false} + * + * @type {boolean} + * @memberof IImgComponentProps + */ + isImageLoaded?: boolean +} diff --git a/app/components/Img.jsx b/src/components/img/ImgComponent.tsx similarity index 58% rename from app/components/Img.jsx rename to src/components/img/ImgComponent.tsx index 1c06555..d4e2d3e 100644 --- a/app/components/Img.jsx +++ b/src/components/img/ImgComponent.tsx @@ -4,40 +4,51 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import SvgImage from 'material-ui/svg-icons/image/image' - // - Import app components - // - Import API // - Import actions -import * as imageGalleryActions from 'imageGalleryActions' +import * as imageGalleryActions from 'actions/imageGalleryActions' +import { IImgComponentProps } from './IImgComponentProps' +import { IImgComponentState } from './IImgComponentState' /** * Create component class */ -export class Img extends Component { +export class ImgComponent extends Component { - static propTypes = { - - /** - * Use for getting url address from server - */ - fileName: PropTypes.string, - /** - * Avatar style - */ - style: PropTypes.object + styles = { + loding: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100px', + position: 'relative', + color: '#cacecd', + fontWeight: 100 + }, + loadingContent: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center' + }, + loadingImage: { + fill: 'aliceblue', + width: '50px', + height: '50px' + } } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: IImgComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { isImageLoaded: false } @@ -49,7 +60,7 @@ export class Img extends Component { /** * Will be called on loading image - * + * * @memberof Img */ handleLoadImage = () => { @@ -62,38 +73,16 @@ export class Img extends Component { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - const styles = { - loding: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '100px', - position: 'relative', - color: '#cacecd', - fontWeight: 100 - }, - loadingContent: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center' - }, - loadingImage: { - fill: 'aliceblue', - width: '50px', - height: '50px' - } - } + render () { let { fileName, style } = this.props let { isImageLoaded } = this.state return (
-
-
- +
+
+
Image has not loaded
@@ -102,17 +91,15 @@ export class Img extends Component { } } - - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IImgComponentProps) => { return { - + } } @@ -122,7 +109,7 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IImgComponentProps) => { return { avatarURL: state.imageGallery.imageURLList, imageRequests: state.imageGallery.imageRequests @@ -130,4 +117,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(Img) +export default connect(mapStateToProps, mapDispatchToProps)(ImgComponent as any) diff --git a/src/components/img/index.ts b/src/components/img/index.ts new file mode 100644 index 0000000..cac7195 --- /dev/null +++ b/src/components/img/index.ts @@ -0,0 +1,2 @@ +import ImgComponent from './ImgComponent' +export default ImgComponent diff --git a/src/components/imgCover/IImgCoverComponentProps.ts b/src/components/imgCover/IImgCoverComponentProps.ts new file mode 100644 index 0000000..c69a5ef --- /dev/null +++ b/src/components/imgCover/IImgCoverComponentProps.ts @@ -0,0 +1,42 @@ +export interface IImgCoverComponentProps { + + /** + * Image file name + * + * @type {string} + * @memberof IImgCoverComponentProps + */ + fileName: string + + /** + * Image style sheet + * + * @type {{}} + * @memberof IImgCoverComponentProps + */ + style?: {} + + /** + * Image with + * + * @type {string} + * @memberof IImgCoverComponentProps + */ + width?: string + + /** + * Image height + * + * @type {string} + * @memberof IImgCoverComponentProps + */ + height?: string + + /** + * Image border radius + * + * @type {string} + * @memberof IImgCoverComponentProps + */ + borderRadius?: string +} diff --git a/src/components/imgCover/IImgCoverComponentState.ts b/src/components/imgCover/IImgCoverComponentState.ts new file mode 100644 index 0000000..7523517 --- /dev/null +++ b/src/components/imgCover/IImgCoverComponentState.ts @@ -0,0 +1,12 @@ + +export interface IImgCoverComponentState { + + /** + * Image is loaded {true} or not {false} + * + * @type {boolean} + * @memberof IImgCoverComponentProps + */ + isImageLoaded: boolean + +} diff --git a/app/components/ImgCover.jsx b/src/components/imgCover/ImgCoverComponent.tsx similarity index 58% rename from app/components/ImgCover.jsx rename to src/components/imgCover/ImgCoverComponent.tsx index 8b2575e..250bd81 100644 --- a/app/components/ImgCover.jsx +++ b/src/components/imgCover/ImgCoverComponent.tsx @@ -6,17 +6,17 @@ import SvgImage from 'material-ui/svg-icons/image/image' // - Import app components - // - Import API // - Import actions -import * as imageGalleryActions from 'imageGalleryActions' - +import * as imageGalleryActions from 'actions/imageGalleryActions' +import { IImgCoverComponentProps } from './IImgCoverComponentProps' +import { IImgCoverComponentState } from './IImgCoverComponentState' /** * Create component class */ -export class ImgCover extends Component { +export class ImgCoverComponent extends Component { static propTypes = { @@ -47,14 +47,42 @@ export class ImgCover extends Component { ]) } + styles = { + cover: { + backgroundSize: 'cover', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center' + }, + loding: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100px', + position: 'relative', + color: '#cacecd', + fontWeight: 100 + }, + loadingContent: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center' + }, + loadingImage: { + fill: 'aliceblue', + width: '50px', + height: '50px' + } + } + /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: IImgCoverComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { isImageLoaded: false } @@ -65,8 +93,8 @@ export class ImgCover extends Component { /** * Will be called on loading image - * - * @memberof Img + * + * @memberof ImgCoverComponent */ handleLoadImage = () => { this.setState({ @@ -78,54 +106,24 @@ export class ImgCover extends Component { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { let { fileName, style } = this.props let { isImageLoaded } = this.state - /** - * Styles - */ - const styles = { - cover: { - backgroundImage: 'url(' + (fileName || '') + ')', - backgroundSize: 'cover', - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - width: this.props.width, - height: this.props.height, - borderRadius: this.props.borderRadius - - }, - loding: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '100px', - position: 'relative', - color: '#cacecd', - fontWeight: 100 - }, - loadingContent: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center' - }, - loadingImage: { - fill: 'aliceblue', - width: '50px', - height: '50px' - } - } return (
-
+
{this.props.children}
-
-
- +
+
+
Image has not loaded
@@ -135,15 +133,13 @@ export class ImgCover extends Component { } } - - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IImgCoverComponentProps) => { return { } } @@ -154,7 +150,7 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IImgCoverComponentProps) => { return { avatarURL: state.imageGallery.imageURLList, imageRequests: state.imageGallery.imageRequests @@ -163,4 +159,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(ImgCover) +export default connect(mapStateToProps, mapDispatchToProps)(ImgCoverComponent as any) diff --git a/src/components/imgCover/index.ts b/src/components/imgCover/index.ts new file mode 100644 index 0000000..43150fe --- /dev/null +++ b/src/components/imgCover/index.ts @@ -0,0 +1,2 @@ +import ImgCoverComponent from './ImgCoverComponent' +export default ImgCoverComponent diff --git a/src/components/login/ILoginComponentProps.ts b/src/components/login/ILoginComponentProps.ts new file mode 100644 index 0000000..1f96a7a --- /dev/null +++ b/src/components/login/ILoginComponentProps.ts @@ -0,0 +1,16 @@ +export interface ILoginComponentProps { + + /** + * Login a user + * + * @memberof ILoginComponentProps + */ + login?: (email: string , password: string) => any + + /** + * Redirect to signup page + * + * @memberof ILoginComponentProps + */ + signupPage?: () => any +} diff --git a/src/components/login/ILoginComponentState.ts b/src/components/login/ILoginComponentState.ts new file mode 100644 index 0000000..e2a3297 --- /dev/null +++ b/src/components/login/ILoginComponentState.ts @@ -0,0 +1,43 @@ + +export interface ILoginComponentState { + + /** + * Email input value + * + * @type {string} + * @memberof ILoginComponentState + */ + emailInput: string + + /** + * Email input error text + * + * @type {string} + * @memberof ILoginComponentState + */ + emailInputError: string + + /** + * Password input value + * + * @type {string} + * @memberof ILoginComponentState + */ + passwordInput: string + + /** + * Password input error text + * + * @type {string} + * @memberof ILoginComponentState + */ + passwordInputError: string + + /** + * Confirm input error text + * + * @type {string} + * @memberof ILoginComponentState + */ + confirmInputError: string +} diff --git a/app/components/Login.jsx b/src/components/login/LoginComponent.tsx similarity index 66% rename from app/components/Login.jsx rename to src/components/login/LoginComponent.tsx index 2b47192..0dc9b12 100644 --- a/app/components/Login.jsx +++ b/src/components/login/LoginComponent.tsx @@ -9,17 +9,18 @@ import RaisedButton from 'material-ui/RaisedButton' import FlatButton from 'material-ui/FlatButton' // - Import actions -import * as authorizeActions from 'authorizeActions' - +import * as authorizeActions from 'actions/authorizeActions' +import { ILoginComponentProps } from './ILoginComponentProps' +import { ILoginComponentState } from './ILoginComponentState' // - Create Login component class -export class Login extends Component { +export class LoginComponent extends Component { /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: ILoginComponentProps) { super(props) this.state = { @@ -27,8 +28,7 @@ export class Login extends Component { emailInputError: '', passwordInput: '', passwordInputError: '', - - + confirmInputError: '' } // Binding function to `this` this.handleForm = this.handleForm.bind(this) @@ -39,15 +39,14 @@ export class Login extends Component { * Handle data on input change * @param {event} evt is an event of inputs of element on change */ - handleInputChange = (evt) => { - const target = evt.target + handleInputChange = (event: any) => { + const target = event.target const value = target.type === 'checkbox' ? target.checked : target.value const name = target.name this.setState({ [name]: value }) - switch (name) { case 'emailInput': this.setState({ @@ -88,7 +87,7 @@ export class Login extends Component { } if (!error) { - this.props.login( + this.props.login!( this.state.emailInput, this.state.passwordInput ) @@ -96,48 +95,46 @@ export class Login extends Component { } - /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { const paperStyle = { minHeight: 370, width: 450, - margin: 20, textAlign: 'center', display: 'block', - margin: "auto" + margin: 'auto' } return (

Green

-
+
-
+

Sign in

@@ -145,29 +142,29 @@ export class Login extends Component {



-
+
- +
- +
@@ -185,13 +182,13 @@ export class Login extends Component { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: ILoginComponentProps) => { return { - login: (username, password) => { - dispatch(authorizeActions.dbLogin(username, password)) + login: (email: string, password: string) => { + dispatch(authorizeActions.dbLogin(email, password)) }, signupPage: () => { - dispatch(push("/signup")) + dispatch(push('/signup')) } } } @@ -202,11 +199,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: ILoginComponentProps) => { return { } } // - Connect component to redux store -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login)) +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LoginComponent as any)) diff --git a/src/components/login/index.ts b/src/components/login/index.ts new file mode 100644 index 0000000..0b3ed2c --- /dev/null +++ b/src/components/login/index.ts @@ -0,0 +1,2 @@ +import LoginComponent from './LoginComponent' +export default LoginComponent diff --git a/app/components/Master/IMasterProps.ts b/src/components/master/IMasterComponentProps.ts similarity index 97% rename from app/components/Master/IMasterProps.ts rename to src/components/master/IMasterComponentProps.ts index 94b5fd3..07f4526 100644 --- a/app/components/Master/IMasterProps.ts +++ b/src/components/master/IMasterComponentProps.ts @@ -1,4 +1,4 @@ -export interface IMasterProps { +export interface IMasterComponentProps { /** * Close gloal message * diff --git a/app/components/Master/IMasterState.ts b/src/components/master/IMasterComponentState.ts similarity index 64% rename from app/components/Master/IMasterState.ts rename to src/components/master/IMasterComponentState.ts index b9c2546..49ce40c 100644 --- a/app/components/Master/IMasterState.ts +++ b/src/components/master/IMasterComponentState.ts @@ -1,24 +1,24 @@ -export interface IMasterState { +export interface IMasterComponentState { /** * Loding will be appeared if it's true * - * @type {Boolean} + * @type {boolean} * @memberof IMasterState */ - loading: Boolean, + loading: boolean, /** * It's true if user is authorized * - * @type {Boolean} + * @type {boolean} * @memberof IMasterState */ - authed: Boolean + authed: boolean /** * It's true if all default data loaded from database * - * @type {Boolean} + * @type {boolean} * @memberof IMasterState */ - dataLoaded: Boolean + dataLoaded: boolean } diff --git a/app/components/Master/Master.tsx b/src/components/master/MasterComponent.tsx similarity index 86% rename from app/components/Master/Master.tsx rename to src/components/master/MasterComponent.tsx index 26227c6..a75ec50 100644 --- a/app/components/Master/Master.tsx +++ b/src/components/master/MasterComponent.tsx @@ -3,22 +3,19 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { Route, Switch, NavLink, withRouter, Redirect } from 'react-router-dom' -import { firebaseAuth, firebaseRef } from 'app/firebaseClient' +import { firebaseAuth, firebaseRef } from 'data/firebaseClient' import { push } from 'react-router-redux' import Snackbar from 'material-ui/Snackbar' import LinearProgress from 'material-ui/LinearProgress' // - Import components -import Home from 'components/Home' -import Signup from 'components/Signup' -import Login from 'components/Login' -import Settings from 'components/Settings' -import MasterLoading from 'components/MasterLoading' -import { IMasterProps } from './IMasterProps' -import { IMasterState } from './IMasterState' - -// - Import API -import { PrivateRoute, PublicRoute } from 'api/AuthRouterAPI' +import Home from 'components/home' +import Signup from 'components/signup' +import Login from 'components/login' +import Setting from 'components/setting' +import MasterLoading from 'components/masterLoading' +import { IMasterComponentProps } from './IMasterComponentProps' +import { IMasterComponentState } from './IMasterComponentState' // - Import actions import { @@ -36,11 +33,11 @@ import { /* ------------------------------------ */ // - Create Master component class -export class Master extends Component { +export class MasterComponent extends Component { static isPrivate = true // Constructor - constructor (props: IMasterProps) { + constructor (props: IMasterComponentProps) { super(props) this.state = { loading: true, @@ -68,8 +65,9 @@ export class Master extends Component { } componentDidCatch (error: any, info: any) { - console.log('====================================') + console.log('===========Catched by React componentDidCatch==============') console.log(error, info) + alert({error, info}) console.log('====================================') } @@ -127,7 +125,7 @@ export class Master extends Component { {(!this.state.loading && (this.props.loaded || this.props.guest)) ? ( - + { console.log('this.props.authed: ', this.props.authed, 'this.props: ', this.props) return ( @@ -154,7 +152,7 @@ export class Master extends Component { } // - Map dispatch to props -const mapDispatchToProps = (dispatch: any, ownProps: any) => { +const mapDispatchToProps = (dispatch: any, ownProps: IMasterComponentProps) => { return { loadData: () => { @@ -175,6 +173,7 @@ const mapDispatchToProps = (dispatch: any, ownProps: any) => { dispatch(voteActions.clearAllvotes()) dispatch(notifyActions.clearAllNotifications()) dispatch(circleActions.clearAllCircles()) + dispatch(globalActions.clearTemp()) }, login: (user: any) => { @@ -216,4 +215,4 @@ const mapStateToProps = (state: any) => { } // - Connect commponent to redux store -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Master as any)) +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MasterComponent as any)) diff --git a/src/components/master/index.ts b/src/components/master/index.ts new file mode 100644 index 0000000..dd5b121 --- /dev/null +++ b/src/components/master/index.ts @@ -0,0 +1,2 @@ +import MasterComponent from './MasterComponent' +export default MasterComponent diff --git a/src/components/masterLoading/IMasterLoadingComponentProps.ts b/src/components/masterLoading/IMasterLoadingComponentProps.ts new file mode 100644 index 0000000..824d25e --- /dev/null +++ b/src/components/masterLoading/IMasterLoadingComponentProps.ts @@ -0,0 +1,12 @@ +export interface IMasterLoadingComponentProps { + + /** + * Loading is active {true} or not {false} + * + * @type {boolean} + * @memberof IMasterLoadingComponentProps + */ + activeLoading: boolean + + handleLoading: (status: boolean) => void +} diff --git a/src/components/masterLoading/IMasterLoadingComponentState.ts b/src/components/masterLoading/IMasterLoadingComponentState.ts new file mode 100644 index 0000000..b33f8cb --- /dev/null +++ b/src/components/masterLoading/IMasterLoadingComponentState.ts @@ -0,0 +1,4 @@ + +export interface IMasterLoadingComponentState { + +} diff --git a/src/components/masterLoading/MasterLoadingComponent.tsx b/src/components/masterLoading/MasterLoadingComponent.tsx new file mode 100644 index 0000000..f3f9529 --- /dev/null +++ b/src/components/masterLoading/MasterLoadingComponent.tsx @@ -0,0 +1,47 @@ +// - Import react components +import React, { Component } from 'react' +import CircularProgress from 'material-ui/CircularProgress' +import Dialog from 'material-ui/Dialog' +import { IMasterLoadingComponentProps } from './IMasterLoadingComponentProps' +import { IMasterLoadingComponentState } from './IMasterLoadingComponentState' + +// - Import app components + +// - Create MasterLoading component class +export default class MasterLoadingComponent extends Component { + + // Constructor + constructor (props: IMasterLoadingComponentProps) { + super(props) + // Binding functions to `this` + + } + + // Render app DOM component + render () { + return ( + + +
+
+ + +

Green

+ +
+
+ + + + ) + } + +} diff --git a/src/components/masterLoading/index.ts b/src/components/masterLoading/index.ts new file mode 100644 index 0000000..ea0bafd --- /dev/null +++ b/src/components/masterLoading/index.ts @@ -0,0 +1,2 @@ +import MasterLoadingComponent from './MasterLoadingComponent' +export default MasterLoadingComponent diff --git a/src/components/notify/INotifyComponentProps.ts b/src/components/notify/INotifyComponentProps.ts new file mode 100644 index 0000000..ed56d94 --- /dev/null +++ b/src/components/notify/INotifyComponentProps.ts @@ -0,0 +1,45 @@ +import { Profile } from 'core/domain/users' +import { Notification } from 'core/domain/notifications' + +export interface INotifyComponentProps { + + /** + * Notifications + * + * @type {{[notificationId: string]: Notification}} + * @memberof INotifyComponentProps + */ + notifications?: {[notificationId: string]: Notification} + + /** + * Users' profile + * + * @type {{[userId: string]: Profile}} + * @memberof INotifyComponentProps + */ + info?: {[userId: string]: Profile} + + /** + * Close notification + * + * @memberof INotifyComponentProps + */ + onRequestClose: () => void + + /** + * User notifications popover is opem {true} or not {false} + * + * @type {boolean} + * @memberof INotifyComponentProps + */ + open: boolean + + /** + * Keep element + * + * @type {*} + * @memberof INotifyComponentProps + */ + anchorEl: any + +} diff --git a/src/components/notify/INotifyComponentState.ts b/src/components/notify/INotifyComponentState.ts new file mode 100644 index 0000000..19eeace --- /dev/null +++ b/src/components/notify/INotifyComponentState.ts @@ -0,0 +1,4 @@ + +export interface INotifyComponentState { + +} diff --git a/app/components/Notify.jsx b/src/components/notify/NotifyComponent.tsx similarity index 68% rename from app/components/Notify.jsx rename to src/components/notify/NotifyComponent.tsx index 2262383..fb2d603 100644 --- a/app/components/Notify.jsx +++ b/src/components/notify/NotifyComponent.tsx @@ -5,16 +5,20 @@ import { connect } from 'react-redux' import Popover, { PopoverAnimationVertical } from 'material-ui/Popover' // - Import app components -import NotifyItem from 'NotifyItem' +import NotifyItem from 'components/notifyItem' // - Import API // - Import actions -import * as userActions from 'userActions' +import * as userActions from 'actions/userActions' + +import { INotifyComponentProps } from './INotifyComponentProps' +import { INotifyComponentState } from './INotifyComponentState' +import { Notification } from 'core/domain/notifications' /** * Create component class */ -export class Notify extends Component { +export class NotifyComponent extends Component { static propTypes = { /** @@ -26,7 +30,7 @@ export class Notify extends Component { */ anchorEl: PropTypes.any, /** - * Fire to close notificaion + * Fire to close notificaion */ onRequestClose: PropTypes.func, /** @@ -36,39 +40,36 @@ export class Notify extends Component { } - - /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: INotifyComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { } // Binding functions to `this` - } notifyItemList = () => { let { notifications, info, onRequestClose } = this.props - let parsedDOM = [] + let parsedDOM: any[] = [] if (notifications) { Object.keys(notifications).forEach((key) => { - const {notifierUserId} = notifications[key] + const {notifierUserId} = notifications![key] parsedDOM.push( @@ -78,13 +79,11 @@ export class Notify extends Component { return parsedDOM } - - /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { let { open, anchorEl, onRequestClose } = this.props return ( @@ -108,15 +107,13 @@ export class Notify extends Component { } } - - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: INotifyComponentProps) => { return { } @@ -128,7 +125,7 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: INotifyComponentProps) => { return { notifications: state.notify.userNotifies, info: state.user.info @@ -136,4 +133,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(Notify) +export default connect(mapStateToProps, mapDispatchToProps)(NotifyComponent as any) diff --git a/src/components/notify/index.ts b/src/components/notify/index.ts new file mode 100644 index 0000000..c962192 --- /dev/null +++ b/src/components/notify/index.ts @@ -0,0 +1,2 @@ +import NotifyComponent from './NotifyComponent' +export default NotifyComponent diff --git a/src/components/notifyItem/INotifyItemComponentProps.ts b/src/components/notifyItem/INotifyItemComponentProps.ts new file mode 100644 index 0000000..b9262f2 --- /dev/null +++ b/src/components/notifyItem/INotifyItemComponentProps.ts @@ -0,0 +1,86 @@ +export interface INotifyItemComponentProps { + + /** + * Notification description + * + * @type {string} + * @memberof INotifyItemComponentProps + */ + description: string + + /** + * User full name + * + * @type {string} + * @memberof INotifyItemComponentProps + */ + fullName: string + + /** + * User avatar + * + * @type {string} + * @memberof INotifyItemComponentProps + */ + avatar: string + + /** + * Notification has seen {true} or not {false} + * + * @type {boolean} + * @memberof INotifyItemComponentProps + */ + isSeen: boolean + + /** + * Notification identifier + * + * @type {string} + * @memberof INotifyItemComponentProps + */ + id: string + + /** + * Rediret to {url} route + * + * @memberof INotifyItemComponentProps + */ + goTo?: (url: string) => any + + /** + * Close a notification + * + * @memberof INotifyItemComponentProps + */ + closeNotify?: () => void + + /** + * Notifier identifier + * + * @type {string} + * @memberof INotifyItemComponentProps + */ + notifierUserId: string + + /** + * The URL which notification mention + * + * @type {string} + * @memberof INotifyItemComponentProps + */ + url: string + + /** + * Delete a notification + * + * @memberof INotifyItemComponentProps + */ + deleteNotiy?: (notificationId: string) => any + + /** + * Change notification status to has seen + * + * @memberof INotifyItemComponentProps + */ + seenNotify?: (notificationId: string) => any +} diff --git a/src/components/notifyItem/INotifyItemComponentState.ts b/src/components/notifyItem/INotifyItemComponentState.ts new file mode 100644 index 0000000..9a1fab2 --- /dev/null +++ b/src/components/notifyItem/INotifyItemComponentState.ts @@ -0,0 +1,4 @@ + +export interface INotifyItemComponentState { + +} diff --git a/app/components/NotifyItem.jsx b/src/components/notifyItem/NotifyItemComponent.tsx similarity index 61% rename from app/components/NotifyItem.jsx rename to src/components/notifyItem/NotifyItemComponent.tsx index 585e89c..00da84b 100644 --- a/app/components/NotifyItem.jsx +++ b/src/components/notifyItem/NotifyItemComponent.tsx @@ -8,97 +8,100 @@ import SvgClose from 'material-ui/svg-icons/navigation/close' import { grey400 } from 'material-ui/styles/colors' // - Import app components -import UserAvatar from 'UserAvatar' +import UserAvatar from 'components/userAvatar' // - Import API // - Import actions -import * as notifyActions from 'notifyActions' +import * as notifyActions from 'actions/notifyActions' + +import { INotifyItemComponentProps } from './INotifyItemComponentProps' +import { INotifyItemComponentState } from './INotifyItemComponentState' /** * Create component class */ -export class NotifyItem extends Component { +export class NotifyItemComponent extends Component { - static propTypes = { + static propTypes = { /** * Notification description */ - description: PropTypes.string, + description: PropTypes.string, /** * Which user relates to the notification item */ - fullName: PropTypes.string, + fullName: PropTypes.string, /** * Avatar of the user who relate to the notification item */ - avatar: PropTypes.string, + avatar: PropTypes.string, /** * Notification identifier */ - id: PropTypes.string, + id: PropTypes.string, /** * If user's seen the notification or not (true/false) */ - isSeen: PropTypes.bool, + isSeen: PropTypes.bool, /** * Which address notification refers */ - url: PropTypes.string, + url: PropTypes.string, /** * The notifier user identifier */ - notifierUserId: PropTypes.string, + notifierUserId: PropTypes.string, /** * Close notification popover */ - closeNotify: PropTypes.func - } + closeNotify: PropTypes.func + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { - super(props) + constructor (props: INotifyItemComponentProps) { + super(props) - //Defaul state - this.state = { - } + // Defaul state + this.state = { + } // Binding functions to `this` - this.handleSeenNotify = this.handleSeenNotify.bind(this) - } + this.handleSeenNotify = this.handleSeenNotify.bind(this) + } - handleSeenNotify = (evt) => { - evt.preventDefault() - const { seenNotify, id, url, goTo, isSeen, closeNotify } = this.props - if (id) { - if (!isSeen) - seenNotify(id) - - closeNotify() - goTo(url) - } + handleSeenNotify = (event: any) => { + event.preventDefault() + const { seenNotify, id, url, goTo, isSeen, closeNotify } = this.props + if (id) { + if (!isSeen) { + seenNotify!(id) + } + closeNotify!() + goTo!(url) } + } /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - let { description, fullName, avatar, isSeen, id, goTo,closeNotify, notifierUserId, url, deleteNotiy } = this.props + render () { + let { description, fullName, avatar, isSeen, id, goTo,closeNotify, notifierUserId, url, deleteNotiy } = this.props - return ( + return (
{ - evt.preventDefault() - closeNotify() - goTo(`/${notifierUserId}`) + evt.preventDefault() + closeNotify!() + goTo!(`/${notifierUserId}`) }} > @@ -114,29 +117,27 @@ export class NotifyItem extends Component {
-
deleteNotiy(id)}> +
deleteNotiy!(id)}>
- ) - } + ) + } } - - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { - return { - goTo: (url) => dispatch(push(url)), - seenNotify: (id) => dispatch(notifyActions.dbSeenNotification(id)), - deleteNotiy: (id) => dispatch(notifyActions.dbDeleteNotification(id)) - } +const mapDispatchToProps = (dispatch: any, ownProps: INotifyItemComponentProps) => { + return { + goTo: (url: string) => dispatch(push(url)), + seenNotify: (id: string) => dispatch(notifyActions.dbSeenNotification(id)), + deleteNotiy: (id: string) => dispatch(notifyActions.dbDeleteNotification(id)) + } } /** @@ -145,11 +146,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { - return { +const mapStateToProps = (state: any, ownProps: INotifyItemComponentProps) => { + return { - } + } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(NotifyItem) +export default connect(mapStateToProps, mapDispatchToProps)(NotifyItemComponent as any) diff --git a/src/components/notifyItem/index.ts b/src/components/notifyItem/index.ts new file mode 100644 index 0000000..35c3d94 --- /dev/null +++ b/src/components/notifyItem/index.ts @@ -0,0 +1,2 @@ +import NotifyItemComponent from './NotifyItemComponent' +export default NotifyItemComponent diff --git a/src/components/people/IPeopleComponentProps.ts b/src/components/people/IPeopleComponentProps.ts new file mode 100644 index 0000000..48cec31 --- /dev/null +++ b/src/components/people/IPeopleComponentProps.ts @@ -0,0 +1,32 @@ +export interface IPeopleComponentProps { + + /** + * Router match + * + * @type {*} + * @memberof IPeopleComponentProps + */ + match?: any + + /** + * Circles loaded {true} or not {false} + * + * @type {boolean} + * @memberof IPeopleComponentProps + */ + circlesLoaded?: boolean + + /** + * Rediret to another route + * + * @memberof IPeopleComponentProps + */ + goTo?: (url: string) => any + + /** + * Set title of top bar + * + * @memberof IPeopleComponentProps + */ + setHeaderTitle?: (title: string) => any +} diff --git a/src/components/people/IPeopleComponentState.ts b/src/components/people/IPeopleComponentState.ts new file mode 100644 index 0000000..4f1c4ba --- /dev/null +++ b/src/components/people/IPeopleComponentState.ts @@ -0,0 +1,4 @@ + +export interface IPeopleComponentState { + +} diff --git a/app/components/People.jsx b/src/components/people/PeopleComponent.tsx similarity index 57% rename from app/components/People.jsx rename to src/components/people/PeopleComponent.tsx index 1dbaefb..fdd6e43 100644 --- a/app/components/People.jsx +++ b/src/components/people/PeopleComponent.tsx @@ -1,31 +1,30 @@ // - Import react components import React, { Component } from 'react' import { connect } from 'react-redux' -import {withRouter} from 'react-router-dom' +import { withRouter } from 'react-router-dom' import PropTypes from 'prop-types' import { Tabs, Tab } from 'material-ui/Tabs' import { grey50, grey200, grey400, grey600, cyan500 } from 'material-ui/styles/colors' -import {push} from 'react-router-redux' - +import { push } from 'react-router-redux' // - Import app components -import FindPeople from 'FindPeople' -import Following from 'Following' -import Followers from 'Followers' -import YourCircles from 'YourCircles' - +import FindPeople from 'components/findPeople' +import Following from 'components/following' +import Followers from 'components/followers' +import YourCircles from 'components/yourCircles' // - Import API - // - Import actions -import * as circleActions from 'circleActions' -import * as globalActions from 'globalActions' +import * as circleActions from 'actions/circleActions' +import * as globalActions from 'actions/globalActions' +import { IPeopleComponentProps } from './IPeopleComponentProps' +import { IPeopleComponentState } from './IPeopleComponentState' /** -* Create component class + * Create component class */ -export class People extends Component { +export class PeopleComponent extends Component { static propTypes = { @@ -35,10 +34,10 @@ export class People extends Component { * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: IPeopleComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { } @@ -47,18 +46,19 @@ export class People extends Component { } - componentWillMount() { - const {tab} = this.props.match.params + componentWillMount () { + const { setHeaderTitle} = this.props + const {tab} = this.props.match.params switch (tab) { case undefined: case '': - this.props.setHeaderTitle('People') + setHeaderTitle!('People') break case 'circles': - this.props.setHeaderTitle('Circles') + setHeaderTitle!('Circles') break case 'followers': - this.props.setHeaderTitle('Followers') + setHeaderTitle!('Followers') break default: break @@ -66,13 +66,12 @@ export class People extends Component { } - /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - /** + render () { + /** * Component styles */ const styles = { @@ -84,14 +83,14 @@ export class People extends Component { fontSize: 24, paddingTop: 16, marginBottom: 12, - fontWeight: 400, + fontWeight: 400 }, slide: { - padding: 10, + padding: 10 } } - const {circlesLoaded} = this.props + const {circlesLoaded, goTo, setHeaderTitle} = this.props const {tab} = this.props.match.params let tabIndex = 0 switch (tab) { @@ -111,23 +110,23 @@ export class People extends Component { return (
- { - this.props.goTo('/people') - this.props.setHeaderTitle('People') - }} > + { + goTo!('/people') + setHeaderTitle!('People') + }} > {circlesLoaded ? : ''} - { - this.props.goTo('/people/circles') - this.props.setHeaderTitle('Circles') - }} > + { + goTo!('/people/circles') + setHeaderTitle!('Circles') + }} > {circlesLoaded ? : ''} - {circlesLoaded ? : ''} + {circlesLoaded ? : ''} - { - this.props.goTo('/people/followers') - this.props.setHeaderTitle('Followers') - }}> + { + goTo!('/people/followers') + setHeaderTitle!('Followers') + }}> {circlesLoaded ? : ''} @@ -136,19 +135,17 @@ export class People extends Component { } } - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IPeopleComponentProps) => { return { - goTo: (url)=> dispatch(push(url)), - setHeaderTitle : (title) => dispatch(globalActions.setHeaderTitle(title)) - + goTo: (url: string) => dispatch(push(url)), + setHeaderTitle : (title: string) => dispatch(globalActions.setHeaderTitle(title)) } } @@ -159,16 +156,14 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IPeopleComponentProps) => { return { uid: state.authorize.uid, circlesLoaded: state.circle.loaded - - } } // - Connect component to redux store -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(People)) \ No newline at end of file +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PeopleComponent as any)) diff --git a/src/components/people/index.ts b/src/components/people/index.ts new file mode 100644 index 0000000..52cf957 --- /dev/null +++ b/src/components/people/index.ts @@ -0,0 +1,2 @@ +import PeopleComponent from './PeopleComponent' +export default PeopleComponent diff --git a/src/components/post/IPostComponentProps.ts b/src/components/post/IPostComponentProps.ts new file mode 100644 index 0000000..ac65466 --- /dev/null +++ b/src/components/post/IPostComponentProps.ts @@ -0,0 +1,161 @@ +export interface IPostComponentProps { + + /** + * The context of a post + */ + body: string + /** + * The number of comment on a post + */ + commentCounter: number + /** + * Creation post date + */ + creationDate: number + /** + * Post identifier + */ + id: string + /** + * Post image address + */ + image: string + /** + * The last time date when post has was edited + */ + lastEditDate: number + /** + * The name of the user who created the post + */ + ownerDisplayName: string + /** + * The identifier of the user who created the post + */ + ownerUserId: string + /** + * The avatar address of the user who created the post + * //TODO: User avatar should be as an attribute and [avatar] should be deleted + */ + ownerAvatar: string + /** + * The avatar address of the user who created the post + */ + avatar?: string + /** + * If post is only [0]text, [1]whith picture, ... + */ + postTypeId: string + /** + * The number votes on a post + */ + score: number + /** + * Array of tags on a post + */ + tags: string[] + /** + * The video address of a post + */ + video: string + /** + * If it's true comment will be disabled on a post + */ + disableComments: boolean + /** + * If it's true sharing will be disabled on a post + */ + disableSharing: boolean + /** + * The number of users who has visited the post + */ + viewCount: boolean + + /** + * User full name + * + * @type {string} + * @memberof IPostComponentProps + */ + fullName?: string + + /** + * Number of comments on the post + * + * @type {number} + * @memberof IPostComponentProps + */ + commentCount?: number + + /** + * Number of vote on a post + * + * @type {number} + * @memberof IPostComponentProps + */ + voteCount?: number + + /** + * Current user vote the post {true} or not {false} + * + * @type {boolean} + * @memberof IPostComponentProps + */ + userVoteStatus?: boolean + + /** + * Current user is the owner of the post {true} or not {false} + * + * @type {boolean} + * @memberof IPostComponentProps + */ + isPostOwner?: boolean + + /** + * Vote a post + * + * @memberof IPostComponentProps + */ + vote?: () => any + + /** + * Delete a vote on the post + * + * @memberof IPostComponentProps + */ + unvote?: () => any + + /** + * Delte a post + * + * @memberof IPostComponentProps + */ + delete?: (id: string) => any + + /** + * Toggle comment disable/enable + * + * @memberof IPostComponentProps + */ + toggleDisableComments?: (status: boolean) => any + + /** + * Toggle sharing disable/enable + * + * @memberof IPostComponentProps + */ + toggleSharingComments?: (status: boolean) => any + + /** + * Redirect to {url} route + * + * @memberof IPostComponentProps + */ + goTo?: (url: string) => any + + /** + * Set tile of top bar + * + * @memberof IPostComponentProps + */ + setHomeTitle?: (title: string) => any +} diff --git a/src/components/post/IPostComponentState.ts b/src/components/post/IPostComponentState.ts new file mode 100644 index 0000000..239811c --- /dev/null +++ b/src/components/post/IPostComponentState.ts @@ -0,0 +1,42 @@ + +export interface IPostComponentState { + + /** + * Post text + */ + text: string + /** + * It's true if whole the text post is visible + */ + readMoreState: boolean + /** + * Handle open comment from parent component + */ + openComments: boolean + /** + * If it's true, share dialog will be open + */ + shareOpen: boolean + /** + * If it's true comment will be disabled on post + */ + disableComments: boolean + /** + * If it's true share will be disabled on post + */ + disableSharing: boolean + /** + * Title of share post + */ + shareTitle: string + /** + * If it's true, post link will be visible in share post dialog + */ + openCopyLink: boolean + /** + * If it's true, post write will be open + */ + openPostWrite: boolean + + openCommentGroup?: () => void +} diff --git a/app/components/Post.jsx b/src/components/post/PostComponent.tsx similarity index 63% rename from app/components/Post.jsx rename to src/components/post/PostComponent.tsx index 61f610c..5b6aada 100644 --- a/app/components/Post.jsx +++ b/src/components/post/PostComponent.tsx @@ -1,20 +1,18 @@ // - Import react components import React, { Component } from 'react' import { connect } from 'react-redux' -import {NavLink} from 'react-router-dom' +import { NavLink } from 'react-router-dom' import { push } from 'react-router-redux' import PropTypes from 'prop-types' import moment from 'moment' -import { createAction as action } from 'redux-actions' import Linkify from 'react-linkify' - // - Material UI import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card' import FloatingActionButton from 'material-ui/FloatingActionButton' import SvgShare from 'material-ui/svg-icons/social/share' import SvgLink from 'material-ui/svg-icons/content/link' -import SvgComment from 'material-ui/svg-icons/Communication/comment' +import SvgComment from 'material-ui/svg-icons/communication/comment' import SvgFavorite from 'material-ui/svg-icons/action/favorite' import SvgFavoriteBorder from 'material-ui/svg-icons/action/favorite-border' import Checkbox from 'material-ui/Checkbox' @@ -31,102 +29,130 @@ import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert' import IconMenu from 'material-ui/IconMenu' import reactStringReplace from 'react-string-replace' - // - Import app components -import CommentGroup from 'CommentGroup' -import PostWrite from 'PostWrite' -import Img from 'Img' -import IconButtonElement from 'IconButtonElement' -import UserAvatar from 'UserAvatar' - +import CommentGroup from 'components/commentGroup' +import PostWrite from 'components/postWrite' +import Img from 'components/img' +import IconButtonElement from 'layouts/IconButtonElement' +import UserAvatar from 'components/userAvatar' // - Import actions -import * as voteActions from 'voteActions' -import * as postActions from 'postActions' -import * as globalActions from 'globalActions' +import * as voteActions from 'actions/voteActions' +import * as postActions from 'actions/postActions' +import * as globalActions from 'actions/globalActions' +import { IPostComponentProps } from './IPostComponentProps' +import { IPostComponentState } from './IPostComponentState' // - Create component class -export class Post extends Component { +export class PostComponent extends Component { -static propTypes = { + static propTypes = { /** * The context of a post */ - body: PropTypes.string, + body: PropTypes.string, /** * The number of comment on a post */ - commentCounter:PropTypes.number, + commentCounter: PropTypes.number, /** * Creation post date */ - creationDate:PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + creationDate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), /** * Post identifier */ - id:PropTypes.string, + id: PropTypes.string, /** * Post image address */ - image:PropTypes.string, + image: PropTypes.string, /** * The last time date when post has was edited */ - lastEditDate:PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + lastEditDate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), /** * The name of the user who created the post */ - ownerDisplayName:PropTypes.string, + ownerDisplayName: PropTypes.string, /** * The identifier of the user who created the post */ - ownerUserId:PropTypes.string, + ownerUserId: PropTypes.string, /** * The avatar address of the user who created the post */ - ownerAvatar:PropTypes.string, + ownerAvatar: PropTypes.string, /** * If post is only [0]text, [1]whith picture, ... */ - postTypeId:PropTypes.number, + postTypeId: PropTypes.number, /** * The number votes on a post */ - score:PropTypes.number, + score: PropTypes.number, /** * Array of tags on a post */ - tags:PropTypes.array, + tags: PropTypes.array, /** * The video address of a post */ - video:PropTypes.string, + video: PropTypes.string, /** * If it's true comment will be disabled on a post */ - disableComments:PropTypes.bool, + disableComments: PropTypes.bool, /** * If it's true sharing will be disabled on a post */ - disableSharing:PropTypes.bool, + disableSharing: PropTypes.bool, /** * The number of users who has visited the post */ - viewCount:PropTypes.number -} + viewCount: PropTypes.number + } + + styles = { + counter: { + lineHeight: '36px', + color: '#777', + fontSize: '12px', + marginRight: '6px' + }, + postBody: { + wordWrap: 'break-word' + }, + dialog: { + width: '', + maxWidth: '530px', + borderRadius: '4px' + }, + rightIconMenu: { + position: 'absolute', + right: 18, + top: 8 + }, + iconButton: { + width: 24, + height: 24 + + } + + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: IPostComponentProps) { super(props) this.state = { /** @@ -154,14 +180,14 @@ static propTypes = { */ disableSharing: this.props.disableSharing, /** - * Title of share post + * Title of share post */ shareTitle: 'Share On', /** * If it's true, post link will be visible in share post dialog */ openCopyLink: false, - /** + /** * If it's true, post write will be open */ openPostWrite: false @@ -180,12 +206,11 @@ static propTypes = { this.handleOpenComments = this.handleOpenComments.bind(this) } - /** * Toggle on show/hide comment * @param {event} evt passed by clicking on comment slide show */ - handleOpenComments = (evt) => { + handleOpenComments = () => { this.setState({ openComments: !this.state.openComments }) @@ -193,42 +218,42 @@ static propTypes = { /** * Open post write - * - * - * @memberof Blog + * + * + * @memberof StreamComponent */ handleOpenPostWrite = () => { this.setState({ openPostWrite: true }) } - - /** - * Close post write - * - * - * @memberof Blog - */ - handleClosePostWrite = () => { - this.setState({ - openPostWrite: false - }) -} /** - * Delete a post - * - * - * @memberof Post + * Close post write + * + * + * @memberof StreamComponent */ - handleDelete = () => { - this.props.delete(this.props.id) + handleClosePostWrite = () => { + this.setState({ + openPostWrite: false + }) } /** - * Show copy link - * - * + * Delete a post + * + * + * @memberof Post + */ + handleDelete = () => { + this.props.delete!(this.props.id) + } + + /** + * Show copy link + * + * * @memberof Post */ handleCopyLink = () => { @@ -240,8 +265,8 @@ static propTypes = { /** * Open share post - * - * + * + * * @memberof Post */ handleOpenShare = () => { @@ -252,8 +277,8 @@ static propTypes = { /** * Close share post - * - * + * + * * @memberof Post */ handleCloseShare = () => { @@ -266,16 +291,15 @@ static propTypes = { /** * Handle vote on a post - * - * + * + * * @memberof Post */ handleVote = () => { if (this.props.userVoteStatus) { - this.props.unvote() - } - else { - this.props.vote() + this.props.unvote!() + } else { + this.props.vote!() } } @@ -283,7 +307,7 @@ static propTypes = { * Set open comment group function on state which passed by CommentGroup component * @param {function} open the function to open comment list */ - getOpenCommentGroup = (open) => { + getOpenCommentGroup = (open: () => void) => { this.setState({ openCommentGroup: open }) @@ -293,66 +317,25 @@ static propTypes = { * Handle read more event * @param {event} evt is the event passed by click on read more */ - handleReadMore(evt) { + handleReadMore (event: any) { this.setState({ readMoreState: !this.state.readMoreState }) } - componentDidMount() { - - } - - /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - - /** - * DOM styles - * - * - * @memberof Post - */ - const styles = { - counter: { - lineHeight: '36px', - color: '#777', - fontSize: '12px', - marginRight: '6px' - }, - postBody:{ - wordWrap: "break-word" - }, - dialog: { - width: '', - maxWidth: '530px', - borderRadius: "4px" - }, - rightIconMenu: { - position: 'absolute', - right: 18, - top: 8, - }, - iconButton: { - width: 24, - height: 24 - - } - - } - - + render () { const RightIconMenu = () => ( - - - - this.props.toggleDisableComments(!this.props.disableComments)} /> - this.props.toggleSharingComments(!this.props.disableSharing)} /> + + + + this.props.toggleDisableComments!(!this.props.disableComments)} /> + this.props.toggleSharingComments!(!this.props.disableSharing)} /> ) @@ -362,89 +345,88 @@ static propTypes = { {ownerDisplayName}} - subtitle={moment.unix(creationDate).fromNow() + " | public"} - avatar={} + subtitle={moment.unix(creationDate).fromNow() + ' | public'} + avatar={} > - {isPostOwner ? (
) : ''} + {isPostOwner ? (
) : ''} {image ? ( ) : ''} - - + - {reactStringReplace(body,/#(\w+)/g, (match, i) => ( - ( + { evt.preventDefault() - goTo(`/tag/${match}`) - setHomeTitle(`#${match}`) - }} + goTo!(`/tag/${match}`) + setHomeTitle!(`#${match}`) + }} > #{match} - + ))} -
+
{/**/}
} - uncheckedIcon={} + checkedIcon={} + uncheckedIcon={} defaultChecked={this.props.userVoteStatus} style={{transform: 'translate(6px, 6px)'}} />
-
{this.props.voteCount > 0 ? this.props.voteCount : ''}
+
{this.props.voteCount! > 0 ? this.props.voteCount : ''}
- {!this.props.disableComments ? (
- 3 + {!this.props.disableComments ? (
+ 3 -
{this.props.commentCount > 0 ? this.props.commentCount : ''}
) : ''} - {!this.props.disableSharing ? ( - +
{this.props.commentCount! > 0 ? this.props.commentCount : ''}
) : ''} + {!this.props.disableSharing ? ( + ) : ''}
- - + + {/* Copy link dialog*/} {!this.state.openCopyLink ? ( - } onClick={this.handleCopyLink} /> + } onClick={this.handleCopyLink} /> ) - : + : } - - - + ) @@ -465,16 +447,15 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IPostComponentProps) => { return { vote: () => dispatch(voteActions.dbAddVote(ownProps.id,ownProps.ownerUserId)), unvote: () => dispatch(voteActions.dbDeleteVote(ownProps.id)) , - delete: (id) => dispatch(postActions.dbDeletePost(id)), - toggleDisableComments: (status) => dispatch(postActions.dbUpdatePost({id:ownProps.id, disableComments:status},_ =>_)), - toggleSharingComments: (status) => dispatch(postActions.dbUpdatePost({id:ownProps.id, disableSharing:status},_ => _)), - goTo: (url) => dispatch(push(url)), - setHomeTitle: (title) => dispatch(globalActions.setHeaderTitle(title|| '')) - + delete: (id: string) => dispatch(postActions.dbDeletePost(id)), + toggleDisableComments: (status: boolean) => dispatch(postActions.dbUpdatePost({id: ownProps.id, disableComments: status}, (x: any) => x)), + toggleSharingComments: (status: boolean) => dispatch(postActions.dbUpdatePost({id: ownProps.id, disableSharing: status},(x: any) => x)), + goTo: (url: string) => dispatch(push(url)), + setHomeTitle: (title: string) => dispatch(globalActions.setHeaderTitle(title || '')) } } @@ -485,10 +466,10 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { - const {uid} = state.authorize +const mapStateToProps = (state: any, ownProps: IPostComponentProps) => { + const {uid} = state.authorize let votes = state.vote.postVotes[ownProps.id] - const post = (state.post.userPosts[uid] ? Object.keys(state.post.userPosts[uid]).filter((key)=>{ return ownProps.id === key}).length : 0) + const post = (state.post.userPosts[uid] ? Object.keys(state.post.userPosts[uid]).filter((key) => { return ownProps.id === key }).length : 0) return { avatar: state.user.info && state.user.info[ownProps.ownerUserId] ? state.user.info[ownProps.ownerUserId].avatar || '' : '', @@ -501,4 +482,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(Post) +export default connect(mapStateToProps, mapDispatchToProps)(PostComponent as any) diff --git a/src/components/post/index.ts b/src/components/post/index.ts new file mode 100644 index 0000000..0f02cdf --- /dev/null +++ b/src/components/post/index.ts @@ -0,0 +1,2 @@ +import PostComponent from './PostComponent' +export default PostComponent diff --git a/src/components/postPage/IPostPageComponentProps.ts b/src/components/postPage/IPostPageComponentProps.ts new file mode 100644 index 0000000..c57f8f9 --- /dev/null +++ b/src/components/postPage/IPostPageComponentProps.ts @@ -0,0 +1,28 @@ +import { Post } from 'core/domain/posts' + +export interface IPostPageComponentProps { + + /** + * Load the post + * + * @memberof IPostPageComponentProps + */ + loadPost?: () => any + + /** + * Load user profile + * + * @memberof IPostPageComponentProps + */ + loadUserInfo?: () => any + + /** + * Route match + * + * @type {*} + * @memberof IPostPageComponentProps + */ + match?: any + + posts: {[postId: string]: Post} +} diff --git a/src/components/postPage/IPostPageComponentState.ts b/src/components/postPage/IPostPageComponentState.ts new file mode 100644 index 0000000..2c6d50e --- /dev/null +++ b/src/components/postPage/IPostPageComponentState.ts @@ -0,0 +1,4 @@ + +export interface IPostPageComponentState { + +} diff --git a/app/components/PostPage.jsx b/src/components/postPage/PostPageComponent.tsx similarity index 55% rename from app/components/PostPage.jsx rename to src/components/postPage/PostPageComponent.tsx index 3d7befb..da8b8ff 100644 --- a/app/components/PostPage.jsx +++ b/src/components/postPage/PostPageComponent.tsx @@ -1,37 +1,37 @@ // - Import react components -import React, {Component} from 'react' -import {connect} from 'react-redux' +import React, { Component } from 'react' +import { connect } from 'react-redux' import PropTypes from 'prop-types' - // - Import app components -import Blog from 'Blog' - +import Stream from 'components/stream' // - Import API - // - Import actions -import * as postActions from 'postActions' -import * as userActions from 'userActions' +import * as postActions from 'actions/postActions' +import * as userActions from 'actions/userActions' + +import { IPostPageComponentProps } from './IPostPageComponentProps' +import { IPostPageComponentState } from './IPostPageComponentState' /** -* Create component class + * Create component class */ -export class PostPage extends Component { +export class PostPageComponent extends Component { -static propTypes = { + static propTypes = { - } + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props){ + constructor (props: IPostPageComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { } @@ -39,22 +39,21 @@ static propTypes = { // Binding functions to `this` } - componentWillMount() { - this.props.loadPost() - this.props.loadUserInfo() + componentWillMount () { + this.props.loadPost!() + this.props.loadUserInfo!() } /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { - return ( - - ) - } - } - + render () { + return ( + + ) + } +} /** * Map dispatch to props @@ -62,13 +61,13 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ - const mapDispatchToProps = (dispatch,ownProps) => { - const {userId,postId} = ownProps.match.params - return{ +const mapDispatchToProps = (dispatch: any,ownProps: IPostPageComponentProps) => { + const {userId,postId} = ownProps.match.params + return{ loadPost: () => dispatch(postActions.dbGetPostById(userId,postId)), loadUserInfo: () => dispatch(userActions.dbGetUserInfoByUserId(userId,'header')) - } } +} /** * Map state to props @@ -76,14 +75,14 @@ static propTypes = { * @param {object} ownProps is the props belong to component * @return {object} props of component */ - const mapStateToProps = (state,ownProps) => { - const {userId,postId} = ownProps.match.params - return{ +const mapStateToProps = (state: any,ownProps: IPostPageComponentProps) => { + const {userId,postId} = ownProps.match.params + return{ avatar: state.user.info && state.user.info[userId] ? state.user.info[userId].avatar : '', name: state.user.info && state.user.info[userId] ? state.user.info[userId].fullName : '', posts: state.post.userPosts && state.post.userPosts[userId] ? {[postId] : { ...state.post.userPosts[userId][postId]}} : {} - } } +} // - Connect component to redux store - export default connect(mapStateToProps,mapDispatchToProps)(PostPage) \ No newline at end of file +export default connect(mapStateToProps,mapDispatchToProps)(PostPageComponent as any) diff --git a/src/components/postPage/index.ts b/src/components/postPage/index.ts new file mode 100644 index 0000000..9981c43 --- /dev/null +++ b/src/components/postPage/index.ts @@ -0,0 +1,2 @@ +import PostPageComponent from './PostPageComponent' +export default PostPageComponent diff --git a/src/components/postWrite/IPostWriteComponentProps.ts b/src/components/postWrite/IPostWriteComponentProps.ts new file mode 100644 index 0000000..f24d3d8 --- /dev/null +++ b/src/components/postWrite/IPostWriteComponentProps.ts @@ -0,0 +1,95 @@ +import { Post } from 'core/domain/posts' + +export interface IPostWriteComponentProps { + + /** + * If it's true post writing page will be open + */ + open: boolean + /** + * Recieve request close function + */ + onRequestClose: () => void + /** + * Post write style + */ + style?: {} + /** + * If it's true, post will be in edit view + */ + edit?: boolean + /** + * The text of post in editing state + */ + text?: string + /** + * The image of post in editing state + */ + image?: string + /** + * If post state is editing this id sould be filled with post identifier + */ + id?: string + + /** + * The post has image {true} or not {false} + * + * @type {boolean} + * @memberof IPostWriteComponentProps + */ + postImageState?: boolean + + /** + * User avatar address + * + * @type {string} + * @memberof IPostWriteComponentProps + */ + avatar?: string + + /** + * User name + * + * @type {string} + * @memberof IPostWriteComponentProps + */ + name?: string + + /** + * Post image full path + * + * @type {string} + * @memberof IPostWriteComponentProps + */ + imageFullPath?: string + + /** + * Comment on the post is disabled {true} or not {false} + * + * @type {boolean} + * @memberof IPostWriteComponentProps + */ + disableComments?: boolean + + /** + * Sharing on a post is disabled {true} or not {false} + * + * @type {boolean} + * @memberof IPostWriteComponentProps + */ + disableSharing?: boolean + + /** + * Save a post + * + * @memberof IPostWriteComponentProps + */ + post?: (post: Post, callback: Function) => any + + /** + * Update a post + * + * @memberof IPostWriteComponentProps + */ + update?: (post: Post, callback: Function) => any +} diff --git a/src/components/postWrite/IPostWriteComponentState.ts b/src/components/postWrite/IPostWriteComponentState.ts new file mode 100644 index 0000000..8f42318 --- /dev/null +++ b/src/components/postWrite/IPostWriteComponentState.ts @@ -0,0 +1,33 @@ + +export interface IPostWriteComponentState { + + /** + * Post text + */ + postText: string + /** + * The URL image of the post + */ + image?: string + /** + * The path identifier of image on the server + */ + imageFullPath: string + /** + * If it's true gallery will be open + */ + galleryOpen: boolean + /** + * If it's true post button will be disabled + */ + disabledPost: boolean + /** + * If it's true comment will be disabled on post + */ + disableComments: boolean + /** + * If it's true share will be disabled on post + */ + disableSharing: boolean + +} diff --git a/app/components/PostWrite.jsx b/src/components/postWrite/PostWriteComponent.tsx similarity index 65% rename from app/components/PostWrite.jsx rename to src/components/postWrite/PostWriteComponent.tsx index 4720e9e..0c4a36a 100644 --- a/app/components/PostWrite.jsx +++ b/src/components/postWrite/PostWriteComponent.tsx @@ -16,22 +16,23 @@ import SvgCamera from 'material-ui/svg-icons/image/photo-camera' import IconMenu from 'material-ui/IconMenu' import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert' - - // - Import app components -import ImageGallery from 'ImageGallery' -import Img from 'Img' -import UserAvatar from 'UserAvatar' +import ImageGallery from 'components/imageGallery' +import Img from 'components/img' +import UserAvatarComponent from 'components/userAvatar' // - Import API -import * as PostAPI from 'PostAPI' +import * as PostAPI from 'api/PostAPI' // - Import actions -import * as imageGalleryActions from 'imageGalleryActions' -import * as postActions from 'postActions' +import * as imageGalleryActions from 'actions/imageGalleryActions' +import * as postActions from 'actions/postActions' +import { IPostWriteComponentProps } from './IPostWriteComponentProps' +import { IPostWriteComponentState } from './IPostWriteComponentState' +import { Post } from 'core/domain/posts' // - Create PostWrite component class -export class PostWrite extends Component { +export class PostWriteComponent extends Component { static propTypes = { /** @@ -47,8 +48,8 @@ export class PostWrite extends Component { */ style: PropTypes.object, /** - * If it's true, post will be in edit view - */ + * If it's true, post will be in edit view + */ edit: PropTypes.bool.isRequired, /** * The text of post in editing state @@ -68,9 +69,7 @@ export class PostWrite extends Component { * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { - - + constructor (props: IPostWriteComponentProps) { super(props) @@ -79,7 +78,7 @@ export class PostWrite extends Component { /** * Post text */ - postText: this.props.edit ? this.props.text : '', + postText: this.props.edit ? this.props.text! : '', /** * The URL image of the post */ @@ -87,7 +86,7 @@ export class PostWrite extends Component { /** * The path identifier of image on the server */ - imageFullPath: this.props.edit ? this.props.imageFullPath : '', + imageFullPath: this.props.edit ? this.props.imageFullPath! : '', /** * If it's true gallery will be open */ @@ -97,13 +96,13 @@ export class PostWrite extends Component { */ disabledPost: true, /** - * If it's true comment will be disabled on post + * If it's true comment will be disabled on post */ - disableComments: this.props.edit ? this.props.disableComments : false, + disableComments: this.props.edit ? this.props.disableComments! : false, /** - * If it's true share will be disabled on post + * If it's true share will be disabled on post */ - disableSharing: this.props.edit ? this.props.disableSharing : false, + disableSharing: this.props.edit ? this.props.disableSharing! : false } @@ -120,9 +119,9 @@ export class PostWrite extends Component { } /** - * Toggle comments of the post to disable/enable - * - * + * Toggle comments of the post to disable/enable + * + * * @memberof PostWrite */ handleToggleComments = () => { @@ -134,8 +133,8 @@ export class PostWrite extends Component { /** * Toggle sharing of the post to disable/enable - * - * + * + * * @memberof PostWrite */ handleToggleSharing = () => { @@ -147,8 +146,8 @@ export class PostWrite extends Component { /** * Romove the image of post - * - * + * + * * @memberof PostWrite */ handleRemoveImage = () => { @@ -163,7 +162,7 @@ export class PostWrite extends Component { * Handle send post to the server * @param {event} evt passed by clicking on the post button */ - handlePost = (evt) => { + handlePost = () => { const { image, @@ -181,37 +180,39 @@ export class PostWrite extends Component { post, update } = this.props - let tags = PostAPI.getContentTags(postText) + let tags = PostAPI.getContentTags(postText!) // In edit status we should fire update if not we should fire post function if (!edit) { if (image !== '') { - post({ + post!({ body: postText, tags: tags, image: image, imageFullPath: imageFullPath, - avatar: avatar, - name: name, + ownerAvatar: avatar, + ownerDisplayName: name, disableComments: disableComments, - disableSharing: disableSharing + disableSharing: disableSharing, + postTypeId: 1, + score: 0, + viewCount: 0 }, onRequestClose) - } - else { - post({ + } else { + post!({ body: postText, tags: tags, - avatar: avatar, - name: name, + ownerAvatar: avatar, + ownerDisplayName: name, disableComments: disableComments, - disableSharing: disableSharing + disableSharing: disableSharing, + postTypeId: 0, + score: 0, + viewCount: 0 }, onRequestClose) } - } - - // In edit status we pass post to update functions - else { - update({ + } else { // In edit status we pass post to update functions + update!({ id: id, body: postText, tags: tags, @@ -226,7 +227,7 @@ export class PostWrite extends Component { /** * Set post image url */ - onRequestSetImage = (url, fullPath) => { + onRequestSetImage = (url: string, fullPath: string) => { this.setState({ image: url, imageFullPath: fullPath, @@ -239,15 +240,14 @@ export class PostWrite extends Component { * @param {event} evt is an event passed by change post text callback funciton * @param {string} data is the post content which user writes */ - handleOnChange = (evt, data) => { + handleOnChange = (event: any, data: any) => { this.setState({ postText: data }) if (data.length === 0 || data.trim() === '' || (this.props.edit && data.trim() === this.props.text)) { this.setState({ postText: data, disabledPost: true }) - } - else { + } else { this.setState({ postText: data, disabledPost: false @@ -274,17 +274,17 @@ export class PostWrite extends Component { }) } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps: IPostWriteComponentProps) { if (!nextProps.open) { this.setState({ /** * Post text */ - postText: this.props.edit ? this.props.text : '', + postText: this.props.edit ? this.props.text! : '', /** * The image of the post */ - image: this.props.edit ? this.props.image : '', + image: this.props.edit ? this.props.image! : '', /** * If it's true gallery will be open */ @@ -294,13 +294,13 @@ export class PostWrite extends Component { */ disabledPost: true, /** - * If it's true comment will be disabled on post + * If it's true comment will be disabled on post */ - disableComments: this.props.edit ? this.props.disableComments : false, + disableComments: this.props.edit ? this.props.disableComments! : false, /** - * If it's true share will be disabled on post + * If it's true share will be disabled on post */ - disableSharing: this.props.edit ? this.props.disableSharing : false, + disableSharing: this.props.edit ? this.props.disableSharing! : false }) } @@ -310,13 +310,13 @@ export class PostWrite extends Component { * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { const iconButtonElement = ( @@ -324,33 +324,33 @@ export class PostWrite extends Component { const rightIconMenu = ( - {!this.state.disableComments ? 'Disable comments' : 'Enable comments'} - {!this.state.disableSharing ? 'Disable sharing' : 'Enable sharing'} + {!this.state.disableComments ? 'Disable comments' : 'Enable comments'} + {!this.state.disableSharing ? 'Disable sharing' : 'Enable sharing'} ) - let postAvatar = + let postAvatar = let author = (
{this.props.name} | Public
) const writeActions = [ {this.props.children} @@ -406,39 +406,39 @@ export class PostWrite extends Component { leftAvatar={postAvatar} rightIconButton={rightIconMenu} primaryText={author} - style={{ padding: "16px 4px 30px 16px" }} + style={{ padding: '16px 4px 30px 16px' }} /> -
-
+
+
{(this.state.image && this.state.image !== '') ? (
-
-
    -
    +
    +
      +
      - + -
      -
    • - +
      +
    • +
      • @@ -447,11 +447,11 @@ export class PostWrite extends Component {
    ) : ''}
-
-
-
- - +
+
+
+ +
@@ -464,7 +464,7 @@ export class PostWrite extends Component { open={this.state.galleryOpen} contentStyle={styles.dialog} onRequestClose={this.handleCloseGallery} - overlayStyle={{ background: "rgba(0,0,0,0.12)" }} + overlayStyle={{ background: 'rgba(0,0,0,0.12)' }} autoDetectWindowHeight={false} > @@ -482,10 +482,10 @@ export class PostWrite extends Component { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IPostWriteComponentProps) => { return { - post: (post, callBack) => dispatch(postActions.dbAddImagePost(post, callBack)), - update: (post, callBack) => dispatch(postActions.dbUpdatePost(post, callBack)) + post: (post: Post, callBack: Function) => dispatch(postActions.dbAddImagePost(post, callBack)), + update: (post: Post, callBack: Function) => dispatch(postActions.dbUpdatePost(post, callBack)) } } @@ -495,7 +495,7 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IPostWriteComponentProps) => { return { postImageState: state.imageGallery.status, avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '', @@ -504,4 +504,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(PostWrite) +export default connect(mapStateToProps, mapDispatchToProps)(PostWriteComponent as any) diff --git a/src/components/postWrite/index.ts b/src/components/postWrite/index.ts new file mode 100644 index 0000000..63ec1e5 --- /dev/null +++ b/src/components/postWrite/index.ts @@ -0,0 +1,2 @@ +import PostWriteComponent from './PostWriteComponent' +export default PostWriteComponent diff --git a/src/components/profile/IProfileComponentProps.ts b/src/components/profile/IProfileComponentProps.ts new file mode 100644 index 0000000..0e2802b --- /dev/null +++ b/src/components/profile/IProfileComponentProps.ts @@ -0,0 +1,82 @@ +import { Post } from 'core/domain/posts' + +export interface IProfileComponentProps { + + /** + * Router match + * + * @type {*} + * @memberof IProfileComponentProps + */ + match: any + + /** + * User's post + * + * @type {{[postId: string]: Post}} + * @memberof IProfileComponentProps + */ + posts: {[postId: string]: Post} + + /** + * String user full name + * + * @type {string} + * @memberof IProfileComponentProps + */ + name: string + + /** + * User tag line + * + * @type {string} + * @memberof IProfileComponentProps + */ + tagLine: string + + /** + * User's avatar address + * + * @type {string} + * @memberof IProfileComponentProps + */ + avatar: string + + /** + * It's current user profile {true} or not {false} + * + * @type {boolean} + * @memberof IProfileComponentProps + */ + isAuthedUser: boolean + + /** + * User's banner + * + * @type {string} + * @memberof IProfileComponentProps + */ + banner: string + + /** + * User identifier + * + * @type {string} + * @memberof IProfileComponentProps + */ + userId: string + + /** + * Load user's post + * + * @memberof IProfileComponentProps + */ + loadPosts: () => any + + /** + * Load user's profile + * + * @memberof IProfileComponentProps + */ + loadUserInfo: () => any +} diff --git a/src/components/profile/IProfileComponentState.ts b/src/components/profile/IProfileComponentState.ts new file mode 100644 index 0000000..72e59b0 --- /dev/null +++ b/src/components/profile/IProfileComponentState.ts @@ -0,0 +1,4 @@ + +export interface IProfileComponentState { + +} diff --git a/app/components/Profile.jsx b/src/components/profile/ProfileComponent.tsx similarity index 69% rename from app/components/Profile.jsx rename to src/components/profile/ProfileComponent.tsx index edc3c57..836c4cc 100644 --- a/app/components/Profile.jsx +++ b/src/components/profile/ProfileComponent.tsx @@ -7,23 +7,22 @@ import FlatButton from 'material-ui/FlatButton' import RaisedButton from 'material-ui/RaisedButton' // - Import app components -import ProfileHead from 'ProfileHead' -import Blog from 'Blog' - - +import ProfileHeader from 'components/profileHeader' +import StreamComponent from 'components/stream' // - Import API - // - Import actions -import * as postActions from 'postActions' -import * as userActions from 'userActions' -import * as globalActions from 'globalActions' +import * as postActions from 'actions/postActions' +import * as userActions from 'actions/userActions' +import * as globalActions from 'actions/globalActions' +import { IProfileComponentProps } from './IProfileComponentProps' +import { IProfileComponentState } from './IProfileComponentState' /** -* Create component class + * Create component class */ -export class Profile extends Component { +export class ProfileComponent extends Component { static propTypes = { @@ -33,33 +32,29 @@ export class Profile extends Component { * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: IProfileComponentProps) { super(props) - //Defaul state + // Defaul state this.state = { } - // Binding functions to `this` - } - componentWillMount() { + componentWillMount () { this.props.loadPosts() this.props.loadUserInfo() } - - /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { /** * Component styles @@ -71,7 +66,6 @@ export class Profile extends Component { }, header: { - }, content: { @@ -83,38 +77,22 @@ export class Profile extends Component { border: '2px solid rgb(255, 255, 255)' } } - /** - * Actions for material ui dialog - */ - const actions = [ - , - - ] return (
- +
- {this.props.posts && Object.keys(this.props.posts).length !==0 + {this.props.posts && Object.keys(this.props.posts).length !== 0 ? (
{this.props.name}'s posts
- -
) + +
) : (
Nothing shared
) @@ -125,14 +103,13 @@ export class Profile extends Component { } } - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: IProfileComponentProps) => { const { userId } = ownProps.match.params return { loadPosts: () => dispatch(postActions.dbGetPostsByUserId(userId)), @@ -147,13 +124,14 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IProfileComponentProps) => { const { userId } = ownProps.match.params const {uid} = state.authorize return { avatar: state.user.info && state.user.info[userId] ? state.user.info[userId].avatar || '' : '', name: state.user.info && state.user.info[userId] ? state.user.info[userId].fullName || '' : '', banner: state.user.info && state.user.info[userId] ? state.user.info[userId].banner || '' : '', + tagLine: state.user.info && state.user.info[userId] ? state.user.info[userId].tagLine || '' : '', posts: state.post.userPosts ? state.post.userPosts[userId] : {}, isAuthedUser: userId === uid, userId @@ -162,4 +140,4 @@ const mapStateToProps = (state, ownProps) => { } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(Profile) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(ProfileComponent as any) diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts new file mode 100644 index 0000000..954991d --- /dev/null +++ b/src/components/profile/index.ts @@ -0,0 +1,2 @@ +import ProfileComponent from './ProfileComponent' +export default ProfileComponent diff --git a/src/components/profileHeader/IProfileHeaderComponentProps.ts b/src/components/profileHeader/IProfileHeaderComponentProps.ts new file mode 100644 index 0000000..8b82351 --- /dev/null +++ b/src/components/profileHeader/IProfileHeaderComponentProps.ts @@ -0,0 +1,65 @@ +export interface IProfileHeaderComponentProps { + + /** + * Profile for current user {true} or not {false} + * + * @type {boolean} + * @memberof IProfileHeaderComponentProps + */ + isAuthedUser: boolean + + /** + * Image cover address + * + * @type {string} + * @memberof IProfileHeaderComponentProps + */ + banner: string + + /** + * User full name + * + * @type {string} + * @memberof IProfileHeaderComponentProps + */ + fullName: string + + /** + * User tag line + * + * @type {string} + * @memberof IProfileHeaderComponentProps + */ + tagLine: string + + /** + * User's avatar address + * + * @type {string} + * @memberof IProfileHeaderComponentProps + */ + avatar: string + + /** + * Open edit profile dialog + * + * @memberof IProfileHeaderComponentProps + */ + openEditor?: () => void + + /** + * Number of user followers + * + * @type {number} + * @memberof IProfileHeaderComponentProps + */ + followerCount?: number + + /** + * User identifier + * + * @type {string} + * @memberof IProfileHeaderComponentProps + */ + userId: string +} diff --git a/src/components/profileHeader/IProfileHeaderComponentState.ts b/src/components/profileHeader/IProfileHeaderComponentState.ts new file mode 100644 index 0000000..de6a4d7 --- /dev/null +++ b/src/components/profileHeader/IProfileHeaderComponentState.ts @@ -0,0 +1,11 @@ + +export interface IProfileHeaderComponentState { + + /** + * Window size is small {true} or not {false} + * + * @type {boolean} + * @memberof IProfileHeaderComponentState + */ + isSmall: boolean +} diff --git a/app/components/ProfileHead.jsx b/src/components/profileHeader/ProfileHeaderComponent.tsx similarity index 56% rename from app/components/ProfileHead.jsx rename to src/components/profileHeader/ProfileHeaderComponent.tsx index 3205ad2..6c56234 100644 --- a/app/components/ProfileHead.jsx +++ b/src/components/profileHeader/ProfileHeaderComponent.tsx @@ -12,151 +12,146 @@ import RaisedButton from 'material-ui/RaisedButton' import EventListener, { withOptions } from 'react-event-listener' import { Parallax, Background } from 'react-parallax' - // - Import app components -import ImgCover from 'ImgCover' -import EditProfile from 'EditProfile' -import UserAvatar from 'UserAvatar' - +import ImgCover from 'components/imgCover' +import EditProfile from 'components/editProfile' +import UserAvatar from 'components/userAvatar' // - Import API - // - Import actions -import * as globalActions from 'globalActions' -import * as userActions from 'userActions' +import * as globalActions from 'actions/globalActions' +import * as userActions from 'actions/userActions' +import { IProfileHeaderComponentProps } from './IProfileHeaderComponentProps' +import { IProfileHeaderComponentState } from './IProfileHeaderComponentState' /** -* Create component class + * Create component class */ -export class ProfileHead extends Component { +export class ProfileHeaderComponent extends Component { - static propTypes = { + static propTypes = { /** * User avatar address */ - avatar: PropTypes.string, + avatar: PropTypes.string, /** - * User avatar address + * User banner address */ - banner: PropTypes.string, + banner: PropTypes.string, + /** + * User tagline + */ + tagLine: PropTypes.string, /** * User full name */ - fullName: PropTypes.string.isRequired, + fullName: PropTypes.string.isRequired, /** * The number of followers */ - followerCount: PropTypes.number, + followerCount: PropTypes.number, /** * User identifier */ - userId: PropTypes.string, + userId: PropTypes.string, /** - * If the user profile identifier of param is equal to the user authed identifier + * If the user profile identifier of param is equal to the user authed identifier */ - isAuthedUser: PropTypes.bool + isAuthedUser: PropTypes.bool - - - } + } /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { - super(props) + constructor (props: IProfileHeaderComponentProps) { + super(props) /** * Defaul state */ - this.state = { + this.state = { /** * If it's true , the window is in small size */ - isSmall: false, + isSmall: false - - } + } // Binding functions to `this` - } + } /** - * Handle resize event for window to change sidebar status - * @param {event} evt is the event is passed by winodw resize event - */ - handleResize = (evt) => { + * Handle resize event for window to change sidebar status + * @param {event} evt is the event is passed by winodw resize event + */ + handleResize = () => { // Set initial state - let width = window.innerWidth + let width = window.innerWidth - if (width > 900) { - this.setState({ - isSmall: false - }) + if (width > 900) { + this.setState({ + isSmall: false + }) - } - else { - this.setState({ - isSmall: true - }) - } - } - - - - componentDidMount = () => { - this.handleResize() + } else { + this.setState({ + isSmall: true + }) } + } + componentDidMount () { + this.handleResize() + } /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { - const styles = { - avatar: { - border: '2px solid rgb(255, 255, 255)' - }, - iconButton: { - fill: 'rgb(255, 255, 255)', - height: '24px', - width: '24px', + const styles = { + avatar: { + border: '2px solid rgb(255, 255, 255)' + }, + iconButton: { + fill: 'rgb(255, 255, 255)', + height: '24px', + width: '24px' - }, - iconButtonSmall: { - fill: 'rgb(0, 0, 0)', - height: '24px', - width: '24px', - }, + }, + iconButtonSmall: { + fill: 'rgb(0, 0, 0)', + height: '24px', + width: '24px' + }, - editButton: { + editButton: { - marginLeft: '20px' + marginLeft: '20px' - }, - editButtonSmall: { + }, + editButtonSmall: { - marginLeft: '20px', - color: 'white', - fill: 'blue' + marginLeft: '20px', + color: 'white', + fill: 'blue' - }, - aboutButton: { - color: 'white' - }, - aboutButtonSmall: { - color: 'black' - } - } + }, + aboutButton: { + color: 'white' + }, + aboutButtonSmall: { + color: 'black' + } + } - - const iconButtonElement = ( + const iconButtonElement = ( @@ -164,31 +159,29 @@ export class ProfileHead extends Component { ) - - const RightIconMenu = () => ( + const RightIconMenu = () => ( - Reply - Edit - Delete + Reply + Edit + Delete ) + const {isAuthedUser} = this.props - const {isAuthedUser} = this.props - - return ( + return (
- + - +
@@ -198,37 +191,38 @@ export class ProfileHead extends Component {
{this.props.fullName}
+
+ {this.props.tagLine} +
{/*
{this.props.followerCount} Followers
*/}
- {isAuthedUser ? (
) : ''} + {isAuthedUser ? (
) : ''}
{isAuthedUser ? (): ''} + />) : ''}
- ) - } + ) + } } - /** * Map dispatch to props * @param {func} dispatch is the function to dispatch action to reducers * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { - return { - openEditor: () => dispatch(userActions.openEditProfile()) - } +const mapDispatchToProps = (dispatch: any, ownProps: IProfileHeaderComponentProps) => { + return { + openEditor: () => dispatch(userActions.openEditProfile()) + } } /** @@ -237,11 +231,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: IProfileHeaderComponentProps) => { - return { - } + return { + } } // - Connect component to redux store -export default connect(mapStateToProps, mapDispatchToProps)(ProfileHead) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(ProfileHeaderComponent as any) diff --git a/src/components/profileHeader/index.ts b/src/components/profileHeader/index.ts new file mode 100644 index 0000000..b9e6810 --- /dev/null +++ b/src/components/profileHeader/index.ts @@ -0,0 +1,2 @@ +import ProfileHeaderComponent from './ProfileHeaderComponent' +export default ProfileHeaderComponent diff --git a/src/components/setting/ISettingComponentProps.ts b/src/components/setting/ISettingComponentProps.ts new file mode 100644 index 0000000..549dd9b --- /dev/null +++ b/src/components/setting/ISettingComponentProps.ts @@ -0,0 +1,16 @@ +export interface ISettingComponentProps { + + /** + * Login user + * + * @memberof ISettingComponentProps + */ + login: (email: string, password: string) => any + + /** + * Redirect to home page + * + * @memberof ISettingComponentProps + */ + homePage: () => void +} diff --git a/src/components/setting/ISettingComponentState.ts b/src/components/setting/ISettingComponentState.ts new file mode 100644 index 0000000..fffcbda --- /dev/null +++ b/src/components/setting/ISettingComponentState.ts @@ -0,0 +1,35 @@ + +export interface ISettingComponentState { + + /** + * Password input value + * + * @type {string} + * @memberof ISettingComponentState + */ + passwordInput: string + + /** + * Password input error text + * + * @type {string} + * @memberof ISettingComponentState + */ + passwordInputError: string + + /** + * Confirm input value + * + * @type {string} + * @memberof ISettingComponentState + */ + confirmInput: string + + /** + * Confirm input error + * + * @type {string} + * @memberof ISettingComponentState + */ + confirmInputError: string +} diff --git a/app/components/Settings.jsx b/src/components/setting/SettingComponent.tsx similarity index 66% rename from app/components/Settings.jsx rename to src/components/setting/SettingComponent.tsx index 86ed824..be852ea 100644 --- a/app/components/Settings.jsx +++ b/src/components/setting/SettingComponent.tsx @@ -9,31 +9,31 @@ import RaisedButton from 'material-ui/RaisedButton' import FlatButton from 'material-ui/FlatButton' // - Import actions -import * as authorizeActions from 'authorizeActions' - +import * as authorizeActions from 'actions/authorizeActions' +import { ISettingComponentProps } from './ISettingComponentProps' +import { ISettingComponentState } from './ISettingComponentState' /** * Create component class - * + * * @export - * @class Settings + * @class SettingComponent * @extends {Component} */ -export class Settings extends Component { +export class SettingComponent extends Component { /** * Component constructor * @param {object} props is an object properties of component */ - constructor(props) { + constructor (props: ISettingComponentProps) { super(props) this.state = { passwordInput: '', passwordInputError: '', confirmInput: '', - confirmInputError: '', - + confirmInputError: '' } // Binding function to `this` @@ -45,15 +45,14 @@ export class Settings extends Component { * Handle data on input change * @param {event} evt is an event of inputs of element on change */ - handleInputChange = (evt) => { - const target = evt.target + handleInputChange = (event: any) => { + const target = event.target const value = target.type === 'checkbox' ? target.checked : target.value const name = target.name this.setState({ [name]: value }) - switch (name) { case 'passwordInput': this.setState({ @@ -84,15 +83,13 @@ export class Settings extends Component { }) error = true - } - else if (this.state.confirmInput === '') { + } else if (this.state.confirmInput === '') { this.setState({ confirmInputError: 'This field is required' }) error = true - } - else if(this.state.confirmInput !== this.state.passwordInput) { + } else if (this.state.confirmInput !== this.state.passwordInput) { this.setState({ confirmInputError: 'Password and confirm password should be equal!' }) @@ -109,47 +106,46 @@ export class Settings extends Component { } - /** * Reneder component DOM * @return {react element} return the DOM which rendered by component */ - render() { + render () { const paperStyle = { minHeight: 370, width: 450, textAlign: 'center', display: 'block', - margin: "auto" + margin: 'auto' } return (

Green

-
+
-
+

Change Password

@@ -157,27 +153,27 @@ export class Settings extends Component {



-
+
- +
- +
@@ -196,13 +192,13 @@ export class Settings extends Component { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch: any, ownProps: ISettingComponentProps) => { return { - login: (password) => { + login: (password: string) => { dispatch(authorizeActions.dbUpdatePassword(password)) }, homePage: () => { - dispatch(push("/")) + dispatch(push('/')) } } } @@ -213,11 +209,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { * @param {object} ownProps is the props belong to component * @return {object} props of component */ -const mapStateToProps = (state, ownProps) => { +const mapStateToProps = (state: any, ownProps: ISettingComponentProps) => { return { } } // - Connect component to redux store -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Settings)) +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SettingComponent as any)) diff --git a/src/components/setting/index.ts b/src/components/setting/index.ts new file mode 100644 index 0000000..c172ed4 --- /dev/null +++ b/src/components/setting/index.ts @@ -0,0 +1,2 @@ +import SettingComponent from './SettingComponent' +export default SettingComponent diff --git a/src/components/sidebar/ISidebarComponentProps.ts b/src/components/sidebar/ISidebarComponentProps.ts new file mode 100644 index 0000000..e552cb4 --- /dev/null +++ b/src/components/sidebar/ISidebarComponentProps.ts @@ -0,0 +1,24 @@ +export interface ISidebarComponentProps { + + /** + * Change sidebar status + * + * @type {boolean} + * @memberof ISidebarComponentProps + */ + status: (status: boolean) => void + + /** + * Change sidebar overlay status + * + * @memberof ISidebarComponentProps + */ + overlay: (status: boolean) => void + + /** + * Open sidebar callback function + * + * @memberof ISidebarComponentProps + */ + open: (openCallback: (status: boolean, source: string) => void ) => void +} diff --git a/src/components/sidebar/ISidebarComponentState.ts b/src/components/sidebar/ISidebarComponentState.ts new file mode 100644 index 0000000..3ee8cba --- /dev/null +++ b/src/components/sidebar/ISidebarComponentState.ts @@ -0,0 +1,23 @@ + +export interface ISidebarComponentState { + + sidebarClass?: string + overlay?: boolean + mainStyle?: {} + // Is sidebar open or not + open?: boolean + // If sidebar is closed by resizing or not + auto?: boolean + // If overlay should be open or not + overlayOpen?: boolean + // If side bar should be closed + shouldBeClosed?: boolean + + /** + * Sidebar style sheet + * + * @type {{}} + * @memberof ISidebarComponentState + */ + sidebarStyle?: {} +} diff --git a/app/components/Sidebar.jsx b/src/components/sidebar/SidebarComponent.tsx similarity index 62% rename from app/components/Sidebar.jsx rename to src/components/sidebar/SidebarComponent.tsx index 9b8e3e3..3c5545e 100644 --- a/app/components/Sidebar.jsx +++ b/src/components/sidebar/SidebarComponent.tsx @@ -7,35 +7,38 @@ import keycode from 'keycode' // - Import app components - // - Import API // - Import actions -import * as authorizeActions from 'authorizeActions' -import * as globalActions from 'globalActions' +import * as authorizeActions from 'actions/authorizeActions' +import * as globalActions from 'actions/globalActions' +import { ISidebarComponentProps } from './ISidebarComponentProps' +import { ISidebarComponentState } from './ISidebarComponentState' // - Feilds -const color = 'teal' -const colorKey = 'blue' -const sizeCondition = (width) => (width >= 750) - - +const color: string = 'teal' +const colorKey: string = 'blue' +const sizeCondition = (width: number) => (width >= 750) // - Create Sidebar component class -export class Sidebar extends Component { +export class SidebarComponent extends Component { /** * Component constructor - * @param {object} props is an object properties of component + * @param {ISidebarComponentProps} props is an object properties of component */ - constructor(props) { + constructor (props: ISidebarComponentProps) { super(props) + // Binding functions to `this` + this.open = this.open.bind(this) + this.getChildren = this.getChildren.bind(this) + // Default state this.state = { - sidebarClass: "", + sidebarClass: '', overlay: false, - mainStyle: { marginLeft: "210px" }, + mainStyle: { marginLeft: '210px' }, // Is sidebar open or not open: true, // If sidebar is closed by resizing or not @@ -43,16 +46,10 @@ export class Sidebar extends Component { // If overlay should be open or not overlayOpen: false, // If side bar should be closed - shouldBeClosed: false, - + shouldBeClosed: false } - // Binding functions to `this` - this.handleLogout = this.handleLogout.bind(this) - this.open = this.open.bind(this) - this.getChildren = this.getChildren.bind(this) - } /** @@ -60,25 +57,24 @@ export class Sidebar extends Component { * @param {boolean} status if is true, sidebar will be open * @param {string} source is the element that fired the function */ - open = (status, source) => { + open = (status: boolean, source: string) => { const width = window.innerWidth if (status) { // Sidebar style when it's open const openStyle = { - width: "210px", - transform: "translate(0px, 0px)", - transition: "transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms" + width: '210px', + transform: 'translate(0px, 0px)', + transition: 'transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms' } this.setState({ open: true, - mainStyle: { marginLeft: "210px" }, + mainStyle: { marginLeft: '210px' }, sidebarStyle: openStyle, - sidebarClass: (sizeCondition(width)) ? "sidebar sidebar__large" : "sidebar sidebar__over", + sidebarClass: (sizeCondition(width)) ? 'sidebar sidebar__large' : 'sidebar sidebar__over', overlay: (sizeCondition(width)) ? false : true - }) if (sizeCondition(width)) { @@ -94,26 +90,23 @@ export class Sidebar extends Component { } /** - * Callback function fired to determine sidebar and overlay sidebar status - * @param {boolean} if true, the sidebar is open - */ + * Callback function fired to determine sidebar and overlay sidebar status + * @param {boolean} if true, the sidebar is open + */ this.props.status(true) - - } - // If it's false sidebar should be closed - else { + } else { // If it's false sidebar should be closed // Sidebar style when it's closed const closeStyle = { - transform: "translate(-100%, 0px)", - transition: "transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms" + transform: 'translate(-100%, 0px)', + transition: 'transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms' } this.setState({ open: false, - mainStyle: { marginLeft: "0px" }, + mainStyle: { marginLeft: '0px' }, sidebarStyle: closeStyle, - sidebarClass: (sizeCondition(width)) ? "sidebar sidebar__large" - : ((source === 'auto') ? "sidebar " : "sidebar sidebar__over"), + sidebarClass: (sizeCondition(width)) ? 'sidebar sidebar__large' + : ((source === 'auto') ? 'sidebar ' : 'sidebar sidebar__over'), overlay: false }) @@ -142,9 +135,9 @@ export class Sidebar extends Component { } /** - * Callback function fired to determine sidebar and overlay sidebar status - * @param {boolean} if true, the sidebar is open - */ + * Callback function fired to determine sidebar and overlay sidebar status + * @param {boolean} if true, the sidebar is open + */ this.props.status(false) } @@ -155,7 +148,7 @@ export class Sidebar extends Component { * Handle resize event for window to change sidebar status * @param {event} evt is the event is passed by winodw resize event */ - handleResize = (evt) => { + handleResize = () => { // Set initial state let width = window.innerWidth @@ -163,78 +156,62 @@ export class Sidebar extends Component { if (sizeCondition(width)) { this.setState({ - sidebarClass: "sidebar sidebar__large", + sidebarClass: 'sidebar sidebar__large', overlay: false, overlayOpen: false }) this.props.overlay(false) if (this.state.auto && !this.state.shouldBeClosed) { - this.open(true) + this.open(true,'large') this.setState({ auto: false }) } - } - else { + } else { if (!this.state.overlayOpen) { if (!this.state.auto && this.state.open) { this.open(false, 'auto') - }else{ + }else { this.setState({ - overlayOpen:true, - overlay:true + overlayOpen: true, + overlay: true }) } } else { - this.setState({ sidebarClass: "sidebar sidebar__over", overlay: true }) + this.setState({ sidebarClass: 'sidebar sidebar__over', overlay: true }) this.props.overlay(true) - } - - } } - - /** - * Handle logout user - */ - handleLogout = () => { - let { dispatch } = this.props - dispatch(authorizeActions.dbLogout()) - - } - - /** * Handle keyup event for window to close sidebar * @param {event} evt is the event is passed by winodw key event */ - handleKeyUp = (evt) => { + handleKeyUp = (event: Event) => { if (this.state.overlayOpen) { if (this.state.open && keycode(event) === 'esc') { - this.open(false) + this.open(false,'keyup') } } } - componentWillMount = () => { + componentWillMount () { this.props.open(this.open) } getChildren = () => { - return React.Children.map(this.props.children, (childe) => { + return React.Children.map(this.props.children, (childe: any) => { if (childe.type.qcName === 'SidebarContent') { - const sideBarContent = React.cloneElement(childe, { + const sideBarContent = React.cloneElement(childe, { className: this.state.sidebarClass, cstyle: this.state.sidebarStyle, sidebar: this.open, overlay: this.state.overlay }) return sideBarContent - } - else if (childe.type.qcName === 'SidebarMain') { + } else if (childe.type.qcName === 'SidebarMain') { return React.cloneElement(childe, { cstyle: this.state.mainStyle }) } @@ -242,20 +219,20 @@ export class Sidebar extends Component { } - componentDidMount = () => { + componentDidMount () { this.handleResize() } /** - * Reneder component DOM - * @return {react element} return the DOM which rendered by component - */ - render() { + * Reneder component DOM + * @return {react element} return the DOM which rendered by component + */ + render () { return (