Issue 236 fetch plays datastore

package.json

@@ -3,12 +3,16 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.6.8",
     "@giscus/react": "^2.0.3",
+    "@nhost/react": "^0.8.0",
+    "@nhost/react-apollo": "^4.3.0",
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
     "date-fns": "^2.28.0",
     "firebase": "^9.8.2",
+    "graphql": "^16.5.0",
     "lodash": "^4.17.21",
     "node-sass": "^7.0.1",
     "plop": "^3.0.5",

src/actions/type.js

@@ -0,0 +1 @@
+export const GET_ALL_PLAYS = 'GET_ALL_PLAYS'

src/common/hooks/useGetPlays.js

@@ -0,0 +1,42 @@
+
+import { gql, useQuery } from '@apollo/client';
+
+const GET_PLAYS_QUERY = gql`
+query Fetch_Plays {
+  plays {
+    blog
+    component
+    cover
+    created_at
+    description
+    featured
+    github
+    id
+    language
+    level {
+      name
+    }
+    name
+    path
+    play_tags {
+      tag {
+        name
+      }
+    }
+    updated_at
+    user {
+      id
+      displayName
+      avatarUrl
+    }
+    video
+  }
+}
+`;
+
+const useGetPlays = () => {
+  const {loading, error, data} = useQuery(GET_PLAYS_QUERY);
+  return [loading, error, data];
+}
+
+export default useGetPlays;

src/common/playlists/PlayHeaderInfo.jsx

