🔥 Refactoring of the code to take out meta util

plop-templates/component.hbs

@@ -1,6 +1,6 @@
 
 import { useLocation } from 'react-router-dom';
-import { getPlayById } from 'meta/play-meta';
+import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
 

src/common/playlists/FeaturedPlays.js

@@ -1,6 +1,6 @@
 import PlayThumbnail from "./PlayThumbnail";
 
-import { getFeaturedPlays } from "meta/play-meta";
+import { getFeaturedPlays } from "meta/play-meta-util";
 
 const FeaturedPlays = () => {
  const plays = getFeaturedPlays();

src/common/routing/RouteDefs.js

@@ -1,7 +1,7 @@
 import App from "App";
 import { Footer, Header, Home, PageNotFound } from "common";
 import PlayList from 'common/playlists/PlayList';
-import { getAllPlays } from 'meta/play-meta';
+import { getAllPlays } from 'meta/play-meta-util';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 const RouteDefs = () => {

src/common/search/FilterPlays.js

@@ -1,5 +1,5 @@
 import { Modal } from "common";
-import { getAllCreators, getAllLevels, getAllTags } from "meta/play-meta";
+import { getAllCreators, getAllLevels, getAllTags } from "meta/play-meta-util";
 import { useContext, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { SearchContext } from "./search-context";

src/common/search/hooks/useSearchFilter.js

@@ -1,5 +1,5 @@
 import { SearchContext } from "common/search/search-context";
-import { getPlaysOnSearch } from "meta/play-meta";
+import { getPlaysOnSearch } from "meta/play-meta-util";
 import { useContext, useEffect, useState } from "react";
 
 const useSearchFilter = () => {

src/meta/play-meta-util.js

@@ -0,0 +1,80 @@
+
+import { plays } from './play-meta';
+
+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())
+ || play.description.toLowerCase().includes(searchTerm.toLowerCase()));
+ });
+}
+
+const getPlaysByTags = tags => {
+ return plays.filter(play => {
+ return play.tags.includes(tags);
+ });
+}
+
+const getPlaysByLevel = level => {
+ return plays.filter(play => {
+ return play.level === level;
+ });
+}
+
+const getPlaysByCreator = creator => {
+ return plays.filter(play => {
+ return play.github === creator;
+ });
+}
+
+const getAllTags = () => {
+ const tags = plays.reduce((acc, play) => {
+ return acc.concat(play.tags.split(','));
+ }, []);
+
+ return Array.from(new Set([...tags]));
+}
+
+const getAllCreators = () => {
+ const creators = plays.reduce((acc, play) => {
+ play.github && acc.push(play.github);
+ return acc;
+ }, []);
+
+ return Array.from(new Set([...creators]));
+}
+
+const getAllLevels = () => {
+ const levels = plays.reduce((acc, play) => {
+ return acc.concat(play.level);
+ }, []);
+
+ return Array.from(new Set([...levels]));
+}
+
+const getFeaturedPlays = () => {
+ const featuredPlays = plays.filter(play => {
+ return play.featured;
+ });
+ return featuredPlays;
+}
+
+export {
+ getAllPlays,
+ getPlayById,
+ getPlaysOnSearch,
+ getPlaysByLevel,
+ getPlaysByTags,
+ getPlaysByCreator,
+ getAllTags,
+ getAllCreators,
+ getAllLevels,
+ getFeaturedPlays
+};

src/meta/play-meta.js

@@ -8,7 +8,7 @@ import {
 //import play here
 } from "plays";
 
-const plays = [
+export const plays = [
  {
  id: 'pl-0001',
  name: 'Why React',
@@ -77,83 +77,5 @@ const plays = [
  }, //replace new play item here
 ];
 
-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())
- || play.description.toLowerCase().includes(searchTerm.toLowerCase()));
- });
-}
-
-const getPlaysByTags = tags => {
- return plays.filter(play => {
- return play.tags.includes(tags);
- });
-}
-
-const getPlaysByLevel = level => {
- return plays.filter(play => {
- return play.level === level;
- });
-}
-
-const getPlaysByCreator = creator => {
- return plays.filter(play => {
- return play.github === creator;
- });
-}
-
-const getAllTags = () => {
- const tags = plays.reduce((acc, play) => {
- return acc.concat(play.tags.split(','));
- }, []);
-
- return Array.from(new Set([...tags]));
-}
-
-const getAllCreators = () => {
- const creators = plays.reduce((acc, play) => {
- play.github && acc.push(play.github);
- return acc;
- }, []);
-
- return Array.from(new Set([...creators]));
-}
-
-const getAllLevels = () => {
- const levels = plays.reduce((acc, play) => {
- return acc.concat(play.level);
- }, []);
-
- return Array.from(new Set([...levels]));
-}
-
-const getFeaturedPlays = () => {
- const featuredPlays = plays.filter(play => {
- return play.featured;
- });
- return featuredPlays;
-}
-
-export {
- getAllPlays,
- getPlayById,
- getPlaysOnSearch,
- getPlaysByLevel,
- getPlaysByTags,
- getPlaysByCreator,
- getAllTags,
- getAllCreators,
- getAllLevels,
- getFeaturedPlays
-};
-
 
 

src/plays/clock/CurrentTimer.js

@@ -2,7 +2,7 @@
 import PlayHeader from 'common/playlists/PlayHeader';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { getPlayById } from 'meta/play-meta';
+import { getPlayById } from 'meta/play-meta-util';
 
 const CurrentTimer = () => {
  // The following code is to fetch the current play from the URL

src/plays/counter/CounterApp.js

@@ -1,7 +1,7 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { getPlayById } from 'meta/play-meta';
+import { getPlayById } from 'meta/play-meta-util';
 import Counter from "./Counter";
 import "./counter.css";
 

src/plays/date-time-counter/CdTimerComp.js

@@ -1,7 +1,7 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-import { getPlayById } from "meta/play-meta";
+import { getPlayById } from "meta/play-meta-util";
 import CountDownTimer from "./CountDownTimer";
 
 const CdTimerComp = () => {

src/plays/family-tree/BasicTree.js

@@ -1,6 +1,6 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useLocation } from "react-router-dom";
-import { getPlayById } from "meta/play-meta";
+import { getPlayById } from "meta/play-meta-util";
 import { family } from "data/family";
 import React, { Fragment } from "react";
 import { Tree, TreeNode } from "react-organizational-chart";

src/plays/movies/MovieContainer.js

@@ -1,7 +1,7 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { getPlayById } from "meta/play-meta";
+import { getPlayById } from "meta/play-meta-util";
 import { movies } from "data/movies";
 import Movie from "./Movie";
 import "./movies.css";

src/plays/why-react/WhyReact.js

@@ -1,7 +1,7 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-import { getPlayById } from "meta/play-meta";
+import { getPlayById } from "meta/play-meta-util";
 import "./why-react.css";
 
 const WhyReact = () => {