Skip to content

Commit f652798

Browse files
vinaypuppalvinaypuppal
committed
closes #17 
1 parent 6ead18b commit f652798

File tree

10 files changed

+102
-31
lines changed

10 files changed

+102
-31
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"react": "^16.8.6",
4141
"react-div-100vh": "^0.3.4",
4242
"react-dom": "^16.8.6",
43+
"react-useportal": "^1.0.13",
4344
"react-virtualized-auto-sizer": "^1.0.2",
4445
"react-window": "^1.8.5",
4546
"swr": "^0.1.12"
@@ -57,6 +58,7 @@
5758
"next-manifest": "^2.0.0",
5859
"next-purgecss": "^3.1.1",
5960
"postcss-easy-import": "^3.0.0",
61+
"postcss-nesting": "^7.0.1",
6062
"prettier": "^1.18.2",
6163
"tailwindcss": "^1.0.5",
6264
"typescript": "^3.7.2"

‎postcss.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module.exports = {
22
plugins: [
33
require('postcss-easy-import'),
4+
require('postcss-nesting'),
45
require('tailwindcss'),
56
require('autoprefixer'),
67
...(process.env.NODE_ENV === 'production'

‎src/components/CrowdFund/list.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const CampaignList = () => {
4040
return (
4141
<li key={item.id} className="mx-0 my-4 md:mx-4">
4242
<Link href="/crowdfund/[slug]" as={`/crowdfund/${item.slug}`}>
43-
<a className="block p-4 bg-white shadow-lg rounded-lg">
43+
<a className="block p-4 px-6 bg-white shadow-lg rounded-lg">
4444
<h3 className="text-xl mb-1 font-medium text-gray-800">{item.title}</h3>
4545
<p className="text-sm mb-4 text-gray-700">{item.short_description}</p>
4646
<CampaignProgress campaign={item} />
@@ -50,7 +50,7 @@ export const CampaignList = () => {
5050
onClick={e => {
5151
e.stopPropagation();
5252
e.preventDefault();
53-
openShareDialog();
53+
openShareDialog(e);
5454
}}
5555
className="p-4 text-center">
5656
<ShareIcon />

‎src/components/FallbackShare/index.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,18 @@ import { toClipboard } from 'copee';
33

44
import { ShareContext } from '../../services/share';
55
import { WhatsappIcon, FacebookIcon, MessangerIcon, TwitterIcon, CopyIcon } from '../Icons/Share';
6+
import { DEFAULT_TITLE, APP_HOST } from '../../constants';
7+
import { useRouter } from 'next/router';
68

79
export function FallbackShare() {
810
const { closeShareDialog, isOpen } = useContext(ShareContext);
9-
const [isMounted, setIsMounted] = useState(false);
11+
const [{ title, url }, setShareInfo] = useState({ title: DEFAULT_TITLE, url: APP_HOST });
12+
const route = useRouter();
1013
useEffect(() => {
11-
setIsMounted(true);
12-
}, []);
13-
14-
if (!isMounted) {
15-
return null;
16-
}
17-
18-
const title = document.title;
19-
const url = window.location.href;
14+
const title = document.title;
15+
const url = window.location.href;
16+
setShareInfo({ title, url });
17+
}, [route.pathname]);
2018

2119
const whatsappText = `${title}\n\n${url}`;
2220
function copy() {
@@ -29,7 +27,7 @@ export function FallbackShare() {
2927
}
3028
return (
3129
<div className="container" role="button" onClick={closeShareDialog}>
32-
<div className="popup shadow-2xl bg-gray-100 border border-gray-200">
30+
<div className="popup shadow-2xl bg-white border border-gray-200">
3331
<h3>Share via</h3>
3432
<ul>
3533
<li>
@@ -80,17 +78,18 @@ export function FallbackShare() {
8078
{`
8179
.container {
8280
width: 100%;
83-
height: 100vh;
84-
position: absolute;
81+
min-height: 100vh;
82+
position: fixed;
8583
top: 0;
8684
left: 0;
8785
right: 0;
8886
bottom: 0;
8987
z-index: ${isOpen ? 1000 : -1};
9088
}
9189
.popup {
90+
max-width: 380px;
9291
min-height: 240px;
93-
bottom: 80px;
92+
bottom: 20px;
9493
position: absolute;
9594
z-index: 2;
9695
padding: 12px 4px;
@@ -137,6 +136,13 @@ export function FallbackShare() {
137136
margin: 0 auto;
138137
color: #888;
139138
}
139+
@media (min-height: 720px) {
140+
.popup {
141+
left: 50%;
142+
right: auto;
143+
bottom: 50%;
144+
}
145+
}
140146
`}
141147
</style>
142148
</div>

‎src/pages/_app.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import '../styles/index.css';
22

3-
import React, { FunctionComponent, useState } from 'react';
3+
import React, { FunctionComponent, MouseEvent } from 'react';
44
import { AppProps } from 'next/app';
55
import Div100vh from 'react-div-100vh';
66
import NProgress from 'nprogress';
7+
import usePortal from 'react-useportal';
78
import Router from 'next/router';
89
import Head from 'next/head';
910

@@ -19,8 +20,8 @@ Router.events.on('routeChangeComplete', () => NProgress.done());
1920
Router.events.on('routeChangeError', () => NProgress.done());
2021

2122
const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
22-
const [showFallbackShare, setShowFallbackShare] = useState(false);
23-
function openShareDialog() {
23+
const { openPortal, closePortal, isOpen, Portal } = usePortal();
24+
function openShareDialog(e: MouseEvent<HTMLButtonElement>) {
2425
// try to open native share dialog
2526
if (window.navigator.share) {
2627
const title = document.title;
@@ -30,23 +31,25 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
3031
return window.navigator.share({ title, text: `${text} ${url}` });
3132
}
3233
// fallback to custom native share dialog
33-
return setShowFallbackShare(true);
34+
return openPortal(e);
3435
}
35-
function closeShareDialog() {
36-
setShowFallbackShare(false);
36+
function closeShareDialog(e: MouseEvent<HTMLButtonElement>) {
37+
closePortal(e);
3738
}
3839
return (
3940
<>
4041
<Head>
4142
{/* Import CSS for nprogress */}
4243
<link rel="stylesheet" type="text/css" href="/nprogress.css" />
4344
</Head>
44-
<ShareContext.Provider value={{ openShareDialog, closeShareDialog, isOpen: showFallbackShare }}>
45-
<Div100vh className="relative">
45+
<ShareContext.Provider value={{ openShareDialog, closeShareDialog, isOpen: isOpen }}>
46+
<Div100vh>
4647
<Component {...pageProps} />
47-
<FallbackShare />
4848
<MobileMenu />
4949
</Div100vh>
50+
<Portal>
51+
<FallbackShare />
52+
</Portal>
5053
</ShareContext.Provider>
5154
</>
5255
);

‎src/pages/crowdfund/[slug].tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@ const CampaignPage: NextPage = ({ initialData, slug }) => {
3535
<div className="p-4 pt-0 lg:flex">
3636
<div className="md:mx-2 md:mr-8 lg:flex-1">
3737
<h1 className="text-2xl mb-2 font-medium text-gray-800">{data.title}</h1>
38-
<p className="text-lg mb-4 text-gray-700 leading-relaxed">{data.description}</p>
38+
<p
39+
className="text-lg mb-4 text-gray-700 leading-relaxed markdown"
40+
dangerouslySetInnerHTML={{ __html: data.description }}
41+
/>
3942
<CampaignProgress campaign={data} />
4043
{data.is_active && (
4144
<div className="mt-6 md:mt-0">

‎src/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function Index() {
1010
return (
1111
<>
1212
<SEO />
13-
<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">
13+
<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">
1414
<header className="py-4 px-4">
1515
<div className="w-full items-center flex justify-center">
1616
<div className="w-40 h-40 mx-auto">

‎src/services/share.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
1+
import React, { MouseEvent } from 'react';
22

33
export const ShareContext = React.createContext({
44
isOpen: false,
5-
openShareDialog: () => null,
6-
closeShareDialog: () => null,
5+
openShareDialog: (e: MouseEvent<HTMLButtonElement>) => null,
6+
closeShareDialog: (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => null,
77
});

‎src/styles/index.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,50 @@ body {
1818
pointer-events: none;
1919
}
2020

21+
.markdown > * + *,
22+
.markdown li + li,
23+
.markdown li > p + p {
24+
@apply mt-6;
25+
}
26+
.markdown strong {
27+
@apply text-black font-bold;
28+
}
29+
.markdown a {
30+
@apply text-black font-normal text-indigo-500;
31+
&:hover {
32+
@apply text-indigo-700;
33+
}
34+
}
35+
.markdown strong a {
36+
@apply font-bold;
37+
}
38+
.markdown h2 {
39+
@apply leading-tight text-xl font-bold text-black mb-2 mt-10;
40+
}
41+
.markdown h3 {
42+
@apply leading-tight text-lg font-bold text-black mt-8 -mb-2;
43+
}
44+
.markdown code {
45+
@apply font-mono text-sm inline bg-gray-500 px-1;
46+
}
47+
.markdown pre code {
48+
@apply block bg-black p-4 rounded;
49+
}
50+
.markdown blockquote {
51+
@apply border-l-4 border-gray-500 pl-4 italic;
52+
}
53+
.markdown ul,
54+
.markdown ol {
55+
list-style: unset;
56+
@apply pl-5;
57+
@screen sm {
58+
@apply pl-10;
59+
}
60+
}
61+
.markdown img {
62+
width: 100%;
63+
}
64+
2165
@keyframes loading {
2266
0% {
2367
background-position: 0 0;

‎yarn.lock‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6254,7 +6254,7 @@ postcss-nested@^4.1.1:
62546254
postcss "^7.0.21"
62556255
postcss-selector-parser "^6.0.2"
62566256

6257-
postcss-nesting@^7.0.0:
6257+
postcss-nesting@^7.0.0, postcss-nesting@^7.0.1:
62586258
version "7.0.1"
62596259
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
62606260
integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
@@ -6852,6 +6852,13 @@ react-is@^16.8.1:
68526852
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
68536853
integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
68546854

6855+
react-useportal@^1.0.13:
6856+
version "1.0.13"
6857+
resolved "https://registry.yarnpkg.com/react-useportal/-/react-useportal-1.0.13.tgz#abfc29f8128756cd7382bff7c81a4f446b792199"
6858+
integrity sha512-83KpNTXUIHnRVTLeMberIblCtssvRSKCPnG/xT9NW60gDYfU13pQBNQKCVUF8MBK+7LnCQ/ZrOuXl8Mp+iXdXA==
6859+
dependencies:
6860+
use-ssr "^1.0.19"
6861+
68556862
react-virtualized-auto-sizer@^1.0.2:
68566863
version "1.0.2"
68576864
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:
82528259
punycode "1.3.2"
82538260
querystring "0.2.0"
82548261

8262+
use-ssr@^1.0.19:
8263+
version "1.0.21"
8264+
resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.21.tgz#cb3921f62396adfdce22d1ac784fe1c12cb57923"
8265+
integrity sha512-4LaUeTJsYZQPLldNO7fUEvTu7+ehb1iBs9FlWEIGzx5pmdaDodBHU+M+OKbr/kl/4TnLPnzrmP5KJbEVEAT6Hw==
8266+
82558267
use-subscription@1.1.1:
82568268
version "1.1.1"
82578269
resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.1.1.tgz#5509363e9bb152c4fb334151d4dceb943beaa7bb"

0 commit comments

Comments
 (0)