✨ Started the work to add social links

src/common/index.js

@@ -3,12 +3,14 @@ import Footer from './footer/Footer';
 import Header from './header/Header';
 import Home from './home/Home';
 import Modal from './modal';
+import PlayLinks from './playlinks';
 
 export {
  Header,
  Footer,
  Home,
  PageNotFound,
- Modal
+ Modal,
+ PlayLinks
 };
 

src/common/playlinks/index.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+const PlayLinks = ({play}) => {
+ console.log(play);
+
+ return(
+ <div className="play-links">
+ </div> 
+ );
+};
+
+export default PlayLinks;

src/common/playlists/PlayList.js

@@ -8,7 +8,7 @@ const PlayList = () => {
  <ul>
  {plays.map((play, index) => (
  <li key={play.id}>
- <Link to={play.path}>{play.name}</Link>
+ <Link to={play.path} state={{ id: play.id }}>{play.name}</Link>
  </li>
  ))}
  </ul>

src/meta/play-meta.js

@@ -65,6 +65,10 @@ const getAllPlays = () => {
  return plays;
 };
 
+const getPlayById = id => {
+ return plays.find(play => play.id === id);
+};
+
 const getPlaysOnSearch = searchTerm => {
  return plays.filter(play => {
  return (play.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -116,6 +120,7 @@ const getAllLevels = () => {
 
 export {
  getAllPlays,
+ getPlayById,
  getPlaysOnSearch,
  getPlaysByLevel,
  getPlaysByTags,

src/plays/clock/CurrentTimer.js

@@ -1,7 +1,17 @@
 
 import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta';
+import { PlayLinks } from 'common';
 
 const CurrentTimer = () => {
+ const location = useLocation();
+ const [play, setPlay] = useState();
+ const { id } = location.state;
+ useEffect(() => {
+
+ setPlay(getPlayById(id));
+ }, [id]);
  // Create a real-time date time counter
  const [date, setDate] = useState(new Date());
 
@@ -16,6 +26,7 @@ const CurrentTimer = () => {
  return(
 
  <div className="counter">
+ <PlayLinks play={play} />
  Current Time: <h1>{date.toLocaleTimeString()}</h1>
  </div>
  );