diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000000..3baded8dc7 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src/**/*"] +} \ No newline at end of file diff --git a/screens/GitHub.png b/screens/GitHub.png new file mode 100644 index 0000000000..6bb766b9a7 Binary files /dev/null and b/screens/GitHub.png differ diff --git a/src/App.css b/src/App.css index 5729d52a30..147fae26a0 100644 --- a/src/App.css +++ b/src/App.css @@ -2,11 +2,3 @@ display: flex; } -.left-nav { - flex: 1; -} - -.plays { - flex: 5; - padding: 1rem; -} diff --git a/src/App.js b/src/App.js index e2c032010c..0834c6d849 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,9 @@ -import { useState } from 'react'; -import { Link, Outlet } from 'react-router-dom'; -import './App.css'; -import { getPlaysToInclude } from './meta/play-meta'; - +import "App.css"; +import { Outlet } from "react-router-dom"; function App() { - const [plays] = useState(getPlaysToInclude()); return (
-
diff --git a/src/common/Header.js b/src/common/Header.js deleted file mode 100644 index 881316dfd6..0000000000 --- a/src/common/Header.js +++ /dev/null @@ -1,21 +0,0 @@ -import { Link } from 'react-router-dom'; -import './header.css'; - -const Header = () => { - - return ( -
- React Play - -
- ); -}; - -export default Header; diff --git a/src/common/Footer.js b/src/common/footer/Footer.js similarity index 100% rename from src/common/Footer.js rename to src/common/footer/Footer.js diff --git a/src/common/header/Header.js b/src/common/header/Header.js new file mode 100644 index 0000000000..99ded08dfc --- /dev/null +++ b/src/common/header/Header.js @@ -0,0 +1,48 @@ +import FilterPlays from 'common/search/FilterPlays'; +import SearchPlays from 'common/search/SearchPlays'; +import { useEffect, useState } from "react"; +import { Link, useLocation } from "react-router-dom"; +import './header.css'; + +const Header = () => { + const location = useLocation(); + const pathName = location.pathname; + + const [showSearch, setShowSearch] = useState(false); + + useEffect(() => { + if (pathName === '/') { + setShowSearch(false); + } else { + setShowSearch(true); + } + }, [pathName]); + + return ( +
+ React Play + +
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/common/header.css b/src/common/header/header.css similarity index 100% rename from src/common/header.css rename to src/common/header/header.css diff --git a/src/common/index.js b/src/common/index.js index 13bd255b18..e5dcc61e7a 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -1,12 +1,14 @@ import PageNotFound from './404/PageNotFound'; -import Footer from './Footer'; -import Header from './Header'; +import Footer from './footer/Footer'; +import Header from './header/Header'; import Home from './home/Home'; +import Modal from './modal'; export { Header, Footer, Home, PageNotFound, + Modal }; diff --git a/src/common/modal/index.js b/src/common/modal/index.js new file mode 100644 index 0000000000..aa57e48950 --- /dev/null +++ b/src/common/modal/index.js @@ -0,0 +1,15 @@ +import ReactDOM from "react-dom"; + +const Modal =({ title, show, onClose, onSubmit, children, cname })=> { + if (!show) return null; + return ReactDOM.createPortal( +
+

{ title }

+ { children } + + +
+ ,document.body); +} + +export default Modal; \ No newline at end of file diff --git a/src/common/playlists/PlayList.js b/src/common/playlists/PlayList.js new file mode 100644 index 0000000000..f3aa3baa6b --- /dev/null +++ b/src/common/playlists/PlayList.js @@ -0,0 +1,18 @@ +import { useSearchFilter } from "common/search/hooks/useSearchFilter"; +import { Link } from "react-router-dom"; + +const PlayList = () => { + const plays = useSearchFilter(); + + return ( + + ); +}; + +export default PlayList; diff --git a/src/common/routing/RouteDefs.js b/src/common/routing/RouteDefs.js new file mode 100644 index 0000000000..2a9403beec --- /dev/null +++ b/src/common/routing/RouteDefs.js @@ -0,0 +1,27 @@ +import App from "App"; +import { Footer, Header, Home, PageNotFound } from "common"; +import PlayList from 'common/playlists/PlayList'; +import { getAllPlays } from 'meta/play-meta'; +import { BrowserRouter, Route, Routes } from "react-router-dom"; + +const RouteDefs = () => { + const plays = getAllPlays(); + return ( + +
+ + } /> + }> + } /> + {plays.map((play, index) => ( + + ))} + + } /> + +