@@ -40,7 +40,11 @@ const Tags = ({tags}) => {
 };
 
 const PlayHeaderInfo = ({ play }) => {
-
+
+  const structureTags = play?.play_tags.reduce((pre, next) => {
+    return pre.concat(next.tag.name)
+  }, [])
+
   return (
     <div className="header-leftcol">
       <div className="header-leftcol-action">
@@ -53,7 +57,7 @@ const PlayHeaderInfo = ({ play }) => {
         <div className="header-primary">
           <h3 className="header-title">{play.name}</h3>
           <div className="header-title-tags">
-            <LevelBadge level={play.level} /> { play.tags && <Tags tags={play.tags.split(',')} /> }
+            <LevelBadge level={play.level.name} /> { structureTags && <Tags tags={structureTags.toString().split(',')} /> }
           </div>
         </div>
         <div className="header-secondary">

src/common/playlists/PlayList.jsx

@@ -1,12 +1,13 @@
 import { useSearchFilter } from "common/search/hooks/useSearchFilter";
 import PlayThumbnail from "./PlayThumbnail";
 import { ReactComponent as ImageOops } from "images/img-oops.svg";
-import { Link } from 'react-router-dom';
+import { Fragment } from "react";
 
 import "./playlist.css";
 
-const PlayList = () => {
+const PlayList = ({key}) => {
   const plays = useSearchFilter();
+
   if (plays.length === 0) {
     return (
         <div className="play-not-found">
@@ -19,14 +20,14 @@ const PlayList = () => {
     );
   }
   return (
-    <>
+    <Fragment key={key}>
       <ol className="list-plays">
         {plays.map((play, index) => (
           <PlayThumbnail key={play.id} play={play} />
         ))}
       </ol>
-    </>
+    </Fragment>
   );
 };
 
-export default PlayList;
+export default PlayList;

src/common/playlists/PlayMeta.jsx

@@ -1,8 +1,10 @@
 import { cloneElement } from "react";
 import { Helmet } from "react-helmet";
+import * as Plays from '../../plays'
 
 function PlayMeta({ id, name, description, path, cover, component }) {
   const playFolder = path.split("/")[2];
+  const RenderPlay = Plays[component]
 
   let metaImage; // Initialize metaImage variable
   if (cover) {
@@ -50,9 +52,9 @@ function PlayMeta({ id, name, description, path, cover, component }) {
           />
         )}
       </Helmet>
-      {cloneElement(component(), { id })}
+      {cloneElement(<RenderPlay />, { id })}
     </>
   );
 }
 
-export default PlayMeta;
+export default PlayMeta;

src/common/routing/RouteDefs.jsx

@@ -1,35 +1,71 @@
 import App from "App";
-import { Footer, Header, Home, PlayMeta, DefMeta, PageNotFound, PlayIdeas } from "common";
+import {
+  Footer,
+  Header,
+  Home,
+  PlayMeta,
+  DefMeta,
+  PageNotFound,
+  PlayIdeas,
+} from "common";
+import { connect } from "react-redux";
 import PlayList from "common/playlists/PlayList";
-import { getAllPlays } from "meta/play-meta-util";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { NhostApolloProvider } from "@nhost/react-apollo";
+import { NhostClient, NhostReactProvider } from "@nhost/react";
+import useGetPlays from "common/hooks/useGetPlays";
+import { useEffect } from "react";
+import { GET_ALL_PLAYS } from "../../actions/type";
 
-const RouteDefs = () => {
-  const plays = getAllPlays();
+const nhost = new NhostClient({
+  backendUrl: process.env.REACT_APP_NHOST_BACKEND_URL || "",
+});
+
+const ChildRoutes = (props) => {
+  const { dispatch, plays } = props;
+  const [_, error, data] = useGetPlays();
+
+  useEffect(() => {
+    dispatch({ type: GET_ALL_PLAYS, payload: data?.plays, error });
+  }, [data]);
 
   return (
     <BrowserRouter>
       <Header />
       <DefMeta />
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/plays" element={<App />}>
+        <Route path='/' element={<Home />} />
+        <Route path='/plays' element={<App />}>
           <Route index element={<PlayList />} />
-          {plays.map((play, index) => (
+          {!!plays.length && plays?.map((play, index) => (
             <Route
               key={index}
-              path={play.path}
-              element={<PlayMeta {...play} />} // Put play data inside PlayMeta tag for dynamic meta tags
+              path={play?.path}
+              element={<PlayMeta key={index} {...play} />} // Put play data inside PlayMeta tag for dynamic meta tags
             />
           ))}
         </Route>
-        <Route path="/ideas" element={<PlayIdeas />} />
-        <Route path="/*" element={<PageNotFound />} />
-
+        <Route path='/ideas' element={<PlayIdeas />} />
+        <Route path='/*' element={<PageNotFound />} />
       </Routes>
       <Footer />
     </BrowserRouter>
   );
 };
 
-export default RouteDefs;
+const RouteDefs = (props) => {
+  return (
+    <NhostReactProvider nhost={nhost}>
+      <NhostApolloProvider nhost={nhost}>
+        <ChildRoutes {...props} />
+      </NhostApolloProvider>
+    </NhostReactProvider>
+  );
+};
+
+const mapStateToProps = (state) => {
+  const plays = state?.PlayReducer;
+  return { plays };
+};
+
+export default connect(mapStateToProps)(RouteDefs);

src/common/search/hooks/useSearchFilter.js

@@ -1,49 +1,53 @@
 import { SearchContext } from "common/search/search-context";
-import { getPlaysOnSearch } from "meta/play-meta-util";
 import { useContext, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 
 const useSearchFilter = () => {
   const { searchTerm, filterQuery } = useContext(SearchContext);
-
-  console.log('searchTerm', searchTerm);
-  console.log('filterQuery', filterQuery);
-
+  const data = useSelector((state) => state?.PlayReducer);
   const [plays, setPlays] = useState([]);
 
   useEffect(() => {
-    const filteredPlays = filterPlays(searchTerm, filterQuery);
+    const filteredPlays = filterPlays(data, searchTerm, filterQuery);
     setPlays(filteredPlays);
-  }, [searchTerm, filterQuery]);
-
+  }, [searchTerm, filterQuery, data]);
+  
   return plays;
 };
 
-const filterPlays = (searchTerm, filterQuery) => {
+const filterPlays = (data, searchTerm, filterQuery) => {
   let filteredPlays = [];
   const { level, tags, creator, language } = filterQuery;
-
-  const searchedPlays = getPlaysOnSearch(searchTerm);
 
-  filteredPlays = searchedPlays.filter(play => {
-    return (play.github === creator || !creator);
+  const searchedPlays = getPlaysOnSearch(data, searchTerm);
+
+  filteredPlays = searchedPlays.filter((play) => {
+    return play.github === creator || !creator;
   });
 
-  filteredPlays = filteredPlays.filter(play => {
-    return (play.level === level || !level);
+  filteredPlays = filteredPlays.filter((play) => {
+    return play.level.name === level || !level;
   });
 
-  filteredPlays = filteredPlays.filter(play => {
-    return (play.tags.includes(tags[0]) || !tags[0]);
+  filteredPlays = filteredPlays.filter((play) => {
+    return play.play_tags.includes(tags[0]) || !tags[0];
   });
 
-  filteredPlays = filteredPlays.filter(play => {
-    const lang = play.language || 'js';
-    return (lang === language || !language);
+  filteredPlays = filteredPlays.filter((play) => {
+    const lang = play.language || "js";
+    return lang === language || !language;
   });
-
-
+
   return filteredPlays;
-}
+};
 
-export { useSearchFilter };
+const getPlaysOnSearch = (data, searchTerm) => {
+  return data?.filter((play) => {
+    return (
+      play?.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      play?.description?.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  });
+};
 
+export { useSearchFilter };

src/index.js

@@ -2,8 +2,10 @@ import RouteDefs from "common/routing/RouteDefs";
 import { SearchContext } from "common/search/search-context";
 import "index.css";
 import React, { useState } from "react";
-import { createRoot } from 'react-dom/client';
+import { createRoot } from "react-dom/client";
 import reportWebVitals from "reportWebVitals";
+import { Provider } from "react-redux";
+import { store } from "store/store";
 
 /** removing console statement in react prod build */
 if (process.env.NODE_ENV !== "development") {
@@ -19,16 +21,16 @@ const Index = () => {
     level: "",
     tags: [],
     creator: "",
-    language: ""
+    language: "",
   });
 
   const value = { searchTerm, setSearchTerm, filterQuery, setFilterQuery };
   return (
-    <React.StrictMode>
+    <Provider store={store}>
       <SearchContext.Provider value={value}>
         <RouteDefs />
       </SearchContext.Provider>
-    </React.StrictMode>
+    </Provider>
   );
 };
 const container = document.getElementById("root");
@@ -37,4 +39,4 @@ createRoot(container).render(<Index />);
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();

src/meta/play-meta-util.js

@@ -1,12 +1,16 @@
 
 import { plays } from './play-meta';
+import { store } from '../store/store';
+
+
 
 const getAllPlays = () => {
   return plays;
 };
 
 const getPlayById = id => {
-  return plays.find(play => play.id === id);
+  const getAllPlays = store.getState().PlayReducer
+  return getAllPlays.find(play => play.id === id);
 };
 
 const getPlaysOnSearch = searchTerm => {

src/store/reducers/play.reducer.js

@@ -0,0 +1,16 @@
+import { GET_ALL_PLAYS } from "../../actions/type";
+
+const PlayReducer = (state = [], actions) => {
+  switch (actions.type) {
+    case GET_ALL_PLAYS:
+      if (actions.error) {
+        return [];
+      }
+      const data = actions.payload ?? []
+      return [...data];
+    default:
+      return state;
+  }
+};
+
+export default PlayReducer;

src/store/reducers/root-reducers.js

@@ -0,0 +1,6 @@
+import { combineReducers } from "redux";
+import PlayReducer from "./play.reducer";
+
+const RootReducers = combineReducers({ PlayReducer });
+
+export default RootReducers;