added types

src/components/Comments/index.tsx

@@ -23,7 +23,9 @@ export default function Comments() {
   const actions = useCommentsDispatch();
   const { t } = useTranslation();
 
-  useEffect(() => actions.getComments(), []);
+  useEffect(() => {
+    actions.getComments();
+  }, []);
 
   if (state.loading) {
     return <NoResult>{t('LOADING')}</NoResult>;

src/components/Editor/index.tsx

@@ -10,12 +10,12 @@ export default function Editor() {
   const [name, setName] = useState(lscache.get('name') || '');
   const [email, setEmail] = useState(lscache.get('email') || '');
 
-  const form = useRef();
-  const submit = useRef();
+  const form: React.RefObject<HTMLFormElement> = useRef(null);
+  const submit: React.RefObject<HTMLButtonElement> = useRef(null);
   const { t } = useTranslation();
   const actions = useCommentsDispatch();
 
-  const onValideSubmit = e => {
+  const onValidSubmit: React.FormEventHandler<HTMLFormElement> = e => {
     e.preventDefault();
     setLoading(true);
     actions
@@ -34,22 +34,22 @@ export default function Editor() {
       });
   };
 
-  const onEnter = e => {
+  const onEnter = (e: React.KeyboardEvent) => {
     if (e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {
-      submit.current.click();
+      submit.current?.click();
     }
   };
 
   useLayoutEffect(() => {
-    form.current.addEventListener('keydown', onEnter);
+    form.current?.addEventListener('keydown', onEnter);
     return () => {
-      form.current.removeEventListener('keydown', onEnter);
+      form.current?.removeEventListener('keydown', onEnter);
     };
   }, [form.current]);
 
   return (
     <Container>
-      <Form ref={form} onSubmit={onValideSubmit}>
+      <Form ref={form} onSubmit={onValidSubmit}>
         <Textarea
           onChange={e => setBody(e.target.value)}
           placeholder={t('COMMENT_PLACEHOLDER')}

src/components/Reactions/index.tsx

@@ -3,13 +3,17 @@ import React, { useEffect, useCallback } from 'react';
 import { ContentBubbleContainer, ContentBubble, ContentBubbleCount } from './style';
 import { useReactionDispatch, useReactionState } from 'providers/Reactions';
 
-function ReactionsComponent({ emotions }) {
+type Props = {
+  emotions: string[];
+};
+
+function ReactionsComponent({ emotions }: Props) {
   const reactionsState = useReactionState();
   const actions = useReactionDispatch();
 
   const { aggregation, userReaction } = reactionsState?.reactions || {};
 
-  const onReact = useCallback(reaction => actions.react(reaction), []);
+  const onReact = useCallback((reaction: string) => actions.react(reaction), []);
 
   useEffect(() => {
     actions.getReactions();

src/components/Reactions/style.js → src/components/Reactions/style.ts

@@ -9,7 +9,10 @@ export const ContentBubbleContainer = styled.div`
   flex-wrap: wrap;
 `;
 
-export const ContentBubble = styled.button`
+export const ContentBubble =
+  styled.button <
+  { $selected: boolean } >
+  `
   border: none;
   cursor: pointer;
   padding: 8px;

src/providers/Comments/index.tsx

@@ -1,15 +1,45 @@
 import React, { useReducer, useCallback } from 'react';
 import { useRequest } from 'providers/Requests';
 
-const CommentsStateContext = React.createContext(undefined);
-const CommentsDispatchContext = React.createContext(undefined);
+type Comment = {
+  _id: string;
+  secret: string;
+  createdAt: Date;
+  body: string;
+  owner: {
+    gravatar: string;
+    email: string;
+    name: string;
+  };
+};
+
+type CommentsState = {
+  loading: boolean;
+  comments: Comment[];
+};
+
+type CommentsAction =
+  | { type: 'ADD_COMMENT'; payload: Comment }
+  | { type: 'GET_COMMENTS'; payload: Comment[] }
+  | { type: 'REMOVE_COMMENT'; payload: Partial<Comment> };
+
+type CommentsDispatch = {
+  addComment: (data: Partial<Comment>) => Promise<void>;
+  removeComment: (data: Comment) => Promise<void>;
+  getComments: () => Promise<void>;
+};
+
+const CommentsStateContext = React.createContext<CommentsState | undefined>(undefined);
+const CommentsDispatchContext = React.createContext<CommentsDispatch | undefined>(
+  undefined
+);
 
 const initialState = {
   loading: true,
   comments: []
 };
 
-const reducer = (state, action) => {
+const reducer = (state: CommentsState, action: CommentsAction) => {
   switch (action.type) {
     case 'ADD_COMMENT':
       return {
@@ -32,16 +62,19 @@ const reducer = (state, action) => {
   }
 };
 
-export default function CommentsProvider(props) {
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function CommentsProvider(props: Props) {
   const request = useRequest();
 
   const [state, dispatch] = useReducer(reducer, {
-    ...initialState,
-    ...props
+    ...initialState
   });
 
   const addComment = useCallback(
-    data => {
+    (data: Partial<Comment>) => {
       return request.post(`/comments`, { ...data }).then(response =>
         dispatch({
           type: 'ADD_COMMENT',
@@ -53,7 +86,7 @@ export default function CommentsProvider(props) {
   );
 
   const removeComment = useCallback(
-    data => {
+    (data: Partial<Comment>) => {
       return request
         .delete(`/comments/${data._id}?secret=${data.secret}`)
         .then(() => dispatch({ type: 'REMOVE_COMMENT', payload: data }));

src/providers/Language/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import i18n from 'i18next';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
 import en from 'locales/en.json';
@@ -25,7 +25,17 @@ i18n.use(initReactI18next).init({
   }
 });
 
-export default function LanguageProvider(props) {
-  i18n.changeLanguage(props.language);
+type Props = {
+  children: React.ReactNode;
+  language: string | null;
+};
+
+export default function LanguageProvider(props: Props) {
+  useEffect(() => {
+    if (props.language) {
+      i18n.changeLanguage(props.language);
+    }
+  }, [props.language]);
+
   return <I18nextProvider i18n={i18n}>{props.children}</I18nextProvider>;
 }

src/providers/Reactions/index.tsx

@@ -1,15 +1,44 @@
 import React, { useReducer, useCallback } from 'react';
 import { useRequest } from 'providers/Requests';
 
-const ReactionStateContext = React.createContext(undefined);
-const ReactionDispatchContext = React.createContext(undefined);
+type State = {
+  loading: boolean;
+  reactions: {
+    aggregation: {
+      _id: string;
+      count: number;
+    }[];
+    userReaction: {
+      reaction: string;
+    };
+  };
+};
+
+type ReactionDispatch = {
+  react: (reaction: string) => void;
+  getReactions: () => void;
+};
+
+type Action =
+  | { type: 'REACT'; payload: State['reactions'] }
+  | { type: 'GET_REACTIONS'; payload: State['reactions'] };
 
-const initialState = {
+const ReactionStateContext = React.createContext<State | undefined>(undefined);
+const ReactionDispatchContext = React.createContext<ReactionDispatch | undefined>(
+  undefined
+);
+
+const initialState: State = {
   loading: true,
-  reactions: []
+  reactions: {
+    aggregation: [],
+    userReaction: {
+      reaction: ''
+    }
+  }
 };
 
-const reducer = (state, action) => {
+const reducer = (state: State, action: Action) => {
   switch (action.type) {
     case 'REACT':
       return {
@@ -43,16 +72,19 @@ export function useReactionDispatch() {
   return context;
 }
 
-export default function ReactionProvider(props) {
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function ReactionProvider(props: Props) {
   const request = useRequest();
 
   const [state, dispatch] = useReducer(reducer, {
-    ...initialState,
-    ...props
+    ...initialState
   });
 
   const react = useCallback(
-    reaction => {
+    (reaction: string) => {
       return request.post(`/reactions`, { reaction }).then(response =>
         dispatch({
           type: 'REACT',

src/providers/Requests/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { ErrorMessage, Close } from '../Comments/style';
 import { Preloader } from './style';
 
-const RequestContext = React.createContext(undefined);
+const RequestContext = React.createContext<AxiosInstance | undefined>(undefined);
 
 export function useRequest() {
   const context = React.useContext(RequestContext);
@@ -14,7 +14,11 @@ export function useRequest() {
   return context;
 }
 
-export default function RequestProvider(props) {
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function RequestProvider(props: Props) {
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(true);
 
@@ -42,7 +46,7 @@ export default function RequestProvider(props) {
         ...axios.defaults.transformResponse
       ]
     });
-  }, [axios, props.baseURL]);
+  }, [axios]);
 
   useEffect(() => {
     if (instance) {

src/providers/Theme/index.tsx

@@ -29,9 +29,14 @@ const themes = {
     buttonColor: '#fff',
     textColor: '#2a2e2e'
   }
+} as const;
+
+type Props = {
+  children: React.ReactNode;
+  theme: string | null;
 };
 
-export default function Theme(props) {
-  const theme = themes[props.theme] || themes.light;
+export default function Theme(props: Props) {
+  const theme = themes[props.theme || 'light'];
   return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
 }

src/utils/emotions.ts

@@ -1,4 +1,4 @@
-export const parseEmotions = str => {
+export const parseEmotions = (str: string | null) => {
   if (!str) return [];
 
   const array = String(str).split(',');