closes #17

Author: vinaypuppal

package.json

@@ -40,6 +40,7 @@
     "react": "^16.8.6",
     "react-div-100vh": "^0.3.4",
     "react-dom": "^16.8.6",
+    "react-useportal": "^1.0.13",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "swr": "^0.1.12"
@@ -57,6 +58,7 @@
     "next-manifest": "^2.0.0",
     "next-purgecss": "^3.1.1",
     "postcss-easy-import": "^3.0.0",
+    "postcss-nesting": "^7.0.1",
     "prettier": "^1.18.2",
     "tailwindcss": "^1.0.5",
     "typescript": "^3.7.2"

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-easy-import'),
+    require('postcss-nesting'),
     require('tailwindcss'),
     require('autoprefixer'),
     ...(process.env.NODE_ENV === 'production'

src/components/CrowdFund/list.tsx

@@ -40,7 +40,7 @@ export const CampaignList = () => {
         return (
           <li key={item.id} className="mx-0 my-4 md:mx-4">
             <Link href="/crowdfund/[slug]" as={`/crowdfund/${item.slug}`}>
-              <a className="block p-4 bg-white shadow-lg rounded-lg">
+              <a className="block p-4 px-6 bg-white shadow-lg rounded-lg">
                 <h3 className="text-xl mb-1 font-medium text-gray-800">{item.title}</h3>
                 <p className="text-sm mb-4 text-gray-700">{item.short_description}</p>
                 <CampaignProgress campaign={item} />
@@ -50,7 +50,7 @@ export const CampaignList = () => {
                     onClick={e => {
                       e.stopPropagation();
                       e.preventDefault();
-                      openShareDialog();
+                      openShareDialog(e);
                     }}
                     className="p-4 text-center">
                     <ShareIcon />

src/components/FallbackShare/index.tsx

@@ -3,20 +3,18 @@ import { toClipboard } from 'copee';
 
 import { ShareContext } from '../../services/share';
 import { WhatsappIcon, FacebookIcon, MessangerIcon, TwitterIcon, CopyIcon } from '../Icons/Share';
+import { DEFAULT_TITLE, APP_HOST } from '../../constants';
+import { useRouter } from 'next/router';
 
 export function FallbackShare() {
   const { closeShareDialog, isOpen } = useContext(ShareContext);
-  const [isMounted, setIsMounted] = useState(false);
+  const [{ title, url }, setShareInfo] = useState({ title: DEFAULT_TITLE, url: APP_HOST });
+  const route = useRouter();
   useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) {
-    return null;
-  }
-
-  const title = document.title;
-  const url = window.location.href;
+    const title = document.title;
+    const url = window.location.href;
+    setShareInfo({ title, url });
+  }, [route.pathname]);
 
   const whatsappText = `${title}\n\n${url}`;
   function copy() {
@@ -29,7 +27,7 @@ export function FallbackShare() {
   }
   return (
     <div className="container" role="button" onClick={closeShareDialog}>
-      <div className="popup shadow-2xl bg-gray-100 border border-gray-200">
+      <div className="popup shadow-2xl bg-white border border-gray-200">
         <h3>Share via</h3>
         <ul>
           <li>
@@ -80,17 +78,18 @@ export function FallbackShare() {
         {`
           .container {
             width: 100%;
-            height: 100vh;
-            position: absolute;
+            min-height: 100vh;
+            position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             z-index: ${isOpen ? 1000 : -1};
           }
           .popup {
+            max-width: 380px;
             min-height: 240px;
-            bottom: 80px;
+            bottom: 20px;
             position: absolute;
             z-index: 2;
             padding: 12px 4px;
@@ -137,6 +136,13 @@ export function FallbackShare() {
             margin: 0 auto;
             color: #888;
           }
+          @media (min-height: 720px) {
+            .popup {
+              left: 50%;
+              right: auto;
+              bottom: 50%;
+            }
+          }
         `}
       </style>
     </div>

src/pages/_app.tsx

@@ -1,9 +1,10 @@
 import '../styles/index.css';
 
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, MouseEvent } from 'react';
 import { AppProps } from 'next/app';
 import Div100vh from 'react-div-100vh';
 import NProgress from 'nprogress';
+import usePortal from 'react-useportal';
 import Router from 'next/router';
 import Head from 'next/head';
 
@@ -19,8 +20,8 @@ Router.events.on('routeChangeComplete', () => NProgress.done());
 Router.events.on('routeChangeError', () => NProgress.done());
 
 const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
-  const [showFallbackShare, setShowFallbackShare] = useState(false);
-  function openShareDialog() {
+  const { openPortal, closePortal, isOpen, Portal } = usePortal();
+  function openShareDialog(e: MouseEvent<HTMLButtonElement>) {
     // try to open native share dialog
     if (window.navigator.share) {
       const title = document.title;
@@ -30,23 +31,25 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
       return window.navigator.share({ title, text: `${text} ${url}` });
     }
     // fallback to custom native share dialog
-    return setShowFallbackShare(true);
+    return openPortal(e);
   }
-  function closeShareDialog() {
-    setShowFallbackShare(false);
+  function closeShareDialog(e: MouseEvent<HTMLButtonElement>) {
+    closePortal(e);
   }
   return (
     <>
       <Head>
         {/* Import CSS for nprogress */}
         <link rel="stylesheet" type="text/css" href="/nprogress.css" />
       </Head>
-      <ShareContext.Provider value={{ openShareDialog, closeShareDialog, isOpen: showFallbackShare }}>
-        <Div100vh className="relative">
+      <ShareContext.Provider value={{ openShareDialog, closeShareDialog, isOpen: isOpen }}>
+        <Div100vh>
           <Component {...pageProps} />
-          <FallbackShare />
           <MobileMenu />
         </Div100vh>
+        <Portal>
+          <FallbackShare />
+        </Portal>
       </ShareContext.Provider>
     </>
   );

src/pages/crowdfund/[slug].tsx

@@ -35,7 +35,10 @@ const CampaignPage: NextPage = ({ initialData, slug }) => {
         <div className="p-4 pt-0 lg:flex">
           <div className="md:mx-2 md:mr-8 lg:flex-1">
             <h1 className="text-2xl mb-2 font-medium text-gray-800">{data.title}</h1>
-            <p className="text-lg mb-4 text-gray-700 leading-relaxed">{data.description}</p>
+            <p
+              className="text-lg mb-4 text-gray-700 leading-relaxed markdown"
+              dangerouslySetInnerHTML={{ __html: data.description }}
+            />
             <CampaignProgress campaign={data} />
             {data.is_active && (
               <div className="mt-6 md:mt-0">

src/pages/index.tsx

@@ -10,7 +10,7 @@ export default function Index() {
   return (
     <>
       <SEO />
-      <Div100vh className="w-full md:max-w-sm md:flex md:flex-col md:justify-center md:bg-gray-100 md:fixed md:left-0 md:top-0">
+      <Div100vh className="w-full md:max-w-sm md:flex md:flex-col md:bg-gray-100 md:fixed md:left-0 md:top-0 md:overflow-auto">
         <header className="py-4 px-4">
           <div className="w-full items-center flex justify-center">
             <div className="w-40 h-40 mx-auto">

src/services/share.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 
 export const ShareContext = React.createContext({
   isOpen: false,
-  openShareDialog: () => null,
-  closeShareDialog: () => null,
+  openShareDialog: (e: MouseEvent<HTMLButtonElement>) => null,
+  closeShareDialog: (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => null,
 });

src/styles/index.css

@@ -18,6 +18,50 @@ body {
   pointer-events: none;
 }
 
+.markdown > * + *,
+.markdown li + li,
+.markdown li > p + p {
+  @apply mt-6;
+}
+.markdown strong {
+  @apply text-black font-bold;
+}
+.markdown a {
+  @apply text-black font-normal text-indigo-500;
+  &:hover {
+    @apply text-indigo-700;
+  }
+}
+.markdown strong a {
+  @apply font-bold;
+}
+.markdown h2 {
+  @apply leading-tight text-xl font-bold text-black mb-2 mt-10;
+}
+.markdown h3 {
+  @apply leading-tight text-lg font-bold text-black mt-8 -mb-2;
+}
+.markdown code {
+  @apply font-mono text-sm inline bg-gray-500 px-1;
+}
+.markdown pre code {
+  @apply block bg-black p-4 rounded;
+}
+.markdown blockquote {
+  @apply border-l-4 border-gray-500 pl-4 italic;
+}
+.markdown ul,
+.markdown ol {
+  list-style: unset;
+  @apply pl-5;
+  @screen sm {
+    @apply pl-10;
+  }
+}
+.markdown img {
+  width: 100%;
+}
+
 @keyframes loading {
   0% {
     background-position: 0 0;

yarn.lock

@@ -6254,7 +6254,7 @@ postcss-nested@^4.1.1:
     postcss "^7.0.21"
     postcss-selector-parser "^6.0.2"
 
-postcss-nesting@^7.0.0:
+postcss-nesting@^7.0.0, postcss-nesting@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
   integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
@@ -6852,6 +6852,13 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+react-useportal@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/react-useportal/-/react-useportal-1.0.13.tgz#abfc29f8128756cd7382bff7c81a4f446b792199"
+  integrity sha512-83KpNTXUIHnRVTLeMberIblCtssvRSKCPnG/xT9NW60gDYfU13pQBNQKCVUF8MBK+7LnCQ/ZrOuXl8Mp+iXdXA==
+  dependencies:
+    use-ssr "^1.0.19"
+
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
@@ -8252,6 +8259,11 @@ url@0.11.0, url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-ssr@^1.0.19:
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.21.tgz#cb3921f62396adfdce22d1ac784fe1c12cb57923"
+  integrity sha512-4LaUeTJsYZQPLldNO7fUEvTu7+ehb1iBs9FlWEIGzx5pmdaDodBHU+M+OKbr/kl/4TnLPnzrmP5KJbEVEAT6Hw==
+
 use-subscription@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.1.1.tgz#5509363e9bb152c4fb334151d4dceb943beaa7bb"