Added TTL to local storage

strobosco · Nov 2, 2021 · 480acd9 · 480acd9
1 parent ed8e6d7
commit 480acd9
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/frontend/components/Footer.js b/frontend/components/Footer.js
@@ -13,6 +13,9 @@ const Footer = () => {
  <h2>Connect with us!</h2>
  <p>
  Reach out to us with any questions, concerns, or suggestions!
+ <br />
+ Also read about what we're working on and what updates are
+ coming!
  </p>
  </div>
  <IconButton

diff --git a/frontend/components/InputGrid.js b/frontend/components/InputGrid.js
@@ -37,9 +37,18 @@ const InputGrid = ({ setPlaylists, setRootName, setUris }) => {
  ];
 
  useEffect(async () => {
- if (localStorage.getItem("accessToken")) {
- setToken(localStorage.getItem("accessToken"));
+ const data = localStorage.getItem("accessToken");
+ if (data) {
+ const item = JSON.parse(data);
+ if (Date.now() > item.ttl) {
+ localStorage.removeItem("accessToken");
+ } else {
+ setToken(item.value);
+ }
  }
+ // if (localStorage.getItem("accessToken")) {
+ // setToken(localStorage.getItem("accessToken"));
+ // }
  }, []);
 
  const createSongs = async () => {
@@ -75,9 +84,9 @@ const InputGrid = ({ setPlaylists, setRootName, setUris }) => {
  numberOfPlaylists: "",
  baseName: "",
  parameters: [],
+ toggle: false,
  }}
  onSubmit={async (values, actions) => {
- console.log(values.parameters);
  setRootName(values.baseName);
  results = [];
  let userSelectedPlaylists = [];
@@ -99,12 +108,12 @@ const InputGrid = ({ setPlaylists, setRootName, setUris }) => {
  accessToken: token,
  selectedPlaylists: JSON.stringify(userSelectedPlaylists),
  userNumberOfPlaylists: values.numberOfPlaylists,
- categories: values.parameters,
+ categories: values.toggle
+ ? completeParameters
+ : values.parameters,
  },
  });
- // console.log(res);
  results.push(res.data);
- // console.log(results[0].playlists);
  await createSongs();
  actions.setSubmitting(false);
  }}
@@ -159,7 +168,17 @@ const InputGrid = ({ setPlaylists, setRootName, setUris }) => {
  </FormControl>
  )}
  </Field>
+ <label>Select at least one feature:</label>
  <div className="parameter-div">
+ <label key="toggle-label" className="label">
+ <Field
+ type="checkbox"
+ name="toggle"
+ className="parameter-input"
+ />
+ All features
+ </label>
+ <br />
  {completeParameters?.map((item, idx) => (
  <label key={`${idx}_label`} className="label">
  <Field

diff --git a/frontend/components/SongsButton.js b/frontend/components/SongsButton.js
@@ -14,11 +14,27 @@ const SongsButton = ({
  const [tokenError, setTokenError] = useState("");
 
  useEffect(() => {
- if (localStorage.getItem("accessToken")) {
-  setToken(localStorage.getItem("accessToken"));
- } else {
+ const data = localStorage.getItem("accessToken");
+ if (!data) {
+  // if no value exists associated with the key, return null
  setTokenError("Please login before continuing!");
+ } else {
+ const item = JSON.parse(data);
+
+ // If TTL has expired, remove the item from localStorage and return null
+ if (Date.now() > item.ttl) {
+ localStorage.removeItem("accessToken");
+ setTokenError("Token expired, sign in again!");
+ } else {
+ setToken(item.value);
+ }
  }
+
+ // if (localStorage.getItem("accessToken")) {
+ // setToken(localStorage.getItem("accessToken"));
+ // } else {
+ // setTokenError("Please login before continuing!");
+ // }
  }, []);
 
  const handleGetPlaylists = async () => {

diff --git a/frontend/components/SongsList.js b/frontend/components/SongsList.js
@@ -7,8 +7,14 @@ import createPlaylists from "../utils/CreatePlaylists";
 const SongsList = ({ songs, rootName, uris }) => {
  const [token, setToken] = useState("");
  useEffect(async () => {
- if (localStorage.getItem("accessToken")) {
- setToken(localStorage.getItem("accessToken"));
+ const data = localStorage.getItem("accessToken");
+ if (data) {
+ const item = JSON.parse(data);
+ if (Date.now() > item.ttl) {
+ localStorage.removeItem("accessToken");
+ } else {
+ setToken(item.value);
+ }
  }
  }, []);