Convert to TypeScript. (vercel#87)

Author: VictorPeralta

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# editors
+.vscode

components/Layout.js renamed to components/Layout.tsx

@@ -1,10 +1,17 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-import Navbar from '@/components/ui/Navbar';
-import Footer from '@/components/ui/Footer';
+import Navbar from 'components/ui/Navbar';
+import Footer from 'components/ui/Footer';
+import { ReactNode } from 'react';
+import { PageMeta } from '../types';
 
-export default function Layout({ children, meta: pageMeta }) {
+interface Props {
+  children: ReactNode;
+  meta?: PageMeta;
+}
+
+export default function Layout({ children, meta: pageMeta }: Props) {
   const router = useRouter();
   const meta = {
     title: 'Next.js Subscription Starter',
@@ -20,10 +27,7 @@ export default function Layout({ children, meta: pageMeta }) {
         <meta name="robots" content="follow, index" />
         <link href="/favicon.ico" rel="shortcut icon" />
         <meta content={meta.description} name="description" />
-        <meta
-          property="og:url"
-          content={`https://subscription-starter.vercel.app${router.asPath}`}
-        />
+        <meta property="og:url" content={`https://subscription-starter.vercel.app${router.asPath}`} />
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content={meta.title} />
         <meta property="og:description" content={meta.description} />

components/Pricing.js renamed to components/Pricing.tsx

@@ -2,18 +2,26 @@ import cn from 'classnames';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-import Button from '@/components/ui/Button';
-import { postData } from '@/utils/helpers';
-import { getStripe } from '@/utils/stripe-client';
-import { useUser } from '@/utils/useUser';
+import Button from 'components/ui/Button';
+import { postData } from 'utils/helpers';
+import { getStripe } from 'utils/stripe-client';
+import { useUser } from 'utils/useUser';
+import { Product, Price, ProductWithPrice } from 'types';
 
-export default function Pricing({ products }) {
+interface Props {
+  products: ProductWithPrice[];
+}
+type BillingInterval = 'year' | 'month';
+
+export default function Pricing({ products }: Props) {
   const router = useRouter();
-  const [billingInterval, setBillingInterval] = useState('month');
-  const [priceIdLoading, setPriceIdLoading] = useState();
+  const [billingInterval, setBillingInterval] = useState<BillingInterval>(
+    'month'
+  );
+  const [priceIdLoading, setPriceIdLoading] = useState<string>();
   const { session, userLoaded, subscription } = useUser();
 
-  const handleCheckout = async (price) => {
+  const handleCheckout = async (price: Price) => {
     setPriceIdLoading(price.id);
     if (!session) {
       return router.push('/signin');
@@ -30,11 +38,11 @@ export default function Pricing({ products }) {
       });
 
       const stripe = await getStripe();
-      stripe.redirectToCheckout({ sessionId });
+      stripe?.redirectToCheckout({ sessionId });
     } catch (error) {
-      return alert(error.message);
+      return alert((error as Error)?.message);
     } finally {
-      setPriceIdLoading(false);
+      setPriceIdLoading(undefined);
     }
   };
 
@@ -97,22 +105,24 @@ export default function Pricing({ products }) {
         </div>
         <div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
           {products.map((product) => {
-            const price = product.prices.find(
+            const price = product?.prices?.find(
               (price) => price.interval === billingInterval
             );
+            if (!price) return null;
             const priceString = new Intl.NumberFormat('en-US', {
               style: 'currency',
               currency: price.currency,
               minimumFractionDigits: 0
-            }).format(price.unit_amount / 100);
+            }).format((price?.unit_amount || 0) / 100);
             return (
               <div
                 key={product.id}
                 className={cn(
                   'rounded-lg shadow-sm divide-y divide-accents-2 bg-primary-2',
                   {
                     'border border-pink': subscription
-                      ? product.name === subscription?.prices?.products.name
+                      ? product.name ===
+                        subscription?.prices?.products?.[0]?.name
                       : product.name === 'Freelancer'
                   }
                 )}
@@ -135,10 +145,10 @@ export default function Pricing({ products }) {
                     type="button"
                     disabled={session && !userLoaded}
                     loading={priceIdLoading === price.id}
-                    onClick={() => handleCheckout(price.id)}
+                    onClick={() => handleCheckout(price)}
                     className="mt-8 block w-full rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
                   >
-                    {product.name === subscription?.prices?.products.name
+                    {product.name === subscription?.prices?.products?.[0]?.name
                       ? 'Manage'
                       : 'Subscribe'}
                   </Button>

components/icons/GitHub.js renamed to components/icons/GitHub.tsx

@@ -1,13 +1,5 @@
 const Logo = ({ className = '', ...props }) => (
-  <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...props}
-  >
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
     <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"

components/icons/Logo.js renamed to components/icons/Logo.tsx

@@ -1,11 +1,19 @@
 import cn from 'classnames';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef, ButtonHTMLAttributes } from 'react';
 import mergeRefs from 'react-merge-refs';
-import s from './Button.module.css';
+import styles from './Button.module.css';
 
-import LoadingDots from '@/components/ui/LoadingDots';
+import LoadingDots from 'components/ui/LoadingDots';
 
-const Button = forwardRef((props, buttonRef) => {
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'slim' | 'flat';
+  active?: boolean;
+  width?: number;
+  loading?: boolean;
+  Component?: React.ComponentType;
+}
+
+const Button = forwardRef<HTMLButtonElement, Props>((props, buttonRef) => {
   const {
     className,
     variant = 'flat',
@@ -20,15 +28,14 @@ const Button = forwardRef((props, buttonRef) => {
   } = props;
   const ref = useRef(null);
   const rootClassName = cn(
-    s.root,
+    styles.root,
     {
-      [s.slim]: variant === 'slim',
-      [s.loading]: loading,
-      [s.disabled]: disabled
+      [styles.slim]: variant === 'slim',
+      [styles.loading]: loading,
+      [styles.disabled]: disabled
     },
     className
   );
-
   return (
     <Component
       aria-pressed={active}

components/ui/Button/Button.js renamed to components/ui/Button/Button.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 import s from './Footer.module.css';
 
-import Logo from '@/components/icons/Logo';
-import GitHub from '@/components/icons/GitHub';
+import Logo from 'components/icons/Logo';
+import GitHub from 'components/icons/GitHub';
 
 export default function Footer() {
   return (
@@ -22,64 +22,46 @@ export default function Footer() {
           <ul className="flex flex-initial flex-col md:flex-1">
             <li className="py-3 md:py-0 md:pb-4">
               <Link href="/">
-                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                  Home
-                </a>
+                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">Home</a>
               </Link>
             </li>
             <li className="py-3 md:py-0 md:pb-4">
               <Link href="/">
-                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                  About
-                </a>
+                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">About</a>
               </Link>
             </li>
             <li className="py-3 md:py-0 md:pb-4">
               <Link href="/">
-                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                  Careers
-                </a>
+                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">Careers</a>
               </Link>
             </li>
             <li className="py-3 md:py-0 md:pb-4">
               <Link href="/">
-                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                  Blog
-                </a>
+                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">Blog</a>
               </Link>
             </li>
           </ul>
         </div>
         <div className="col-span-1 lg:col-span-2">
           <ul className="flex flex-initial flex-col md:flex-1">
             <li className="py-3 md:py-0 md:pb-4">
-              <p className="text-primary font-bold hover:text-accents-6 transition ease-in-out duration-150">
-                LEGAL
-              </p>
+              <p className="text-primary font-bold hover:text-accents-6 transition ease-in-out duration-150">LEGAL</p>
             </li>
             <li className="py-3 md:py-0 md:pb-4">
               <Link href="/">
-                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                  Privacy Policy
-                </a>
+                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">Privacy Policy</a>
               </Link>
             </li>
             <li className="py-3 md:py-0 md:pb-4">
               <Link href="/">
-                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                  Terms of Use
-                </a>
+                <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">Terms of Use</a>
               </Link>
             </li>
           </ul>
         </div>
         <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
           <div className="flex space-x-6 items-center h-10">
-            <a
-              aria-label="Github Repository"
-              href="https://github.com/vercel/nextjs-subscription-payments"
-              className={s.link}
-            >
+            <a aria-label="Github Repository" href="https://github.com/vercel/nextjs-subscription-payments" className={s.link}>
               <GitHub />
             </a>
           </div>
@@ -92,11 +74,7 @@ export default function Footer() {
         <div className="flex items-center">
           <span className="text-primary">Crafted by</span>
           <a href="https://vercel.com" aria-label="Vercel.com Link">
-            <img
-              src="/vercel.svg"
-              alt="Vercel.com Logo"
-              className="inline-block h-6 ml-4 text-primary"
-            />
+            <img src="/vercel.svg" alt="Vercel.com Logo" className="inline-block h-6 ml-4 text-primary" />
           </a>
         </div>
       </div>

components/ui/Button/index.js renamed to components/ui/Button/index.ts

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { InputHTMLAttributes, ChangeEvent } from 'react';
 import cn from 'classnames';
 import s from './Input.module.css';
 
-const Input = (props) => {
+interface Props extends Omit<InputHTMLAttributes<any>, 'onChange'> {
+  className?: string;
+  onChange: (value: string) => void;
+}
+const Input = (props: Props) => {
   const { className, children, onChange, ...rest } = props;
 
   const rootClassName = cn(s.root, {}, className);
 
-  const handleOnChange = (e) => {
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (onChange) {
       onChange(e.target.value);
     }

components/ui/Footer/Footer.js renamed to components/ui/Footer/Footer.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 import s from './Navbar.module.css';
 
-import Logo from '@/components/icons/Logo';
-import { useUser } from '@/utils/useUser';
+import Logo from 'components/icons/Logo';
+import { useUser } from 'utils/useUser';
 
 const Navbar = () => {
   const { user, signOut } = useUser();

components/ui/Footer/index.js renamed to components/ui/Footer/index.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

components/ui/Input/Input.js renamed to components/ui/Input/Input.tsx

@@ -12,7 +12,7 @@
     "@stripe/stripe-js": "1.11.0",
     "@supabase/supabase-js": "1.3.2",
     "classnames": "2.2.6",
-    "next": "10.0.5",
+    "next": "^12.0.3",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-merge-refs": "1.1.0",
@@ -21,15 +21,19 @@
     "tailwindcss": "2.0.2"
   },
   "devDependencies": {
+    "@types/classnames": "2.2.6",
+    "@types/node": "^16.10.9",
+    "@types/react": "^17.0.29",
     "postcss": "8.2.4",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-preset-env": "6.7.0",
-    "prettier": "2.2.1"
+    "prettier": "2.2.1",
+    "typescript": "^4.4.4"
   },
   "prettier": {
     "arrowParens": "always",
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "none"
   }
-}
+}

components/ui/Input/index.js renamed to components/ui/Input/index.ts

@@ -1,11 +1,13 @@
 import { useEffect } from 'react';
-import '@/assets/main.css';
-import '@/assets/chrome-bug.css';
+import 'assets/main.css';
+import 'assets/chrome-bug.css';
+import React from 'react';
 
-import Layout from '@/components/Layout';
-import { UserContextProvider } from '@/utils/useUser';
+import Layout from 'components/Layout';
+import { UserContextProvider } from 'utils/useUser';
+import { AppProps } from 'next/app';
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
     document.body.classList?.remove('loading');
   }, []);