Added swipe drag with react router

RamanSharma100 · Aug 14, 2019 · 57d0f38 · 57d0f38
1 parent f4b80ef
commit 57d0f38
Show file tree

Hide file tree

Showing 30 changed files with 1,082 additions and 536 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "liveServer.settings.port": 3001,
+    "workbench.colorCustomizations": {}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,25 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.1.3",
+    "@material-ui/core": "^4.3.0",
     "@material-ui/icons": "^4.2.1",
-    "@material-ui/lab": "^4.0.0-alpha.18",
+    "@material-ui/lab": "^4.0.0-alpha.21",
     "axios": "^0.18.1",
     "axios-jsonp": "^1.0.2",
     "dexie": "^2.0.4",
-    "framer-motion": "^1.2.4",
+    "dexie-observable": "^1.0.0-beta.5",
+    "framer-motion": "^1.5.0",
     "history": "^4.9.0",
     "html-entities": "^1.2.1",
     "material-ui": "^0.20.2",
     "react": "^16.8.6",
+    "react-audio-spectrum": "0.0.9",
     "react-dom": "^16.8.6",
+    "react-ga": "^2.6.0",
     "react-pose": "^4.0.8",
+    "react-recaptcha-v3": "^1.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
-    "react-swipeable": "^5.3.0",
+    "react-swipeable": "^5.4.0",
     "react-swipeable-views": "^0.13.3",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.4"
