From 1c7c0709e62163d66707721558da4e9724b36458 Mon Sep 17 00:00:00 2001 From: Dmitry Mikhailyuk Date: Fri, 10 Jan 2025 17:03:55 +0100 Subject: [PATCH] typization --- package.json | 2 +- src/{App.js => App.tsx} | 18 +++-- src/components/Dialogs/DialogItem/Dialog.tsx | 2 +- src/components/Dialogs/Dialogs.jsx | 56 ---------------- src/components/Dialogs/Dialogs.tsx | 61 +++++++++++++++++ src/components/Dialogs/DialogsContainer.tsx | 20 +----- src/components/FormsControl/FormsControl.tsx | 4 +- src/components/Login/Login.tsx | 5 +- src/components/Profile/MyPosts/MyPosts.jsx | 57 ---------------- src/components/Profile/MyPosts/MyPosts.tsx | 65 +++++++++++++++++++ ...ostsContainer.jsx => MyPostsContainer.tsx} | 0 .../MyPosts/Posts/{Post.jsx => Post.tsx} | 0 .../Profile/{Profile.jsx => Profile.tsx} | 0 ...fileContainer.jsx => ProfileContainer.tsx} | 0 .../Profile/ProfileInfo/ProfielDataForm.jsx | 51 --------------- .../Profile/ProfileInfo/ProfielDataForm.tsx | 56 ++++++++++++++++ .../{ProfileInfo.js => ProfileInfo.tsx} | 46 +++++++++---- ...leStatus.test.js => ProfileStatus.test.ts} | 0 ...WithHooks.js => ProfileStatusWithHooks.ts} | 0 src/components/Users/{User.js => User.tsx} | 10 ++- src/hoc/WithAuthRedirect.js | 22 ------- src/hoc/WithAuthRedirect.tsx | 29 +++++++++ src/hoc/withRouter.js | 19 ------ src/hoc/withRouter.tsx | 11 ++++ src/redux/dialogsReducer.ts | 2 +- src/redux/redux-store.ts | 3 +- src/reportWebVitals.js | 2 +- src/types/types.ts | 1 + 28 files changed, 290 insertions(+), 252 deletions(-) rename src/{App.js => App.tsx} (84%) delete mode 100644 src/components/Dialogs/Dialogs.jsx create mode 100644 src/components/Dialogs/Dialogs.tsx delete mode 100644 src/components/Profile/MyPosts/MyPosts.jsx create mode 100644 src/components/Profile/MyPosts/MyPosts.tsx rename src/components/Profile/MyPosts/{MyPostsContainer.jsx => MyPostsContainer.tsx} (100%) rename src/components/Profile/MyPosts/Posts/{Post.jsx => Post.tsx} (100%) rename src/components/Profile/{Profile.jsx => Profile.tsx} (100%) rename src/components/Profile/{ProfileContainer.jsx => ProfileContainer.tsx} (100%) delete mode 100644 src/components/Profile/ProfileInfo/ProfielDataForm.jsx create mode 100644 src/components/Profile/ProfileInfo/ProfielDataForm.tsx rename src/components/Profile/ProfileInfo/{ProfileInfo.js => ProfileInfo.tsx} (66%) rename src/components/Profile/ProfileInfo/{ProfileStatus.test.js => ProfileStatus.test.ts} (100%) rename src/components/Profile/ProfileInfo/{ProfileStatusWithHooks.js => ProfileStatusWithHooks.ts} (100%) rename src/components/Users/{User.js => User.tsx} (83%) delete mode 100644 src/hoc/WithAuthRedirect.js create mode 100644 src/hoc/WithAuthRedirect.tsx delete mode 100644 src/hoc/withRouter.js create mode 100644 src/hoc/withRouter.tsx diff --git a/package.json b/package.json index e478b92..37d1269 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "node": "14.21.3", "private": true, - "homepage": "https://ex-machin.github.io/Social-Network/", + "homepage": "https://ex-machin.github.io/", "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", diff --git a/src/App.js b/src/App.tsx similarity index 84% rename from src/App.js rename to src/App.tsx index 4935116..0790a79 100644 --- a/src/App.js +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { Suspense } from "react"; +import React, { Component, ComponentType, Suspense } from "react"; import { connect } from "react-redux"; import { Route, Routes } from "react-router-dom"; import { compose } from "redux"; @@ -12,6 +12,7 @@ import Settings from "./components/Settings/Settings"; import UsersContainer from "./components/Users/UsersContainer"; import { withRouter } from "./hoc/withRouter"; import { initialize } from "./redux/app-reducer"; +import { AppStateType } from "./redux/redux-store"; const DialogsContainer = React.lazy(() => import("./components/Dialogs/DialogsContainer") ); @@ -20,10 +21,15 @@ const ProfileContainer = React.lazy(() => ); const Login = React.lazy(() => import("./components/Login/Login")); -class App extends React.Component { +type MapPropsType = ReturnType +type DispatchPropsType = { + initialize: () => void +} + +class App extends Component { - catchAllUnhandledErrors = (promiseRejectionValue) =>{ - console.warn(promiseRejectionValue); + catchAllUnhandledErrors = () =>{ + alert("Some error occured") } componentDidMount() { @@ -69,11 +75,11 @@ class App extends React.Component { } } -const mapStateToProps = (state) => ({ +const mapStateToProps = (state: AppStateType) => ({ init: state.app.initialized, }); -export default compose( +export default compose( withRouter, connect(mapStateToProps, { initialize }) )(App); diff --git a/src/components/Dialogs/DialogItem/Dialog.tsx b/src/components/Dialogs/DialogItem/Dialog.tsx index 5a40651..2abe3cf 100644 --- a/src/components/Dialogs/DialogItem/Dialog.tsx +++ b/src/components/Dialogs/DialogItem/Dialog.tsx @@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom"; type PropsTypes = { name: string - path: string + path: number } const DialogItem: React.FC = ({ name, path }) => { diff --git a/src/components/Dialogs/Dialogs.jsx b/src/components/Dialogs/Dialogs.jsx deleted file mode 100644 index 39ec108..0000000 --- a/src/components/Dialogs/Dialogs.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react"; -import { Field, reduxForm } from "redux-form"; -import { required, maxLengthCreator } from "../../utils/validators/validators"; -import { TextArea } from "../FormsControl/FormsControl"; -import DialogItem from "./DialogItem/Dialog"; -import s from "./Dialogs.module.css"; -import Message from "./Messages/Messages"; - -const Dialogs = ({ dialogsPage, sendMessage }) => { - - const addNewMessage = (values) => { - sendMessage(values.newMessageBody); - } - - return ( -
-
- {dialogsPage.dialogs.map((item) => { - return ; - })} -
-
- {dialogsPage.messages.map((item) => { - return ; - })} -
- -
- ); -}; - -const maxLength50 = maxLengthCreator(50); - -const AddMessageForm = (props) => { - return ( -
-
- -
-
- -
-
- ); -}; - -const AddReduxMessageForm = reduxForm({ form: "dialogAddMessageForm" })( - AddMessageForm -); - -export default Dialogs; diff --git a/src/components/Dialogs/Dialogs.tsx b/src/components/Dialogs/Dialogs.tsx new file mode 100644 index 0000000..0b59392 --- /dev/null +++ b/src/components/Dialogs/Dialogs.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { InjectedFormProps, reduxForm } from "redux-form"; +import { initialStateType } from "../../redux/dialogsReducer"; +import { maxLengthCreator, required } from "../../utils/validators/validators"; +import { createField, GetStringKeys, TextArea } from "../FormsControl/FormsControl"; +import DialogItem from "./DialogItem/Dialog"; +import s from "./Dialogs.module.css"; +import Message from "./Messages/Messages"; + +type OwnPropsType = { + dialogsPage: initialStateType + sendMessage: (messageText: string) => void +} + +const Dialogs: React.FC = ({ dialogsPage, sendMessage }) => { + + const addNewMessage = (values: { newMessageBody: string }) => { + sendMessage(values.newMessageBody); + } + return ( +
+
+ {dialogsPage.dialogs.map((item) => { + return ; + })} +
+
+ {dialogsPage.messages.map((item) => { + return ; + })} +
+ + +
+ ); +}; + +type NewMessageFormFormValuesType = { + newMessageBody: string +} +type PropsType = {} +type NewMessageFormValuesKeysType = GetStringKeys + +const maxLength50 = maxLengthCreator(50); + +const AddMessageForm: React.FC & PropsType> = ({ handleSubmit }) => { + return ( +
+
+ {createField("Enter your message", "newMessageBody", [required, maxLength50], TextArea)} +
+
+ +
+
+ ); +}; + +const AddReduxMessageForm = reduxForm({ form: "dialogAddMessageForm" })(AddMessageForm); + +export default Dialogs; diff --git a/src/components/Dialogs/DialogsContainer.tsx b/src/components/Dialogs/DialogsContainer.tsx index f074a6a..55a39a1 100644 --- a/src/components/Dialogs/DialogsContainer.tsx +++ b/src/components/Dialogs/DialogsContainer.tsx @@ -9,29 +9,13 @@ type MapStatePropsType = { dialogsPage: initialStateType } -type MapDispatchPropsType = { - sendMessage: (newMessageBody: string) => void -} - -type OwnPropsType = { - -} - const mapStateToProps = (state: AppStateType): MapStatePropsType => { return { dialogsPage: state.dialogsPage, }; }; -let MapDispatchProps = (dispatch: any) => { - return { - sendMessage: (newMessageBody: any) => { - dispatch(actions.sendMessageCreator(newMessageBody)) - } - } -} - -export default compose( +export default compose( WithAuthRedirect, - connect(mapStateToProps, MapDispatchProps) + connect(mapStateToProps, {...actions}) )(Dialogs); diff --git a/src/components/FormsControl/FormsControl.tsx b/src/components/FormsControl/FormsControl.tsx index 18324e7..b160bf1 100644 --- a/src/components/FormsControl/FormsControl.tsx +++ b/src/components/FormsControl/FormsControl.tsx @@ -54,4 +54,6 @@ export function createField(placeholder: string | ) ) -} \ No newline at end of file +} + +export type GetStringKeys = Extract \ No newline at end of file diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx index 1ae9c85..ca9799f 100644 --- a/src/components/Login/Login.tsx +++ b/src/components/Login/Login.tsx @@ -5,11 +5,12 @@ import { login } from "../../redux/auth-reducer"; import { AppStateType } from "../../redux/redux-store"; import { required } from "../../utils/validators/validators"; import styles from '../FormsControl/FormControls.module.css'; -import { createField, Input } from "../FormsControl/FormsControl"; +import { createField, GetStringKeys, Input } from "../FormsControl/FormsControl"; type LoginFormOwnProps = { captchaUrl: string | null } +type LoginFormOwnPropsKeys = GetStringKeys const LoginForm: React.FC & LoginFormOwnProps> = ({ handleSubmit, error, captchaUrl }) => { return ( @@ -47,8 +48,6 @@ type LoginFormValuesType = { email: string } -type LoginFormOwnPropsKeys = Extract - const Login: React.FC = (props) => { const onSubmit = ({ email, password, rememberMe, captcha }: any) => { props.login(email, password, rememberMe, captcha); diff --git a/src/components/Profile/MyPosts/MyPosts.jsx b/src/components/Profile/MyPosts/MyPosts.jsx deleted file mode 100644 index 32a3147..0000000 --- a/src/components/Profile/MyPosts/MyPosts.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; -import { Field, Form, reduxForm } from "redux-form"; -import { - maxLengthCreator, - required, -} from "../../../utils/validators/validators"; -import { TextArea } from "../../FormsControl/FormsControl"; -import s from "./MyPosts.module.css"; -import Post from "./Posts/Post"; - -const maxLength10 = maxLengthCreator(10); - -const MyPostForm = ({handleSubmit}) => { - return ( -
- - - - - ); -}; - -const LoginReduxForm = reduxForm({ - form: "posts", -})(MyPostForm); - -const MyPosts = ({ postsData, addPost }) => { - - const onSubmit = (values) => { - addPost(values.post); - }; - - return ( -
-

My Posts

- -
- {[...postsData].reverse().map((item) => { - return ( - - ); - })} -
-
- ); -}; - -export default MyPosts; diff --git a/src/components/Profile/MyPosts/MyPosts.tsx b/src/components/Profile/MyPosts/MyPosts.tsx new file mode 100644 index 0000000..f951084 --- /dev/null +++ b/src/components/Profile/MyPosts/MyPosts.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import { Form, InjectedFormProps, reduxForm } from "redux-form"; +import { + required +} from "../../../utils/validators/validators"; +import { createField, GetStringKeys, TextArea } from "../../FormsControl/FormsControl"; +import s from "./MyPosts.module.css"; +import Post from "./Posts/Post"; +import { PostType } from "../../../types/types"; + +type PropsType = { + +} + +type AddPostFormValuesType = { + newPostText: string +} + +type LoginFormValuesTypeKeys = GetStringKeys + +const MyPostForm: React.FC & PropsType> = ({handleSubmit}) => { + return ( +
+ {createField("Post a message", "newPostText", [required], TextArea)} + + + + ); +}; + +const LoginReduxForm = reduxForm({ + form: "posts", +})(MyPostForm); + +type MyPostsPropsType = { + postsData: Array + addPost: (newPostText: string) => void +} + +const MyPosts: React.FC = ({ postsData, addPost }) => { + + const onSubmit = (values: AddPostFormValuesType) => { + addPost(values.newPostText); + }; + + return ( +
+

My Posts

+ +
+ {[...postsData].reverse().map((item) => { + return ( + + ); + })} +
+
+ ); +}; + +export default MyPosts; diff --git a/src/components/Profile/MyPosts/MyPostsContainer.jsx b/src/components/Profile/MyPosts/MyPostsContainer.tsx similarity index 100% rename from src/components/Profile/MyPosts/MyPostsContainer.jsx rename to src/components/Profile/MyPosts/MyPostsContainer.tsx diff --git a/src/components/Profile/MyPosts/Posts/Post.jsx b/src/components/Profile/MyPosts/Posts/Post.tsx similarity index 100% rename from src/components/Profile/MyPosts/Posts/Post.jsx rename to src/components/Profile/MyPosts/Posts/Post.tsx diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.tsx similarity index 100% rename from src/components/Profile/Profile.jsx rename to src/components/Profile/Profile.tsx diff --git a/src/components/Profile/ProfileContainer.jsx b/src/components/Profile/ProfileContainer.tsx similarity index 100% rename from src/components/Profile/ProfileContainer.jsx rename to src/components/Profile/ProfileContainer.tsx diff --git a/src/components/Profile/ProfileInfo/ProfielDataForm.jsx b/src/components/Profile/ProfileInfo/ProfielDataForm.jsx deleted file mode 100644 index 0c5946e..0000000 --- a/src/components/Profile/ProfileInfo/ProfielDataForm.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; -import { Field, reduxForm } from "redux-form"; -import { Input, TextArea } from "../../FormsControl/FormsControl"; -import s from "./ProfileInfo.module.css"; -import styles from "../../FormsControl/FormControls.module.css"; - -const ProfielDataForm = ({ profile, handleSubmit, error }) => { - return ( -
-
- -
- {error &&
{error}
} -
- Full name : - -
-
- Looking for a job - -
-
- Skills - -
-
About Me
- -
- Contacts : - {Object.keys(profile.contacts).map((key) => { - return ( -
- {key} - -
- ); - })} -
- - ); -}; - -const ProfielDataFormReduxForm = reduxForm({ form: "editProfile" })( - ProfielDataForm -); - -export default ProfielDataFormReduxForm; diff --git a/src/components/Profile/ProfileInfo/ProfielDataForm.tsx b/src/components/Profile/ProfileInfo/ProfielDataForm.tsx new file mode 100644 index 0000000..e05cf21 --- /dev/null +++ b/src/components/Profile/ProfileInfo/ProfielDataForm.tsx @@ -0,0 +1,56 @@ +import { InjectedFormProps, reduxForm } from "redux-form"; +import { ProfileType } from "../../../types/types"; +import styles from "../../FormsControl/FormControls.module.css"; +import { createField, GetStringKeys, Input, TextArea } from "../../FormsControl/FormsControl"; +import s from "./ProfileInfo.module.css"; + +type ProfileDataFormValuesType = { + profile: ProfileType + handleSubmit: () => void + error: string +} +type PropsType = {} +type ProfileTypeKeys = GetStringKeys + +const ProfielDataForm: React.FC & PropsType> = ({ profile, handleSubmit, error }) => { + return ( +
+
+ +
+ {error &&
{error}
} +
+ Full name : + {createField("Full name", "fullName", [], Input)} +
+
+ Looking for a job + {createField("", "lookingForAJob", [], Input, { type: "checkbox" })} +
+
+ Skills + {createField("My professionals skills", "lookingForAJobDescription", [], TextArea)} +
+
About Me
+ {createField("About me", "aboutMe", [], TextArea)} +
+ Contacts : + {Object.keys(profile.contacts).map((key) => { + return ( +
+ {key} + {/* todo create some validation for embedded objecst */} + {createField(key, "contacts." + key, [], Input)} +
+ ); + })} +
+ + ); +}; + +const ProfielDataFormReduxForm = reduxForm({ form: "editProfile" })( + ProfielDataForm +); + +export default ProfielDataFormReduxForm; diff --git a/src/components/Profile/ProfileInfo/ProfileInfo.js b/src/components/Profile/ProfileInfo/ProfileInfo.tsx similarity index 66% rename from src/components/Profile/ProfileInfo/ProfileInfo.js rename to src/components/Profile/ProfileInfo/ProfileInfo.tsx index aca6987..5d52f69 100644 --- a/src/components/Profile/ProfileInfo/ProfileInfo.js +++ b/src/components/Profile/ProfileInfo/ProfileInfo.tsx @@ -1,11 +1,21 @@ -import React, { useState } from "react"; -import Preloader from "../../Preloader/Preloader"; -import ProfileStatusWithHooks from "./ProfileStatusWithHooks"; -import s from "./ProfileInfo.module.css"; +import { ChangeEvent, useState } from "react"; import userPhoto from "../../../assets/images/avatar.png"; +import { ProfileType } from "../../../types/types"; +import Preloader from "../../Preloader/Preloader"; import ProfielDataForm from "./ProfielDataForm"; +import s from "./ProfileInfo.module.css"; +import ProfileStatusWithHooks from "./ProfileStatusWithHooks"; + +type PropsType = { + profile: ProfileType + status: string + updateStatus: (status: string) => void + isOwner: boolean + savePhoto: (file: File) => void + saveProfile: (profile: ProfileType) => Promise +} -const ProfileInfo = ({ +const ProfileInfo: React.FC = ({ profile, status, updateStatus, @@ -18,13 +28,14 @@ const ProfileInfo = ({ if (!profile) { return ; } - const onMainPhotoSelected = (e) => { - if (e.target.files.length) { + const onMainPhotoSelected = (e: ChangeEvent) => { + if (e.target.files?.length) { savePhoto(e.target.files[0]); } }; - const onSubmit = (formData) => { - saveProfile(formData).then(() => setEditMode(false)); + const onSubmit = (formData: ProfileType) => { + // TODO: remove then + saveProfile(formData).then(() => setEditMode(false)); }; return ( @@ -56,7 +67,13 @@ const ProfileInfo = ({ ); }; -const ProfileData = ({ profile, isOwner, goEditMode }) => { +type ProfileDataPropsType = { + profile: ProfileType + isOwner: boolean + goEditMode: () => void +} + +const ProfileData: React.FC = ({ profile, isOwner, goEditMode }) => { return (
{isOwner && } @@ -81,7 +98,7 @@ const ProfileData = ({ profile, isOwner, goEditMode }) => { ); })} @@ -90,7 +107,12 @@ const ProfileData = ({ profile, isOwner, goEditMode }) => { ); }; -export const Contact = ({ contactTitle, contactValue }) => { +type ContactProfileType = { + contactTitle: string + contactValue: string +} + +export const Contact: React.FC = ({ contactTitle, contactValue }) => { return (
{contactTitle}:{contactValue} diff --git a/src/components/Profile/ProfileInfo/ProfileStatus.test.js b/src/components/Profile/ProfileInfo/ProfileStatus.test.ts similarity index 100% rename from src/components/Profile/ProfileInfo/ProfileStatus.test.js rename to src/components/Profile/ProfileInfo/ProfileStatus.test.ts diff --git a/src/components/Profile/ProfileInfo/ProfileStatusWithHooks.js b/src/components/Profile/ProfileInfo/ProfileStatusWithHooks.ts similarity index 100% rename from src/components/Profile/ProfileInfo/ProfileStatusWithHooks.js rename to src/components/Profile/ProfileInfo/ProfileStatusWithHooks.ts diff --git a/src/components/Users/User.js b/src/components/Users/User.tsx similarity index 83% rename from src/components/Users/User.js rename to src/components/Users/User.tsx index b872f12..7f48003 100644 --- a/src/components/Users/User.js +++ b/src/components/Users/User.tsx @@ -2,8 +2,16 @@ import React from "react"; import { NavLink } from "react-router-dom"; import avatarMock from "../../assets/images/avatar.png"; import styles from "./users.module.css"; +import { UserType } from "../../types/types"; -const User = ({ user, followingInProgress, unfollow, follow }) => { +type PropsType = { + user: UserType + followingInProgress: Array + unfollow: (userId: number) => void + follow: (userId: number) => void +} + +const User: React.FC = ({ user, followingInProgress, unfollow, follow }) => { return (
diff --git a/src/hoc/WithAuthRedirect.js b/src/hoc/WithAuthRedirect.js deleted file mode 100644 index 2268e0c..0000000 --- a/src/hoc/WithAuthRedirect.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { Navigate } from "react-router-dom"; - -const mapStateToPropsForRedirect = (state) => ({ - isAuth: state.auth.isAuth, -}); - -export const WithAuthRedirect = (Component) => { - class RedirectComponent extends React.Component { - render() { - if (!this.props.isAuth) return ; - - return ; - } - } - const ConnectedAuthRedirectComponent = connect(mapStateToPropsForRedirect)( - RedirectComponent - ); - - return ConnectedAuthRedirectComponent; -}; diff --git a/src/hoc/WithAuthRedirect.tsx b/src/hoc/WithAuthRedirect.tsx new file mode 100644 index 0000000..c50451e --- /dev/null +++ b/src/hoc/WithAuthRedirect.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { connect } from "react-redux"; +import { Navigate } from "react-router-dom"; +import { AppStateType } from "../redux/redux-store"; + +// WCP - Wrapped Component Props + +const mapStateToPropsForRedirect = (state: AppStateType) => ({ + isAuth: state.auth.isAuth, +} as MapPropsType); + +type MapPropsType = { + isAuth: boolean +} + +type DispatchPropsType = {} + +export function WithAuthRedirect(WrappedComponent: React.ComponentType) { + const RedirectComponent: React.FC = (props) => { + let {isAuth, ...restProps} = props + + if (!isAuth) return ; + + return ; + } + const ConnectedAuthRedirectComponent = connect(mapStateToPropsForRedirect)(RedirectComponent); + + return ConnectedAuthRedirectComponent; +}; diff --git a/src/hoc/withRouter.js b/src/hoc/withRouter.js deleted file mode 100644 index 83558fb..0000000 --- a/src/hoc/withRouter.js +++ /dev/null @@ -1,19 +0,0 @@ -import { useLocation, useNavigate, useParams } from "react-router-dom"; - -export function withRouter(Component) { - function ComponentWithRouterProp(props) { - let location = useLocation(); - let navigate = useNavigate(); - let params = useParams(); - return ( - - ); - } - - return ComponentWithRouterProp; -} diff --git a/src/hoc/withRouter.tsx b/src/hoc/withRouter.tsx new file mode 100644 index 0000000..12c4e11 --- /dev/null +++ b/src/hoc/withRouter.tsx @@ -0,0 +1,11 @@ +import { useLocation, useNavigate, useParams } from "react-router-dom"; + +// WCP - Wrapped Component Props + +export function withRouter(WrappedComponent: React.ComponentType) { + const ComponentWithRouterProp = (props: WCP) => { + return + } + + return ComponentWithRouterProp; +} diff --git a/src/redux/dialogsReducer.ts b/src/redux/dialogsReducer.ts index bfbcd52..58eef04 100644 --- a/src/redux/dialogsReducer.ts +++ b/src/redux/dialogsReducer.ts @@ -45,7 +45,7 @@ const dialogsReducer = ( }; export const actions = { - sendMessageCreator: (newMessageBody: string) => ({type: "dialogs/SEND-MESSAGE", newMessageBody}), + sendMessage: (newMessageBody: string) => ({type: "dialogs/SEND-MESSAGE", newMessageBody}), } export default dialogsReducer; diff --git a/src/redux/redux-store.ts b/src/redux/redux-store.ts index 6e0bb58..5b57d7e 100644 --- a/src/redux/redux-store.ts +++ b/src/redux/redux-store.ts @@ -21,8 +21,7 @@ let rootReducer = combineReducers({ type RootReducerType = typeof rootReducer; export type AppStateType = ReturnType; -type PropertiesTypes = T extends {[key: string]: infer U} ? U : never -export type InferActionsTypes any}> = ReturnType> +export type InferActionsTypes = T extends {[keys: string]: (...args: any[]) => infer U} ? U : never //@ts-ignore const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js index 5253d3a..f00fe6c 100644 --- a/src/reportWebVitals.js +++ b/src/reportWebVitals.js @@ -1,4 +1,4 @@ -const reportWebVitals = onPerfEntry => { +const reportWebVitals = (onPerfEntry: any) => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); diff --git a/src/types/types.ts b/src/types/types.ts index 3d600a7..9114c09 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -30,6 +30,7 @@ export type ProfileType = { fullName: string; contacts: ContactsType; photos: PhotosType; + aboutMe: string }; export type UserType = {