remove/redux

package.json

@@ -60,8 +60,7 @@
     "pg": "8.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "redux": "4.0.5",
-    "redux-thunk": "2.3.0",
+    "react-is": "19.1.1",
     "reflect-metadata": "^0.1.10",
     "styled-components": "5.2.1",
     "typeorm": "0.2.25",

src/app/Components/Card/KeyInfoCard.js

@@ -1,9 +1,4 @@
 import style from 'styled-components';
-import React from 'react';
-
-// redux
-import { setNotification } from '../../redux/thunks/notification';
-// import { sendReport } from '../../redux/thunks/report';
 
 // components
 import CopyToClipboard from '../CopyToClipboard';
@@ -16,27 +11,27 @@ const ExtendedContainer = style(Container)`
     flex: 1;
     padding: 20px;
   }
-  
+
   .main h3 {
     margin: 0;
     font-size: 35px;
     margin-bottom: 0px;
     text-align: center;
     margin-bottom: 20px;
   }
-  
+
   .main span {
     display: flex;
     font-size: 20px;
     font-weight: bold;
     flex-direction: row;
   }
-  
+
   .main span > p, .main span > a {
     margin-left: 8px;
     font-weight: lighter;
   }
-  
+
   .main span a p, .footer p {
     margin-top: 0;
   }
@@ -56,7 +51,7 @@ const ExtendedContainer = style(Container)`
     padding-bottom: 10px;
     justify-content: center;
   }
-  
+
   .footer div p:first-child {
     margin-right: 13px;
   }
@@ -68,7 +63,7 @@ const ExtendedContainer = style(Container)`
     text-decoration: none;
     flex-direction: column;
   }
-  
+
   .footer a .button {
     width: 100%;
     font-size: 17px;
@@ -85,7 +80,7 @@ const NoRedirectText = style.p`
   font-style: italic;
 `;
 
-const card = ({ info, dispatch }) => {
+const card = ({ info }) => {
   if (!info) return null;
 
   const url = new URL(info.url.href);
@@ -130,14 +125,7 @@ const card = ({ info, dispatch }) => {
         <div>
           <CopyToClipboard
             content={info.url.href}
-            onClick={() =>
-              dispatch(
-                setNotification({
-                  type: 'success',
-                  content: <p>copied short url link to clipboard</p>,
-                })
-              )
-            }
+            onClick={() => {}}
           >
             <LinkStyle>share</LinkStyle>
           </CopyToClipboard>

src/app/Components/Card/SubmitKeyCard.js

@@ -1,11 +1,6 @@
 import style from 'styled-components';
 import React from 'react';
 
-// redux
-import { removeFormError } from '../../redux/thunks/form-error';
-import { connection as connect } from '../../redux';
-import { createKey } from '../../redux/thunks/key';
-
 // components
 import FormError from '../FormError';
 import Container from './style';
@@ -24,7 +19,7 @@ const CardFormContainer = style.div`
     margin-bottom: 5px;
     text-transform: capitalize;
   }
-  
+
   label::after {
     content: ':';
   }
