feat: add whatsapp share button close #15

app/loaders/phrase.ts

@@ -22,7 +22,5 @@ export async function loaderPhrase<T>({ params }: LoaderSubmission): T {
     },
   });
 
-  return {
-    phrase: normalizePhrase(phraseDatabase[0]),
-  };
+  return normalizePhrase(phraseDatabase[0]);
 }

app/routes/$phrase/$id.tsx

@@ -16,13 +16,13 @@ export const meta: MetaFunction = ({ data }) => {
 
   return {
     title: `Frade de ${phrase.author} | 💪🏼  MotivaAí`,
-    description: `${phrase.phrase} ⎼ ${phrase.author}`,
+    description: `“${phrase.phrase}” ⏤ ${phrase.author}`,
   };
 };
 
 export async function loader(submission: LoaderSubmission) {
-  const data = await loaderPhrase<PhraseType>(submission);
-  return json<LoaderData>(data);
+  const phrase = await loaderPhrase<PhraseType>(submission);
+  return json<LoaderData>({ phrase });
 }
 
 export default function Index() {

app/routes/share/$id.tsx

@@ -0,0 +1,19 @@
+import type { LoaderSubmission } from '@remix-run/react/transition';
+import { redirect } from '@remix-run/node';
+import type { Phrase as PhraseType } from '~/tyles/phrase';
+import { loaderPhrase } from '~/loaders/phrase';
+
+export async function loader(submission: LoaderSubmission) {
+  const { phrase, author, path } = await loaderPhrase<PhraseType>(submission);
+  if (!phrase) return redirect(`/`);
+
+  const BASE_URL = process.env.SITE_BASE_URL || 'https://motivaai.nandomoreira.dev';
+  const text = encodeURIComponent(`_“${phrase}”_ ⏤ ${author} \nconfira em: ${BASE_URL}/${path}`);
+  const url = 'https://api.whatsapp.com/send';
+
+  return redirect(`${url}?text=${text}`);
+}
+
+export default function Index() {
+  return <></>;
+}

app/styles/main.css

@@ -17,11 +17,21 @@ body {
   width: 100%;
 }
 
+footer,
+.back,
+.btn,
+.phrases,
+.phrase {
+  transition: 0.5s all ease-in-out;
+  visibility: visible;
+  opacity: 1;
+}
+
+body.--loading footer,
 body.--loading .back,
-body.--loading .btn-grad,
+body.--loading .btn,
 body.--loading .phrases,
 body.--loading .phrase {
-  transition: 0.5s all ease-in-out;
   visibility: hidden;
   opacity: 0;
 }
@@ -198,11 +208,11 @@ a {
   content: " ⏤ ";
 }
 
-.btn-shuffle {
+.btn {
   background-image: linear-gradient(to right, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 0.1) 51%, rgba(255,255,255, 0.3) 100%);
 }
 
-.btn-shuffle {
+.btn {
   background-color: transparent;
   background-size: 200% auto;
   border-radius: 4px;
@@ -217,33 +227,29 @@ a {
   text-align: center;
   transition: 0.5s all ease-in-out;
 }
-.btn-grad:hover {
+.btn:hover {
   background-position: right center;
   color: #fff;
   text-decoration: none;
 }
 
-.btn-grad {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.3) 100%);
+.btn__inner {
+  display: flex;
+  align-items: center;
 }
-
-.btn-grad {
-  background-size: 200% auto;
-  line-height: 1.3;
-  border-radius: 4px;
-  font-weight: 400;
-  color: #fff;
-  display: inline-block;
-  margin: 1rem 0 0;
-  padding: 0.53rem 1.25rem;
-  text-align: center;
-  transition: 0.5s all ease-in-out;
+.btn__inner span,
+.btn__inner svg {
+  margin: 0 0.2rem;
 }
 
-.btn-grad:hover {
-  background-position: right center;
-  color: #fff;
-  text-decoration: none;
+.btn-shuffle {
+  background-image: linear-gradient(to right, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 0.1) 51%, rgba(255,255,255, 0.3) 100%);
+}
+.btn-random {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.3) 100%);
+}
+.btn-whatsapp {
+  background-image: linear-gradient(to right, rgba(37, 211, 102, 0.6) 0%, rgba(37, 211, 102, 0.3) 51%, rgba(37, 211, 102, 0.6) 100%);
 }
 
 .loading {

app/views/ListView.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NavLink } from '@remix-run/react';
 import { Phrase } from '~/components/Phrase';
 import { shuffleArray } from '~/utils';
+import { BsShuffle } from 'react-icons/bs';
 
 export interface ListViewProps {
   phrases: PhraseType[];
@@ -17,11 +18,17 @@ export function ListView({ phrases }: ListViewProps): React.ReactElement {
   return (
     <div className="phrases container">
       <h3>
-        <button className="btn-shuffle" onClick={() => setNewPhrases(shuffleArray<PhraseType>(phrases))}>
-          Misturar lista
+        <button className="btn btn-shuffle" onClick={() => setNewPhrases(shuffleArray<PhraseType>(phrases))}>
+          <span className="btn__inner">
+            <BsShuffle />
+            <span>Misturar lista</span>
+          </span>
         </button>
-        <NavLink className="btn-grad" to="/random">
-          Motiva Aí!
+        <NavLink className="btn btn-random" to="/random">
+          <span className="btn__inner">
+            <BsShuffle />
+            <span>Motiva Aí!</span>
+          </span>
         </NavLink>
       </h3>
 

app/views/PhraseView.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NavLink } from '@remix-run/react';
 import { Phrase } from '~/components/Phrase';
 import type { Phrase as PhraseType } from '~/tyles/phrase';
+import { BsShuffle, BsWhatsapp } from 'react-icons/bs';
 
 export interface PhraseViewProps {
   phrase: PhraseType;
@@ -15,8 +16,17 @@ export function PhraseView({ phrase }: PhraseViewProps): React.ReactElement {
       </NavLink>
       <div className="container">
         <Phrase phrase={phrase} big />
-        <NavLink className="btn-grad" to="/random">
-          Motiva Aí!
+        <NavLink className="btn btn-random" to="/random">
+          <span className="btn__inner">
+            <BsShuffle />
+            <span>Motiva Aí!</span>
+          </span>
+        </NavLink>
+        <NavLink className="btn btn-whatsapp" to={`/share/${phrase.id}`} target="_blank">
+          <span className="btn__inner">
+            <BsWhatsapp />
+            <span>Compartilhar</span>
+          </span>
         </NavLink>
       </div>
     </div>

package.json

@@ -21,6 +21,7 @@
     "@vercel/node": "^1.14.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "slugify": "^1.6.5"
   },
   "devDependencies": {

yarn.lock

@@ -5211,6 +5211,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"