redux added

master
mahdi 3 years ago
parent fe86c1fd7a
commit 89c67d9ac8
  1. 42
      src/App.js
  2. 3
      src/components/alert/Alert.js
  3. 13
      src/components/sweetAlertToast/SweetAlert.css
  4. 1
      src/components/sweetAlertToast/SweetToast.js
  5. 28
      src/components/testt/Testt.js
  6. 97
      src/components/testt/testt.css
  7. 18
      src/reducers/Public.js
  8. 0
      src/reducers/index.js
  9. 1
      src/redux/index.js
  10. 46
      src/redux/modalBox/modalActions.js
  11. 18
      src/redux/modalBox/modalReducer.js
  12. 1
      src/redux/modalBox/modalTypes.js
  13. 6
      src/redux/store.js

@ -5,8 +5,11 @@ import Functionalities from "./components/Functionalities/Functionalities";
import Footer from "./components/footer/Footer"; import Footer from "./components/footer/Footer";
import Alert from "./components/alert/Alert"; import Alert from "./components/alert/Alert";
import Toast from "./components/toast/Toast"; import Toast from "./components/toast/Toast";
import Testt from "./components/testt/Testt";
import SweetAlert from "./components/sweetAlertToast/SweetToast"; import SweetAlert from "./components/sweetAlertToast/SweetToast";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Provider } from "react-redux";
import store from "./redux/store";
function App() { function App() {
// state // state
@ -33,27 +36,30 @@ function App() {
}; };
return ( return (
<div className={`App ${isDark ? "theme-dark" : ""}`}> <Provider store={store}>
<div className="w-75 m-auto"> <div className={`App ${isDark ? "theme-dark" : ""}`}>
<div className="theme-switcher-wrap"> <div className="w-75 m-auto">
<div class="form-check form-switch"> <div className="theme-switcher-wrap">
<input <div class="form-check form-switch">
class="form-check-input" <input
type="checkbox" class="form-check-input"
id="flexSwitchCheckDefault" type="checkbox"
onClick={handleLabelClick} id="flexSwitchCheckDefault"
/> onClick={handleLabelClick}
/>
</div>
</div> </div>
</div> <Testt />
<Header /> {/* <Header />
<Functionalities /> <Functionalities />
<Footer /> <Footer />
<Alert /> <Alert />
<Toast /> <Toast />
<SweetAlert /> <SweetAlert /> */}
</div>
</div> </div>
</div> </Provider>
); );
} }

