Improve facebook sharing

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@code4ro/reusable-components": "0.1.21",
+    "@code4ro/reusable-components": "^0.1.23",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -16,11 +16,13 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.5",
     "date-fns": "^2.16.1",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-spinners-css": "^1.2.2",

src/components/NewsCardWidget.module.scss

@@ -1,4 +1,19 @@
 .cardWrapper {
   margin: 40px auto 0;
   max-width: 36rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.button {
+  border: none;
+  background: #ffcc00;
+  color: black;
+  width: 200px;
+  border-radius: 5px;
+  padding: 20px 20px;
+  cursor: pointer;
+  font-size: 20px;
+  margin: 40px auto 0;
 }

src/components/NewsCardWidget.tsx

@@ -1,5 +1,7 @@
 import { ElectionNewsCard } from "@code4ro/reusable-components";
 import React from "react";
+import { Helmet } from "react-helmet";
+import { NavLink } from "react-router-dom";
 import { useBallotFromRoute, useNewsItemIdFromRoute } from "../functions/urlState";
 
 import classes from "./NewsCardWidget.module.scss";
@@ -19,7 +21,21 @@ export const NewsCardWidget: React.FC = () => {
   return (
     (data && data.electionNews && (
       <div className={classes.cardWrapper}>
+        <Helmet>
+          <title>{newsItem.title}</title>
+          <meta name="description" content={newsItem.body} />
+          <meta property="og:title" content={newsItem.title} />
+        </Helmet>
         <ElectionNewsCard key={newsItemId} news={newsItem} feedLink={feedLink} />
+        <NavLink
+          to={`/elections/${data.meta.ballotId}`}
+          className={classes.navLink}
+          activeClassName={classes.navLinkActive}
+        >
+          <button className={classes.button} type="button">
+            Înapoi la site
+          </button>
+        </NavLink>
       </div>
     )) ||
     null

yarn.lock

@@ -1156,10 +1156,10 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@code4ro/reusable-components@0.1.21":
-  version "0.1.21"
-  resolved "https://registry.yarnpkg.com/@code4ro/reusable-components/-/reusable-components-0.1.21.tgz#650a32e2c76ad219ec7a2ddaef64b9d3376a840f"
-  integrity sha512-d+3EHmgNJcrh5GZIbFlRmz1OWp30iy+/lSDBktsJEqeaX+FplmAX5Pbw4MwVYVpoD0m0Vz9oYnb8eny97NJfaQ==
+"@code4ro/reusable-components@^0.1.23":
+  version "0.1.23"
+  resolved "https://registry.yarnpkg.com/@code4ro/reusable-components/-/reusable-components-0.1.23.tgz#b8991d518211e08630afc82b3cc382e4a7c015e0"
+  integrity sha512-BSQDz7AsP0FuNgOvET5mZ8UcVl0iGucyuxN1Fnyd77lDWCFTPbAUzq6nt7uWqKqmrqXt8ZLGmqerx42p0x8egQ==
   dependencies:
     color "^3.1.2"
     date-fns "^2.16.1"
@@ -1830,6 +1830,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a"
+  integrity sha512-PYRoU1XJFOzQ3BHvWL1T8iDNbRjdMDJMT5hFmZKGbsq09kbSqJy61uwEpTrbTNWDopVphUT34zUSVLK9pjsgYQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.5":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
@@ -9622,6 +9629,21 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
@@ -9737,6 +9759,11 @@ react-select@^3.1.0:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
 react-spinners-css@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-spinners-css/-/react-spinners-css-1.2.2.tgz#abbcf609e6b459c89e47f3994d8ef85d1c56dc75"