typization

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",

src/App.js → 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<typeof mapStateToProps>
+type DispatchPropsType = {
+  initialize: () => void
+}
+
+class App extends Component<MapPropsType & DispatchPropsType> {
 
-  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<ComponentType>(
   withRouter,
   connect(mapStateToProps, { initialize })
 )(App);

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<PropsTypes> = ({ name, path }) => {

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<OwnPropsType> = ({ dialogsPage, sendMessage }) => {
+
+  const addNewMessage = (values: { newMessageBody: string }) => {
+    sendMessage(values.newMessageBody);
+  }
+  return (
+    <div className={s.dialogs}>
+      <div className={s.dialogsItems}>
+        {dialogsPage.dialogs.map((item) => {
+          return <DialogItem key={item.id} name={item.name} path={item.id} />;
+        })}
+      </div>
+      <div className={s.messages}>
+        {dialogsPage.messages.map((item) => {
+          return <Message messageContent={item.message} key={item.id} />;
+        })}
+      </div>
+
+      <AddReduxMessageForm onSubmit={addNewMessage} />
+    </div>
+  );
+};
+
+type NewMessageFormFormValuesType = {
+  newMessageBody: string
+}
+type PropsType = {}
+type NewMessageFormValuesKeysType = GetStringKeys<NewMessageFormFormValuesType>
+
+const maxLength50 = maxLengthCreator(50);
+
+const AddMessageForm: React.FC<InjectedFormProps<NewMessageFormFormValuesType, PropsType> & PropsType> = ({ handleSubmit }) => {
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        {createField<NewMessageFormValuesKeysType>("Enter your message", "newMessageBody", [required, maxLength50], TextArea)}
+      </div>
+      <div>
+        <button>Send</button>
+      </div>
+    </form>
+  );
+};
+
+const AddReduxMessageForm = reduxForm<NewMessageFormFormValuesType>({ form: "dialogAddMessageForm" })(AddMessageForm);
+
+export default Dialogs;

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<React.ComponentType>(
   WithAuthRedirect,
-  connect<MapStatePropsType, MapDispatchPropsType, OwnPropsType, AppStateType>(mapStateToProps, MapDispatchProps)
+  connect(mapStateToProps, {...actions})
 )(Dialogs);

src/components/FormsControl/FormsControl.tsx

@@ -54,4 +54,6 @@ export function createField<T extends string | undefined>(placeholder: string |
       </div>
     )
   )
-}
+}
+
+export type GetStringKeys<T> =  Extract<keyof T, string>

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<LoginFormOwnProps>
 
 const LoginForm: React.FC<InjectedFormProps<LoginFormValuesType, LoginFormOwnProps> & LoginFormOwnProps> = ({ handleSubmit, error, captchaUrl }) => {
   return (
@@ -47,8 +48,6 @@ type LoginFormValuesType = {
   email: string
 }
 
-type LoginFormOwnPropsKeys = Extract<keyof LoginFormValuesType, string>
-
 const Login: React.FC<MapStatePropsType & MapDispatchPropsType> = (props) => {
   const onSubmit = ({ email, password, rememberMe, captcha }: any) => {
     props.login(email, password, rememberMe, captcha);

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<AddPostFormValuesType>
+
+const MyPostForm: React.FC<InjectedFormProps<AddPostFormValuesType, PropsType> & PropsType> = ({handleSubmit}) => {
+  return (
+    <Form onSubmit={handleSubmit}>
+      {createField<LoginFormValuesTypeKeys>("Post a message", "newPostText", [required], TextArea)}
+      <button type="submit">Add Post</button>
+      <button>Remove</button>
+    </Form>
+  );
+};
+
+const LoginReduxForm = reduxForm<AddPostFormValuesType>({
+  form: "posts",
+})(MyPostForm);
+
+type MyPostsPropsType = {
+  postsData: Array<PostType>
+  addPost: (newPostText: string) => void
+}
+
+const MyPosts: React.FC<MyPostsPropsType> = ({ postsData, addPost }) => {
+
+  const onSubmit = (values: AddPostFormValuesType) => {
+    addPost(values.newPostText);
+  };
+
+  return (
+    <div className={s.postBlock}>
+      <h3>My Posts</h3>
+      <LoginReduxForm onSubmit={onSubmit} />
+      <div className={s.posts}>
+        {[...postsData].reverse().map((item) => {
+          return (
+            <Post
+              message={item.message}
+              likeCount={item.likeCount}
+              key={item.id}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MyPosts;