+    "react-window": "^1.8.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -47,8 +51,8 @@
   "devDependencies": {
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.1",
-    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.2"
+    "eslint-plugin-react": "^7.14.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -23,9 +23,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Ylight Music</title>
-    <!-- <script src="https://apis.google.com/js/api.js"></script> -->
-    <!-- google api script for makking OAuth easy -->
+    <title>
+      Ylight Music - Listen to unlimited songs for free without any ads
+    </title>
   </head>
   <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/privacy/index.html → public/privacy0/index.html b/public/privacy/index.html → public/privacy0/index.html
diff --git a/public/privacy/style.css → public/privacy0/style.css b/public/privacy/style.css → public/privacy0/style.css
diff --git a/src/components/App.js b/src/components/App.js
@@ -5,7 +5,7 @@ import SimpleAppBar from "./header/SimpleAppBar";
 import MainPlayer from "./player/MainPlayer";
 import SwipeMenu from "./SwipeMenu";
 import CurrentSection from "./CurrentSection";
-import SnackbarMessage from './SnackbarMessage'
+import SnackbarMessage from "./SnackbarMessage";
 import { GlobalState } from "./GlobalState";
 
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
@@ -33,7 +33,7 @@ function App() {
           <MainPlayer />
           <SwipeMenu />
         </Router>
-        <SnackbarMessage/>
+        <SnackbarMessage />
       </MuiThemeProvider>
     </GlobalState>
   );

diff --git a/src/components/CurrentSection.js b/src/components/CurrentSection.js
@@ -3,10 +3,10 @@ import {
   BrowserRouter as Router,
   withRouter,
   Route,
-  Link
+  Link,
+  Switch
 } from "react-router-dom";
-import { createBrowserHistory } from "history";
-
+import { AnimatePresence } from "framer-motion";
 import { Tabs, Tab, withStyles } from "@material-ui/core";
 import {
   Home,
@@ -19,6 +19,7 @@ import LoginPage from "./LoginPage";
 import RenderDatabase from "./RenderDatabase";
 
 import HomePage from "./sections/HomePage";
+import FeedbackForm from './sections/FeedbackForm'
 
 import { GlobalContext } from "./GlobalState";
 import SearchResult from "./SearchResult";
@@ -28,7 +29,6 @@ import {
   getDownloadedSongs
 } from "../external/saveSong";
 
-import youtubeSearch from "../apis/youtubeSearch";
 import { db } from "../external/saveSong";
 // import the db from save song
 
@@ -63,88 +63,25 @@ const CustomTabs = withStyles({
   selected: {}
 })(Tab);
 
-const playlistsIds = {
-  LatestSongs: "PLFgquLnL59akA2PflFpeQG9L01VFg90wS",
-  RomanticSongs: "PL64G6j8ePNureM8YCKy5nRFyzYf8I2noy",
-  EdmSongs: "PLw-VjHDlEOgs658kAHR_LAaILBXb-s6Q5",
-  TopBolloywood: "PLcRN7uK9CFpPkvCc-08tWOQo6PAg4u0lA",
-  TopPop: "PLDcnymzs18LU4Kexrs91TVdfnplU3I5zs",
-  Reggaeton: "PLS_oEMUyvA728OZPmF9WPKjsGtfC75LiN"
-};
-
-const CurrentSection = ({ history }) => {
+const CurrentSection = ({ history, location }) => {
   const { searchState } = useContext(GlobalContext);
   const { searchResult } = useContext(GlobalContext);
   const { currentVideoSnippet } = useContext(GlobalContext);
 
   const [songsHistoryState, setSongsHistory] = useState([]);
   const [songsLikedState, setSongsLiked] = useState([]);
   const [songsDownloadedState, setSongsDownloaded] = useState([]);
-  const [value, setValue] = useState(0);
-
-  // for home playlist
-  const [songObj, setSongObj] = useState({});
-
-  useEffect(() => {
-    const getTrendingMusic = async () => {
-      const res = await youtubeSearch.get("videos", {
-        params: {
-          chart: "mostPopular",
-          videoCategoryId: "10",
-          regionCode: localStorage.getItem("country_code")
-        }
-      });
-
-      return res.data.items;
-    };
-
-    const getPlayListItems = async data => {
-      const res = await youtubeSearch.get("playlistItems", {
-        params: {
-          playlistId: data
-        }
-      });
-      return res.data.items;
-    };
-
-    // getTrendingMusic().then(data => {
-    //   setSongObj(prevState => {
-    //     return { ...prevState, ...{ trending: data } };
-    //   });
-    // });
-
-    // getPlayListItems(playlistsIds.LatestSongs).then(data => {
-    //   setSongObj(prevState => {
-    //     return { ...prevState, ...{ latestSongs: data } };
-    //   });
-    // });
-
-    // getPlayListItems(playlistsIds.RomanticSongs).then(data => {
-    //   setSongObj(prevState => {
-    //     return { ...prevState, ...{ romanticSongs: data } };
-    //   });
-    // });
-
-    // getPlayListItems(playlistsIds.TopBolloywood).then(data => {
-    //   setSongObj(prevState => {
-    //     return { ...prevState, ...{ topBolloywood: data } };
-    //   });
-    // });
-  }, []);
+  const [tabValue, setTabValue] = useState(0);
+  const [updateCount, setUpdateCount] = useState(0);
+  const [redirectState, setRedirectState] = useState(null);
 
   function handleChange(event, newValue) {
-    setValue(newValue);
+    setTabValue(newValue);
   }
 
-  useEffect(() => {
-    if (searchState === "completed") {
-      history.push("/search");
-    }
-  }, [searchState, history]);
-
-  const fetchSongs = useCallback(async val => {
+  const fetchSongs = useCallback(async () => {
     //it's same as the orders of our tabs
-    switch (val) {
+    switch (tabValue) {
       case 1:
         setSongsLiked(await getLikedSongs());
         break;
@@ -160,69 +97,108 @@ const CurrentSection = ({ history }) => {
       default:
         break;
     }
-  }, [value]);
+  }, [tabValue]);
 
   useEffect(() => {
-    fetchSongs(value);
-  }, [value, fetchSongs]);
+    fetchSongs();
+  }, [tabValue, fetchSongs]);
 
   useEffect(() => {
-    db.songs.hook("updating", function(mod, pKey, obj, trans) {
-      console.log(pKey, obj);
-      fetchSongs(value);
+    fetchSongs();
+    console.log("fetching the songs");
+  }, [updateCount, fetchSongs]);
+
+  useEffect(() => {
+    db.on("changes", () => {
+      setUpdateCount(c => c + 1);
     });
-  }, [fetchSongs]);
 
+    const isThisNewUser = localStorage.getItem("isThisNew");
+    if (isThisNewUser === "no") {
+      setRedirectState(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    // we will redirect everytime user comes to root page
+    if (redirectState && history.location.pathname === "/") {
+      history.replace("/home");
+    }
+  }, [setRedirectState, history, redirectState]);
+
+  // we will load the homepage with all the playlists
+  const continueToHome = () => {
+    localStorage.setItem("isThisNew", "no");
+    history.replace("/home");
+  };
   // the set tab value will keep the tab active on their route
   // there are 4 tabs so there will be 3 indexes
   return (
     <div>
       <br />
+
       <Route
         exact
         path="/"
         render={props => {
-          setValue(0);
-          return <LoginPage />;
+          return <LoginPage continueToHome={continueToHome} />;
         }}
       />
       <Route
         path="/search"
         render={props => <SearchResult videos={searchResult} />}
       />
+      <Route
+        path="/home"
+        render={props => {
+          setTabValue(0);
+          return <HomePage />;
+        }}
+      />
+      {/* <AnimatePresence exitBeforeEnter initial={false}> */}
+      {/* <Switch key={location.pathname}> */}
       <Route
         path="/liked"
         render={props => {
-          setValue(1);
+          setTabValue(1);
           return <RenderDatabase songs={songsLikedState} {...props} />;
         }}
       />
       <Route
         path="/downloads"
         render={props => {
-          setValue(2);
+          setTabValue(2);
           return <RenderDatabase songs={songsDownloadedState} />;
         }}
       />
       <Route
         path="/history"
         render={props => {
-          setValue(3);
+          setTabValue(3);
 
           return <RenderDatabase songs={songsHistoryState} />;
         }}
       />
+      {/* </Switch> */}
+      {/* </AnimatePresence> */}
+
+      <Route path="/privacy" component={"<div>Your privacy page is here</div>"} />
 
-      <Route path="/privacy" component={"Your privacy page is here"} />
+      <Route path="/feedback" component={FeedbackForm} />
 
       <CustomTab
-        value={value}
+        value={tabValue}
         onChange={handleChange}
         variant="fullWidth"
         indicatorColor="primary"
         textColor="primary"
       >
-        <CustomTabs icon={<Home />} aria-label="Home" component={Link} to="/" />
+        <CustomTabs
+          icon={<Home />}
+          aria-label="Home"
+          component={Link}
+          to="/home"
+        />
 
         <CustomTabs
           icon={<Favorite />}

diff --git a/src/components/DownloadDeleteDialog.js b/src/components/DownloadDeleteDialog.js
@@ -17,6 +17,7 @@ const DownloadDeleteDialog = ({ isOpen, handleCancel, handleDelete }) => {
   return (
     <div>
       <Dialog
+        style={{ zIndex: 1500 }}
         open={isOpen}
         onClose={handleCancel}
         aria-labelledby="alert-dialog-title"
@@ -42,7 +43,7 @@ const DownloadDeleteDialog = ({ isOpen, handleCancel, handleDelete }) => {
           <Button onClick={handleCancel} color="primary">
             Cancel
           </Button>
-          <Button onClick={ ()=> handleDelete(checkBox)} color="primary">
+          <Button onClick={() => handleDelete(checkBox)} color="primary">
             Delete
           </Button>
         </DialogActions>