@ -3,6 +3,8 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import "./alert.css"; import "./alert.css";
import undraw from "../../icons/undraw.png"; import undraw from "../../icons/undraw.png";
import { INFO_ALERT } from "../../redux";
import { connect } from "react-redux";
const Alert = () => { const Alert = () => {
// error1 // error1
@ -207,6 +209,7 @@ const Alert = () => {
}, },
}); });
}; };
return ( return (
<div className="mt-5"> <div className="mt-5">
<button className="btn btn-danger btn-lg" onClick={showAlert}> <button className="btn btn-danger btn-lg" onClick={showAlert}>

@ -1,8 +1,16 @@
.swal2-timer-progress-bar-container {
background-color: var(--error-color7) !important;
direction: ltr !important;
}
.swal2-timer-progress-bar {
background-color: var(--toast-bg-error) !important;
}
.swal2-icon { .swal2-icon {
font-size: 13px !important; font-size: 13px !important;
} }
.swal2-timer-progress-bar { .swal2-timer-progress-bar {
background-color: palevioletred !important; /* background-color: #000 !important; */
direction: rtl !important;
} }
/* !error Toast */ /* !error Toast */
.error-toast-title { .error-toast-title {
@ -29,3 +37,6 @@
color: var(--toast-bg-success) !important; color: var(--toast-bg-success) !important;
padding: 15px !important; padding: 15px !important;
} }
.iconColor {
color: slateblue !important;
}

@ -14,6 +14,7 @@ const SweetToast = () => {
title: "error-toast-title", title: "error-toast-title",
closeButton: "error-toast-closeButton", closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox", popup: "error-toast-modalBox",
iconColor: "icon-color",
}, },
showConfirmButton: false, showConfirmButton: false,
timer: 3000, timer: 3000,

@ -0,0 +1,28 @@
import React from "react";
import "./testt.css";
import { infoAlert } from "../../redux";
import { connect } from "react-redux";
function Testt(props) {
return (
<div>
<button className="btn btn-danger btn-lg" onClick={props.infoAlert}>
اررور 1
</button>
</div>
);
}
const mapStateToProps = (state) => {
return {
showCloseButton: state.showCloseButton,
};
};
const mapDispatchToProps = (dispatch) => {
return {
infoAlert: () => dispatch(infoAlert()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Testt);

@ -1,9 +1,3 @@
:root {
--error-color1: #06bace;
--error-color2: #3ee924;
--white: #fff;
--content-color: #646464;
}
/* TODO common styles */ /* TODO common styles */
.swal2-container.swal2-center > .swal2-popup { .swal2-container.swal2-center > .swal2-popup {
border: solid 2px #707070; border: solid 2px #707070;
@ -63,7 +57,6 @@
box-shadow: 0px 0px 0px black !important; box-shadow: 0px 0px 0px black !important;
border: 0px; border: 0px;
} }
/* ? دکمه ضربدر بالا سمت چپ */ /* ? دکمه ضربدر بالا سمت چپ */
.close-button-1 { .close-button-1 {
background-color: var(--error-color1) !important; background-color: var(--error-color1) !important;
@ -80,6 +73,7 @@
background-color: var(--white) !important; background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important; border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important; color: var(--error-color1) !important;
text-align: left !important;
} }
/* ? هاور کانفرم باتن */ /* ? هاور کانفرم باتن */
.confirm-button-1:hover { .confirm-button-1:hover {
@ -142,6 +136,9 @@
text-align: center !important; text-align: center !important;
color: var(--error-color2) !important; color: var(--error-color2) !important;
} }
.alert-popup4 {
width: 440px;
}
/* !error5 */ /* !error5 */
/* ? کانفرم باتن */ /* ? کانفرم باتن */
.confirm-button-5 { .confirm-button-5 {
@ -170,3 +167,89 @@
color: var(--white) !important; color: var(--white) !important;
border: solid 4px var(--error-color1) !important; border: solid 4px var(--error-color1) !important;
} }
/* !error7 */
/* ? تایتل */
.title-error-7 {
color: var(--error-color7) !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-7 {
background-color: var(--error-color7-button) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-7:hover {
background-color: var(--white) !important;
color: var(--error-color7) !important;
border: solid 4px var(--error-color7-button) !important;
}
/* ? کانفرم باتن */
.confirm-button-7 {
background-color: var(--white) !important;
border: solid 2px var(--error-color7-button) !important;
color: var(--error-color7) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-7:hover {
background-color: var(--error-color7-button) !important;
color: var(--white) !important;
}
/* ? کنسل باتن */
.cancle-button7 {
background-color: var(--error-color7-button) !important;
color: var(--white) !important;
border: solid 2px var(--error-color7-button) !important;
}
/* ? هاور کنسل باتن */
.cancle-button7:hover {
background-color: var(--white) !important;
color: var(--error-color7-button) !important;
}
/* !error8 */
.title-error-8 {
color: var(--error-color7-button) !important;
text-align: center !important;
}
.alert-popup8 {
width: 440px;
}
/* !error9 */
.title-error-9 {
color: var(--white) !important;
}
.alert-popup9 {
background-color: var(--error-color2) !important;
border-color: var(--error-color2) !important;
}
.close-button-9 {
background-color: var(--toast-bg-success) !important;
color: var(--toast-success-color) !important;
}
.confirm-button-9 {
background-color: #35bb20 !important;
}
.cancle-button9 {
background-color: var(--white) !important;
color: var(--error-color2) !important;
}
.footer-error-9 a {
color: var(--white) !important;
border-bottom-color: var(--white) !important;
font-size: 18px !important;
}
/* !error10 */
.alert-popup10 {
background-color: var(--error-color7-button) !important;
border-color: var(--error-color7-button) !important;
}
.close-button-10 {
background-color: #fd6a6a !important;
color: var(--white) !important;
}
.confirm-button-10 {
background-color: #bb2020 !important;
}
.cancle-button10 {
background-color: var(--white) !important;
color: var(--error-color7-button) !important;
}

@ -0,0 +1,18 @@
let initialState = {
alert: null,
};
const PublicApi = (state = initialState, payload) => {
const { type, data } = payload;
switch (type) {
case "alert":
return {
...state,
alert: { title: data.title, message: data.message, type: data.type },
};
default:
return { ...state };
}
};
export default PublicApi;

@ -0,0 +1 @@
export { infoAlert } from "./modalBox/modalActions";

@ -0,0 +1,46 @@
import { INFO_ALERT } from "./modalTypes";
import Swal from "sweetalert2";
// export const infoAlert = () => {
// return {
// type: INFO_ALERT,
// title: "",
// text: "",
// confirmButton: true,
// confirmButtonText: "",
// showCloseButton: true,
// showCancelButton: false,
// cancelButtonText: "",
// };
// };
// export const infoAlert = () => {
// Swal.fire({
// title: "عنوان متن ارور",
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
// confirmButtonText: "متوجه شدم",
// showCloseButton: true,
// customClass: {
// title: "title-error-1",
// closeButton: "close-button-1",
// confirmButton: "confirm-button-1",
// },
// });
// };
export const infoAlert = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
},
});
return {
type: INFO_ALERT,
};
};

@ -0,0 +1,18 @@
import { INFO_ALERT } from "./modalTypes";
const initialState = {
showCloseButton: false,
};
const modalReducer = (state = initialState, action) => {
switch (action.type) {
case INFO_ALERT:
return {
...state,
};
default:
return state;
}
};
export default modalReducer;

@ -0,0 +1 @@
export const INFO_ALERT = "INFO_ALERT";

@ -0,0 +1,6 @@
import { createStore } from "redux";
import modalReducer from "./modalBox/modalReducer";
const store = createStore(modalReducer);
export default store;
Loading…
Cancel
Save