@@ -53,8 +48,6 @@ const card = (props) => {
   const [expiration, setExpiration] = React.useState(5);
   const [url, setURL] = React.useState('');
 
-  const { formError, key } = props.state;
-
   const selectOptions = () => {
     return [5, 10, 20, 30, 60].map((expiration) => {
       return (
@@ -68,32 +61,33 @@ const card = (props) => {
   return (
     <Container className="card">
       <CardFormContainer className="form">
-        <FormError fieldName="url" formErrors={formError.response}>
+        <FormError fieldName="url">
           <CardFormInput
             name="url"
             className="input"
             placeholder="enter URL"
             onChange={(e) => {
-              props.dispatch(removeFormError(e.target.name));
+
 
               setURL(e.target.value);
             }}
             onKeyDown={(e) => {
               if (e.key.toLowerCase() === 'enter') {
-                props.dispatch(createKey(url, expiration));
+
               }
             }}
           />
         </FormError>
 
         <label>expiration</label>
-        <FormError fieldName="expiration" formErrors={formError.response}>
+        <FormError fieldName="expiration"
+        >
           <CardFormSelect
             name="expiration"
             defaultValue="5"
             className="select"
             onChange={(e) => {
-              props.dispatch(removeFormError(e.target.name));
+
 
               setExpiration(parseInt(e.target.value, 10));
             }}
@@ -104,8 +98,8 @@ const card = (props) => {
       </CardFormContainer>
       <div className="footer">
         <Button
-          isLoading={key.loading}
-          onClick={() => props.dispatch(createKey(url, expiration))}
+          isLoading={false}
+          // onClick={() => createKey(url, expiration)}
         >
           create key
         </Button>
@@ -114,4 +108,4 @@ const card = (props) => {
   );
 };
 
-export default connect(card);
+export default card;

src/app/Components/Feedback.js

@@ -1,11 +1,6 @@
 import style from 'styled-components';
 import React from 'react';
 
-// redux
-import { removeFormError } from '../redux/thunks/form-error';
-import { sendFeedback } from '../redux/thunks/feedback';
-import { connection as connect } from '../redux';
-
 // components
 import Modal, { Form, Footer, Header, FormSentence } from './Modal';
 import FormError from './FormError';
@@ -34,13 +29,12 @@ const Select = style.select`
   margin-bottom: 11px;
 `;
 
-const Feedback = ({ state, dispatch }) => {
+const Feedback = () => {
   const [showModal, setShowModal] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
   const [label, setLabel] = React.useState('feedback');
   const [message, setMessage] = React.useState('');
 
-  const { formError, notification } = state;
 
   React.useEffect(() => {
     if (notification.payload.type === 'success') {
@@ -68,7 +62,6 @@ const Feedback = ({ state, dispatch }) => {
               onChange={(e) => {
                 setLabel(e.target.value);
 
-                dispatch(removeFormError(e.target.name));
               }}
             >
               <option value="feedback">feedback</option>
@@ -85,7 +78,6 @@ const Feedback = ({ state, dispatch }) => {
               onChange={(e) => {
                 setMessage(e.target.value);
 
-                dispatch(removeFormError(e.target.name));
               }}
             />
           </FormError>
@@ -102,7 +94,6 @@ const Feedback = ({ state, dispatch }) => {
             isLoading={isLoading}
             onClick={() => {
               setIsLoading(true);
-              dispatch(sendFeedback(message, label));
             }}
           >
             send
@@ -113,4 +104,4 @@ const Feedback = ({ state, dispatch }) => {
   );
 };
 
-export default connect(Feedback);
+export default Feedback;

src/app/Components/Footer.js

@@ -1,9 +1,8 @@
 import style from 'styled-components';
-import React from 'react';
 
 // components
-import FeedBack from './Feedback';
-import LinkStyle from './Link';
+// import FeedBack from './Feedback';
+import LinkStyle from 'src/app/Components/Link';
 
 const FooterContainer = style.div`
   height: 30px;
@@ -36,7 +35,7 @@ export default () => {
       >
         <LinkStyle>gitHub</LinkStyle>
       </a>
-      <FeedBack />
+      {/* <FeedBack /> */}
     </FooterContainer>
   );
 };

src/app/Components/Header.js

@@ -1,12 +1,6 @@
 import style from 'styled-components';
 import React from 'react';
 
-// redux
-import { removeFormError, setFormError } from '../redux/thunks/form-error';
-import { setNavigation } from '../redux/thunks/navigate';
-import { connection as connect } from '../redux';
-import { getKeyInfo } from '../redux/thunks/key';
-
 // components
 import Modal, { Form, Footer, Header as ModalHeader } from './Modal';
 import FormError from './FormError';
@@ -40,19 +34,17 @@ const Input = style.input`
   border: 1px solid #ddd;
 `;
 
-const Header = ({ state, dispatch }) => {
+const Header = () => {
   const [showModal, setShowModal] = React.useState(false);
   const [alias, setAlias] = React.useState('');
 
-  const { formError } = state;
-
-  React.useEffect(() => {
-    const key = state.key.response;
-    if (key) {
-      dispatch(setNavigation(`/view/${key.alias}`));
-      setShowModal(false);
-    }
-  }, [state.key.response]);
+  // React.useEffect(() => {
+  //   const key = state.key.response;
+  //   if (key) {
+  //     dispatch(setNavigation(`/view/${key.alias}`));
+  //     setShowModal(false);
+  //   }
+  // }, [state.key.response]);
 
   return (
     <HeaderContainer className="header">
@@ -65,14 +57,14 @@ const Header = ({ state, dispatch }) => {
           <h3>enter the key alias</h3>
         </ModalHeader>
         <Form className="form">
-          <FormError fieldName="alias" formErrors={formError.response}>
+          <FormError fieldName="alias"
+
+          >
             <Input
               name="alias"
               placeholder="enter alias"
               onChange={(e) => {
                 setAlias(e.target.value);
-
-                dispatch(removeFormError(e.target.name));
               }}
             />
           </FormError>
@@ -88,19 +80,8 @@ const Header = ({ state, dispatch }) => {
           <Button
             onClick={() => {
               if (alias) {
-                dispatch(getKeyInfo(alias));
-
                 setAlias('');
               } else {
-                console.log('hello');
-                dispatch(
-                  setFormError([
-                    {
-                      field: 'alias',
-                      message: 'must provide a alias',
-                    },
-                  ])
-                );
               }
             }}
           >
@@ -112,4 +93,4 @@ const Header = ({ state, dispatch }) => {
   );
 };
 
-export default connect(Header);
+export default Header;