Started implementing toast message

src/App.js

@@ -8,10 +8,14 @@ import AppRoutes from "./AppRoutes";
 import Header from "./components/Header/Header";
 import { StyledEngineProvider } from "@mui/material";
 import GlobalStyle from "./components/Styles/globalStyles";
+import { useDispatch } from "react-redux";
+import { setToastMessage } from "./store/actions/toast/toastActions";
+import { ToastContainer } from "./components/Toast/Toast.styled";
 
 // const URL = "http://192.168.88.143:3001";
 // const socket = io(URL, {autoConnect: true, transports: ['websocket']});
 const App = () => {
+  const dispatch = useDispatch();
   // console.log(io)
 
   // const [isConnected, setIsConnected] = useState(socket.connected);
@@ -45,7 +49,7 @@ const App = () => {
   //   // });
   //   socket.on('povratna', (data) => {
   //     console.log(data)
- 
+
   // })
 
   //   // socket.open;
@@ -76,12 +80,20 @@ const App = () => {
     <Router history={history}>
       <Helmet>
         <title>{i18next.t("app.title")}</title>
-        
       </Helmet>
       <StyledEngineProvider injectFirst>
         {/* <button onClick={handleClick}>Kik</button> */}
         <Header />
         <GlobalStyle />
+        <button onClick={() => {
+          dispatch(setToastMessage({
+            position: "top",
+            timeout: 5000,
+            render: (<div>Tekst familijo</div>),
+            show: true,
+          }))
+        }}>Tekst</button>
+        <ToastContainer />
         {/* <div>
           <p>Connected: {"" + isConnected}</p>
           <br />

src/assets/styles/_base.scss

@@ -3,7 +3,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-anchor: none;
-  background-color: #F5F5F5;
 }
 
 * {

src/assets/styles/_functions.scss

@@ -1,7 +1,7 @@
 @function pxToRem($target, $context: $base-font-size) {
-  @return calc($target / $context) * 1rem;
+  @return ($target / $context) * 1rem;
 }
 
 @function pxToRemMd($target, $context: $base-font-size-md) {
-  @return calc($target / $context) * 1rem;
+  @return ($target / $context) * 1rem;
 }

src/components/Toast/Toast.js

@@ -0,0 +1,33 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { clearToastMessage } from "../../store/actions/toast/toastActions";
+import { selectToastMessage } from "../../store/selectors/toastSelectors";
+import { ToastContainer } from "./Toast.styled";
+
+const Toast = () => {
+  const toastMessage = useSelector(selectToastMessage);
+  const dispatch = useDispatch();
+
+  const ToastContent = useMemo(() => {
+    if (toastMessage?.render) return toastMessage.render;
+    return <></>
+  }, [toastMessage])
+
+  const autoDeleteMessage = useCallback(() => {
+    dispatch(clearToastMessage());
+  }, [])
+
+  useEffect(() => {
+    let timeoutObject;
+    if (toastMessage?.timeout) {
+        timeoutObject = setTimeout(autoDeleteMessage, toastMessage.timeout);
+    }
+    return () => clearTimeout(timeoutObject);
+  }, [toastMessage])
+
+  return (
+    <ToastContainer>{toastMessage?.show && <ToastContent />}</ToastContainer>
+  );
+};
+
+export default Toast;

src/components/Toast/Toast.styled.js

@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const ToastContainer = styled(Box)`
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    width: 100px;
+    background-color: green;
+    height: 100px;
+`

src/store/actions/toast/toastActionConstants.js

@@ -0,0 +1,2 @@
+export const SET_TOAST_MESSAGE = "TOAST_MESSAGE_SET";
+export const CLEAR_TOAST_MESSAGE = "TOAST_MESSAGE_CLEAR";

src/store/actions/toast/toastActions.js

@@ -0,0 +1,9 @@
+import { CLEAR_TOAST_MESSAGE, SET_TOAST_MESSAGE } from "./toastActionConstants";
+
+export const setToastMessage = (payload) => ({
+    type: SET_TOAST_MESSAGE,
+    payload,
+})
+export const clearToastMessage = () => ({
+    type: CLEAR_TOAST_MESSAGE
+})

src/store/middleware/internalServerErrorMiddleware.js

@@ -1,6 +1,4 @@
-import { ERROR_PAGE } from "../../constants/pages";
 import { attachPostRequestListener } from "../../request";
-import history from "../utils/history";
 
 //Interceptor unique name
 export const serverErrorMiddlewareInterceptorName =
@@ -11,8 +9,8 @@ export default () => (next) => (action) => {
     if (!error.response) {
       return Promise.reject(error);
     }
-    if (error.response.status === 5000) {
-      return history.push(ERROR_PAGE);
+    if (error.response.status === 500) {
+      return "aaa";
     }
     return Promise.reject(error);
   }, serverErrorMiddlewareInterceptorName);

src/store/reducers/index.js

@@ -15,6 +15,7 @@ import chatReducer from "./chat/chatReducer";
 import queryStringReducer from "./queryString/queryStringReducer";
 import exchangeReducer from "./exchange/exchangeReducer";
 import reviewReducer from "./review/reviewReducer";
+import toastReducer from "./toast/toastReducer";
 
 const loginPersistConfig = {
   key: "login",
@@ -80,4 +81,5 @@ export default combineReducers({
   queryString: queryStringReducer,
   exchange: exchangeReducer,
   review: reviewReducer,
+  toast: toastReducer,
 });

src/store/reducers/toast/toastReducer.js

@@ -0,0 +1,25 @@
+import createReducer from "../../utils/createReducer";
+import {
+  CLEAR_TOAST_MESSAGE,
+  SET_TOAST_MESSAGE,
+} from "../../actions/toast/toastActionConstants";
+
+const initialState = {
+  toastMessage: {},
+};
+export default createReducer(
+  {
+    [SET_TOAST_MESSAGE]: setToastMessage,
+    [CLEAR_TOAST_MESSAGE]: clearToastMessage,
+  },
+  initialState
+);
+function setToastMessage(state, action) {
+  return {
+    ...state,
+    toastMessage: action.payload,
+  };
+}
+function clearToastMessage() {
+  return initialState;
+}

src/store/selectors/toastSelectors.js

@@ -0,0 +1,8 @@
+import { createSelector } from "reselect";
+
+const toastSelector = (state) => state.toast;
+
+export const selectToastMessage = createSelector(
+    toastSelector,
+    (state) => state.toastMessage
+)