migrate to ts

netlify/functions/create-payment-intent.js → netlify/functions/create-payment-intent.ts

@@ -1,7 +1,15 @@
-require("dotenv").config();
-const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+import * as dotenv from 'dotenv'
+import Stripe from 'stripe'
 
-exports.handler = async (event) => {
+dotenv.config()
+const stripe = new Stripe(`${process.env.STRIPE_SECRET_KEY}`,{
+    apiVersion : '2022-11-15'
+})
+
+type StripeEvent = {
+    body : string
+}
+exports.handler = async (event : StripeEvent) => {
     try {
         const { amount } = JSON.parse(event.body);
 

package.json

@@ -10,6 +10,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@types/styled-components": "^5.1.26",
     "components": "^0.1.0",
     "dotenv": "^16.0.3",
     "firebase": "^9.20.0",
@@ -28,6 +32,7 @@
     "sass": "^1.62.0",
     "stripe": "^12.7.0",
     "styled-components": "^5.3.11",
+    "typed-redux-saga": "^1.5.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -53,5 +58,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.0",
+    "@types/redux-logger": "^3.0.9",
+    "babel-plugin-macros": "^3.1.0"
   }
 }

src/App.js

@@ -1,45 +1,32 @@
-
-import React from 'react';
-import { Routes, Route } from 'react-router-dom'
-import { Suspense } from './components/suspense/suspense';
 import { useEffect } from 'react';
-
-import { checkUserSession, setCurrentUser } from './store/user/user.action';
 import { useDispatch } from 'react-redux';
-import { onAuthStateListener, createUserDocFromAuth, getCurrentUser } from './util/firebase/firebase.utils';
-import { fetchCategoriesStart } from './store/categories/category.reducer';
-// import Home from "./routes/home/home.component"
-// import Navigation from './routes/navigation/navigation.component';
-// import Auth from './routes/auth/auth'
-// import Shop from './routes/shop/shop.component';
-// import Checkout from './routes/checkout/checkout'
-// import ContactPage from './routes/contact/contact';
-const ContactPage = React.lazy(() => import('./routes/contact/contact'))
-const Home = React.lazy(() => import("./routes/home/home.component"))
-const Navigation = React.lazy(() => import('./routes/navigation/navigation.component'))
-const Auth = React.lazy(() => import('./routes/auth/auth'))
-const Shop = React.lazy(() => import('./routes/shop/shop.component'))
-const Checkout = React.lazy(() => import('./routes/checkout/checkout'))
 
-function App() {
-  const dispatch = useDispatch()
+import { Routes, Route } from 'react-router-dom';
+
+import Home from './routes/home/home.component';
+import Navigation from './routes/navigation/navigation.component';
+import Authentication from './routes/authentication/authentication.component';
+import Shop from './routes/shop/shop.component';
+import Checkout from './routes/checkout/checkout.component';
+import { checkUserSession } from './store/user/user.action';
+
+const App = () => {
+  const dispatch = useDispatch();
+
   useEffect(() => {
-    dispatch(checkUserSession())
-    dispatch(fetchCategoriesStart())
-  }, [])
+    dispatch(checkUserSession());
+  }, []);
+
   return (
-    <React.Suspense fallback={<Suspense />}>
-      <Routes>
-        <Route path='/' element={<Navigation />}>
-          <Route index element={<Home />} />
-          <Route path='shop/*' element={<Shop />} />
-          <Route path='auth' element={<Auth />} />
-          <Route path='checkout' element={<Checkout />} />
-          <Route path='contact' element={<ContactPage />} />
-        </Route>
-      </Routes>
-    </React.Suspense>
+    <Routes>
+      <Route path='/' element={<Navigation />}>
+        <Route index element={<Home />} />
+        <Route path='shop/*' element={<Shop />} />
+        <Route path='auth' element={<Authentication />} />
+        <Route path='checkout' element={<Checkout />} />
+      </Route>
+    </Routes>
   );
-}
+};
 
 export default App;

src/components/button/button.component.tsx

@@ -0,0 +1,49 @@
+import React, { FC, ButtonHTMLAttributes } from 'react';
+
+import {
+  BaseButton,
+  GoogleSignInButton,
+  InvertedButton,
+  ButtonSpinner,
+} from './button.styles';
+
+export enum BUTTON_TYPE_CLASSES {
+  base = 'base',
+  google = 'google-sign-in',
+  inverted = 'inverted',
+}
+
+const getButton = (buttonType = BUTTON_TYPE_CLASSES.base): typeof BaseButton => {
+  switch (buttonType) {
+    case BUTTON_TYPE_CLASSES.base :
+      return BaseButton
+    case BUTTON_TYPE_CLASSES.google :
+      return GoogleSignInButton
+    case BUTTON_TYPE_CLASSES.inverted :
+      return InvertedButton
+    default :
+      return BaseButton
+  }
+}
+
+
+export type ButtonProps = {
+  buttonType?: BUTTON_TYPE_CLASSES;
+  isLoading?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button: FC<ButtonProps> = ({
+  children,
+  buttonType,
+  isLoading,
+  ...otherProps
+}) => {
+  const CustomButton = getButton(buttonType);
+  return (
+    <CustomButton disabled={isLoading} {...otherProps}>
+      {isLoading ? <ButtonSpinner /> : children}
+    </CustomButton>
+  );
+};
+
+export default Button;

src/components/button/button.styles.jsx → src/components/button/button.styles.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { SpinnerContainer } from '../spinner/spinner.styles';
+
 export const BaseButton = styled.button`
   min-width: 165px;
   width: auto;
@@ -29,6 +31,7 @@ export const BaseButton = styled.button`
 export const GoogleSignInButton = styled(BaseButton)`
   background-color: #4285f4;
   color: white;
+  padding: 0 20px;
 
   &:hover {
     background-color: #357ae8;
@@ -40,30 +43,15 @@ export const InvertedButton = styled(BaseButton)`
   background-color: white;
   color: black;
   border: 1px solid black;
-
+  
   &:hover {
     background-color: black;
     color: white;
     border: none;
   }
 `;
-export const LoadingSpinner = styled.div`
-  display: inline-block;
+
+export const ButtonSpinner = styled(SpinnerContainer)`
   width: 30px;
   height: 30px;
-  border: 3px solid rgba(195, 195, 195, 0.6);
-  border-radius: 50%;
-  border-top-color: #636767;
-  animation: spin 1s ease-in-out infinite;
-  -webkit-animation: spin 1s ease-in-out infinite;
-  @keyframes spin {
-    to {
-      -webkit-transform: rotate(360deg);
-    }
-  }
-  @-webkit-keyframes spin {
-    to {
-      -webkit-transform: rotate(360deg);
-    }
-  }
-`;
+`;