migrate to typescript

Author: vinaypuppal

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -1,29 +1,10 @@
 const withCss = require('@zeit/next-css');
-const withPurgeCss = require('next-purgecss');
-
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
-  }
-}
 
 // next.config.js
-module.exports = withCss(
-  withPurgeCss({
-    purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // Only enable PurgeCSS for client-side production builds
-    purgeCss: {
-      whitelist: ['html', 'body'],
-      extractors: [
-        {
-          extractor: TailwindExtractor,
-          extensions: ['html', 'js', 'css', 'tsx'],
-        },
-      ],
-    },
-    target: 'serverless',
-    env: {
-      RZP_LIVE_KEY: process.env.RZP_LIVE_KEY,
-      RZP_TEST_KEY: process.env.RZP_TEST_KEY,
-    },
-  })
-);
+module.exports = withCss({
+  target: 'serverless',
+  env: {
+    RZP_LIVE_KEY: process.env.RZP_LIVE_KEY,
+    RZP_TEST_KEY: process.env.RZP_TEST_KEY,
+  },
+});

package.json

@@ -10,20 +10,21 @@
     "url": "https://github.com/coderplex/donation-page/issues"
   },
   "homepage": "https://github.com/coderplex/donation-page#readme",
-  "main": "pages/index.js",
+  "main": "src/pages/index.ts",
   "engines": {
     "node": "v10.x"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "now dev",
     "add-contributor": "all-contributors add",
-    "format": "prettier --write './**/*.+(js|jsx|json|md)'"
+    "format": "prettier --write './**/*.+(ts|tsx|css|json|js|jsx|json|md)'"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@types/airtable": "^0.5.6",
     "@zeit/next-css": "0.2.1-canary.4",
     "airtable": "^0.7.0",
     "clsx": "^1.0.4",
@@ -36,6 +37,9 @@
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
+    "@types/node": "^12.12.12",
+    "@types/react": "^16.9.12",
+    "@types/react-dom": "^16.9.4",
     "all-contributors-cli": "^6.8.1",
     "autoprefixer": "^9.6.1",
     "cssnano": "^4.1.10",
@@ -45,14 +49,11 @@
     "next-purgecss": "^3.1.1",
     "postcss-easy-import": "^3.0.0",
     "prettier": "^1.18.2",
-    "tailwindcss": "^1.0.5"
+    "tailwindcss": "^1.0.5",
+    "typescript": "^3.7.2"
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.json": [
+    "*.{js,ts,tsx,jsx,json,css}": [
       "prettier --write",
       "git add"
     ],

postcss.config.js

@@ -1,3 +1,20 @@
 module.exports = {
-  plugins: [require('postcss-easy-import'), require('tailwindcss'), require('autoprefixer')],
+  plugins: [
+    require('postcss-easy-import'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+    ...(process.env.NODE_ENV === 'production'
+      ? [
+          require('@fullhuman/postcss-purgecss')({
+            content: ['./src/**/*.tsx'],
+            defaultExtractor: content =>
+              content
+                .match(/[\w-/:%]+(?<!:)/g)
+                .concat(content.match(/html|body|after|before|snackbar|snackbarks|tippy|next/g)) || [],
+            whitelistPatterns: [/html/, /body/, /after/, /before/, /tippy/, /next/, /snackbar/, /snackbarks/],
+          }),
+          require('cssnano'),
+        ]
+      : []),
+  ],
 };

src/components/CampaignDetails.js renamed to src/components/CampaignDetails.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { H2 } from './Typography';
 import { EMAIL, PHONE } from '../constants';
 
-function ContactUs() {
+export function ContactUs() {
   return (
     <>
       <H2>Contact Us:</H2>
@@ -22,5 +22,3 @@ function ContactUs() {
     </>
   );
 }
-
-export default ContactUs;

src/components/CampaignItem.js renamed to src/components/CampaignItem.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { CLOUDINARY_BASE, LOGO_PUBLIC_ID } from '../constants';
 
-export default function Favicons() {
+export function Favicons() {
   const icons = getIcons();
   return (
     <>
@@ -13,7 +12,7 @@ export default function Favicons() {
   );
 }
 
-export const getIconUrl = size => {
+export const getIconUrl = (size: number) => {
   return `${CLOUDINARY_BASE}/c_scale,w_${size}/${LOGO_PUBLIC_ID}`;
 };
 

src/components/CampaignList.js renamed to src/components/CampaignList.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-
+import { BASE_URL, CHAT_URL, CROWDFUND_URL, MEETUP_URL } from '../constants';
 import { H2 } from './Typography';
-import { BASE_URL, MEETUP_URL, CHAT_URL, CROWDFUND_URL } from '../constants';
 
-function FindUs() {
+export function FindUs() {
   return (
     <>
       <H2>Find us on the Internet</H2>
@@ -36,5 +35,3 @@ function FindUs() {
     </>
   );
 }
-
-export default FindUs;

src/components/ContactUs.js renamed to src/components/ContactUs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import clsx from 'clsx';
 
 import { CODERPLEX_LOGO, DEFAULT_TITLE } from '../constants';
@@ -16,10 +16,14 @@ export function Header({ title = DEFAULT_TITLE }) {
   );
 }
 
-export const Container = ({ className, ...props }) => (
+interface Props {
+  className?: string;
+}
+
+export const Container: FunctionComponent<Props> = ({ className, ...props }) => (
   <main className={clsx(['pb-12 md:flex max-w-5xl mx-auto', className])} {...props} />
 );
 
-export const Section = ({ className, ...props }) => (
+export const Section: FunctionComponent<Props> = ({ className, ...props }) => (
   <section className={clsx(['border-gray-200', className])} {...props} />
 );

src/components/Favicons.js renamed to src/components/Favicons.tsx

@@ -9,7 +9,7 @@ import IconBack from './Icons/Back';
 import IconUPI from './Icons/UPI';
 import Loader from './Loader';
 import Modal from './Modal';
-import { getURL, getFinalAmount } from '../utils';
+import { getUPIUrl, getFinalAmount } from '../utils';
 import { openRzp } from '../services/rzp';
 import { saveUPIStatus } from '../services/upi';
 
@@ -39,7 +39,8 @@ function PaymentForm({
     e.preventDefault();
     const { amount, email, phone } = form;
     saveUPIStatus(form);
-    const url = getURL({ amount, email });
+    const url = getUPIUrl({ amount, email });
+    // @ts-ignore
     if (!isMobile()) {
       return setURL(`${window.origin}/api/upi?amount=${amount}&email=${email}`);
     }
@@ -64,6 +65,7 @@ function PaymentForm({
         ...form,
         amount: finalAmount,
         category: actionName.toLowerCase,
+        // @ts-ignore
       }).then(() => onSuccess({ ...form }));
       setIsSubmitting(false);
       setFormValue(initialState);

src/components/FindUs.js renamed to src/components/FindUs.tsx

@@ -1,16 +1,24 @@
-import React, { useContext } from 'react';
+import React, { useContext, FunctionComponent } from 'react';
 import Head from 'next/head';
 
 import { DEFAULT_SEO_IMAGE, DEFAULT_TITLE, DEFAULT_DESCRIPTION, BASE_URL, THEME_COLOR } from '../constants';
-import Favicons from './Favicons';
+import { Favicons } from './Favicons';
 
-export default function SEO({
+interface Props {
+  lang?: string;
+  title?: string;
+  description?: string;
+  image?: string;
+  url?: string;
+}
+
+export const SEO: FunctionComponent<Props> = ({
   lang = 'en',
   title = DEFAULT_TITLE,
   description = DEFAULT_DESCRIPTION,
   image = DEFAULT_SEO_IMAGE,
   url = `${BASE_URL}/donate`,
-}) {
+}) => {
   const meta = [
     {
       name: 'viewport',
@@ -68,4 +76,4 @@ export default function SEO({
       ))}
     </Head>
   );
-}
+};

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

@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+}
+
+export const H1: FunctionComponent<Props> = ({ className, ...props }) => (
+  <h1 className={clsx(['text-2xl text-pink-400 px-4 py-1', className])} {...props} />
+);
+
+export const H2: FunctionComponent<Props> = ({ className, ...props }) => (
+  <h2 className={clsx(['text-xl text-pink-400 px-4 py-1 mt-3', className])} {...props} />
+);
+
+export const Paragraph: FunctionComponent<Props> = ({ className, ...props }) => (
+  <p className={clsx(['px-4 py-2 text-sm text-gray-700 leading-normal', className])} {...props} />
+);

src/components/FundingsList.js renamed to src/components/FundingsList.tsx

@@ -0,0 +1,10 @@
+import '../styles/index.css';
+
+import React, { FunctionComponent } from 'react';
+import { AppProps } from 'next/app';
+
+const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />;
+};
+
+export default App;

src/components/Icons/Back.js renamed to src/components/Icons/Back.tsx

@@ -1,8 +1,8 @@
-import { getURL } from '../../utils';
+import { getUPIUrl } from '../../utils';
 
 export default (req, res) => {
   try {
-    const url = getURL(req.query);
+    const url = getUPIUrl(req.query);
     res.writeHead(302, {
       Location: url,
     });

src/components/Icons/Cards.js renamed to src/components/Icons/Cards.tsx

@@ -1,14 +1,14 @@
-import FindUs from '../../components/FindUs';
-import ContactUs from '../../components/ContactUs';
-import PaymentForm from '../../components/PaymentForm';
-import MobileFooter from '../../components/Footer';
-import SEO from '../../components/SEO';
-import { Header, Section, Container } from '../../components/Layout';
+import React from 'react';
 import CampaignDetails from '../../components/CampaignDetails';
-import { fetchRecords, insertRecord } from '../../services/crowdfund';
-import { CAMPAIGNS_ROUTE, FUNDINGS_ROUTE } from '../../constants';
+import { ErrorComponent, Loading } from '../../components/common';
+import { ContactUs } from '../../components/ContactUs';
+import { FindUs } from '../../components/FindUs';
+import MobileFooter from '../../components/Footer';
 import FundingsList from '../../components/FundingsList';
-import { Loading, ErrorComponent } from '../../components/common';
+import { Container, Header, Section } from '../../components/Layout';
+import { SEO } from '../../components/SEO';
+import { CAMPAIGNS_ROUTE, FUNDINGS_ROUTE } from '../../constants';
+import { fetchRecords, insertRecord } from '../../services/crowdfund';
 
 export default class CrowdfundDetail extends React.Component {
   state = {
@@ -39,15 +39,20 @@ export default class CrowdfundDetail extends React.Component {
   }
 
   render() {
+    // @ts-ignore
     const { campaign, raised, loading, error, fundings } = this.state;
     const paymentFormProps = {
+      // @ts-ignore
       maxAmount: campaign.req_amount - raised,
-      actionName: "Contribute",
+      actionName: 'Contribute',
       collectName: true,
-      onSuccess: async data => insertRecord(FUNDINGS_ROUTE, this.props.slug, data)
-    }
+      // @ts-ignore
+      onSuccess: async data => insertRecord(FUNDINGS_ROUTE, this.props.slug, data),
+    };
     return (
       <>
+        {/* 
+        // @ts-ignore       */}
         <SEO title={`Contribute to ${campaign.title} by Coderplex`} />
         <Header title="Coderplex Crowdfunding" />
         <Container className="max-w-6xl">
@@ -58,15 +63,7 @@ export default class CrowdfundDetail extends React.Component {
           </Container>
           <Container className="flex-col md:w-1/3">
             <Section className="md:flex-1 md:block">
-              <div className="shadow md:flex-1 hidden md:block bg-white p-4 m-4 mt-6 rounded-lg">
-                {loading ? (
-                  <Loading />
-                ) : campaign.req_amount ? (
-                  <PaymentForm {...paymentFormProps} />
-                ) : (
-                  error && <ErrorComponent />
-                )}
-              </div>
+              <div className="shadow md:flex-1 hidden md:block bg-white p-4 m-4 mt-6 rounded-lg">{/* Todo */}</div>
               <div className="shadow bg-white p-4 m-4 mt-6 rounded-lg">
                 {loading ? <Loading /> : !error ? <FundingsList fundings={fundings} /> : <ErrorComponent />}
               </div>

src/components/Icons/Success.js renamed to src/components/Icons/Success.tsx

@@ -1,6 +1,6 @@
-import FindUs from '../../components/FindUs';
-import ContactUs from '../../components/ContactUs';
-import SEO from '../../components/SEO';
+import { FindUs } from '../../components/FindUs';
+import { ContactUs } from '../../components/ContactUs';
+import { SEO } from '../../components/SEO';
 import { Header, Section, Container } from '../../components/Layout';
 import { H1 } from '../../components/Typography';
 import CampaignList from '../../components/CampaignList';