Various changes to support authentication

client/package-lock.json

@@ -9927,6 +9927,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",

client/package.json

@@ -15,6 +15,7 @@
     "clipboard-copy": "^4.0.1",
     "dayjs": "^1.10.7",
     "highlight.js": "^11.2.0",
+    "jwt-decode": "^3.1.2",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

client/src/components/Snippets/SnippetForm.tsx

@@ -35,7 +35,7 @@ export const SnippetForm = (props: Props): JSX.Element => {
         setFormData({ ...currentSnippet });
       }
     }
-  }, [currentSnippet]);
+  }, [currentSnippet, inEdit]);
 
   const inputHandler = (
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>

client/src/containers/Home.tsx

@@ -5,10 +5,12 @@ import { SnippetGrid } from '../components/Snippets/SnippetGrid';
 import { SearchBar } from '../components/SearchBar';
 
 export const Home = (): JSX.Element => {
-  const { snippets, getSnippets, searchResults } = useContext(SnippetsContext);
+  const { snippets, getSnippets, searchResults, countTags } =
+    useContext(SnippetsContext);
 
   useEffect(() => {
     getSnippets();
+    countTags();
   }, []);
 
   return (

client/src/containers/Profile.tsx

@@ -1,10 +1,11 @@
 import { Fragment, useContext } from 'react';
-import { AuthContext } from '../store';
+import { AuthContext, SnippetsContext } from '../store';
 import { Button, Card, Layout } from '../components/UI';
 import { dateParser } from '../utils';
 
 export const Profile = (): JSX.Element => {
   const { user, logout } = useContext(AuthContext);
+  const { clearOnLogout } = useContext(SnippetsContext);
 
   return (
     <Layout>
@@ -39,7 +40,10 @@ export const Profile = (): JSX.Element => {
                   color='secondary'
                   outline
                   small
-                  handler={logout}
+                  handler={() => {
+                    logout();
+                    clearOnLogout();
+                  }}
                 />
               </div>
             </Fragment>

client/src/store/contexts.ts

@@ -20,7 +20,8 @@ export const SnippetsContext = createContext<SnippetsContextInterface>({
   deleteSnippet: (id: number) => {},
   toggleSnippetPin: (id: number) => {},
   countTags: () => {},
-  searchSnippets: (query: SearchQuery) => {}
+  searchSnippets: (query: SearchQuery) => {},
+  clearOnLogout: () => {}
 });
 
 export const AuthContext = createContext<AuthContextInterface>({

client/src/store/snippets/index.tsx

@@ -40,14 +40,12 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => {
     await getSnippetByIdAction({ id, setCurrentSnippet });
   };
 
-  const setSnippet = async (id: number) => {
+  const setSnippet = (id: number) => {
     if (id < 0) {
       setCurrentSnippet(null);
       return;
     }
 
-    await getSnippetById(id);
-
     const snippet = snippets.find(s => s.id === id);
 
     if (snippet) {
@@ -117,6 +115,12 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => {
     }
   };
 
+  const clearOnLogout = () => {
+    setCurrentSnippet(null);
+    setTagCount([]);
+    setSnippets([]);
+  };
+
   const context: Context = {
     snippets,
     searchResults,
@@ -130,7 +134,8 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => {
     deleteSnippet,
     toggleSnippetPin,
     countTags,
-    searchSnippets
+    searchSnippets,
+    clearOnLogout
   };
 
   return (

client/src/typescript/interfaces/Context.ts

@@ -14,6 +14,7 @@ export interface SnippetsContext {
   toggleSnippetPin: (id: number) => void;
   countTags: () => void;
   searchSnippets: (query: SearchQuery) => void;
+  clearOnLogout: () => void;
 }
 
 export interface AuthContext {

client/src/typescript/interfaces/Token.ts

@@ -0,0 +1,5 @@
+export interface Token {
+  email: string;
+  iat: number;
+  exp: number;
+}

client/src/typescript/interfaces/index.ts

@@ -6,3 +6,4 @@ export * from './Context';
 export * from './Statistics';
 export * from './SearchQuery';
 export * from './User';
+export * from './Token';

client/src/utils/decodeToken.ts

@@ -0,0 +1,7 @@
+import jwt_decode from 'jwt-decode';
+import { Token } from '../typescript/interfaces';
+
+export const decodeToken = (token: string): Token => {
+  const decoded: Token = jwt_decode(token);
+  return decoded;
+};