Rename contexts to Contexts

src/components/Contexts/FileUploadContext.jsx

@@ -0,0 +1,62 @@
+import React, { useContext, useState } from "react";
+import { uploadFile, getCancelToken } from "../../services/uploadFile";
+
+const FileUploadContext = React.createContext();
+
+export const FileUploadProvider = ({ children }) => {
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [status, setStatus] = useState(null);
+  const [cancelUpload, setCancelUpload] = useState(null);
+
+  const done = () => {
+    setCancelUpload(null);
+    setUploading(false);
+    setProgress(0);
+  };
+
+  const cancel = async () => {
+    if (cancelUpload && progress < 100) {
+      cancelUpload.cancel();
+      setStatus("Upload cancelled");
+    }
+    done();
+  };
+
+  const upload = async (files) => {
+    try {
+      if (!files || files.length === 0) throw new Error("No file provided");
+
+      const file = files[0].file;
+      const filename = file.name;
+  
+      setUploading(true);
+      setProgress(0);
+      setStatus(`Uploading ${filename}`);
+      setCancelUpload(getCancelToken());
+      
+      const result = await uploadFile(file, setProgress, cancelUpload);
+      const url = ((result && result.url) ? result.url : "No URL available");
+      setStatus(`Uploaded ${filename}\n${url}`);
+      setCancelUpload(null);
+      setProgress(100);
+    }
+    catch (e) {
+      setStatus(`Error occured: ${e.message}`);
+    }
+  };
+
+  return (
+    <FileUploadContext.Provider value={{
+      uploading,
+      progress,
+      status,
+      upload,
+      cancel,
+    }}>
+      {children}
+    </FileUploadContext.Provider>
+  );
+};
+
+export const useFileUploadContext = () => useContext(FileUploadContext);

src/components/Contexts/FileUploadContext.test.jsx

@@ -0,0 +1,61 @@
+jest.mock("../../services/uploadFile");
+
+import {uploadFile, getCancelToken, setUploadFileResponse, setUploadFileDelay, getIssuedCancelToken } from "../../services/uploadFile"
+import { FileUploadProvider, useFileUploadContext }  from "../Contexts/FileUploadContext";
+import {render, cleanup, screen, fireEvent, waitFor} from "@testing-library/react"
+
+describe("FileUploadContext", () => {
+
+  beforeEach(() => {
+    const TestComp = () => {
+      const { progress, uploading, status, upload, cancel } = useFileUploadContext();
+      return (
+        <>
+          <div data-testid="uploading">{uploading.toString()}</div>
+          <div data-testid="progress">{progress.toString()}</div>
+          <div data-testid="status">{status}</div>
+          <button data-testid="uploadNoFile" onClick={() => upload()}/>
+          <button data-testid="upload" onClick={() => upload([{ file: { name: "test.jpg" }}])}/>
+          <button data-testid="cancel" onClick={() => cancel()}/>
+        </>
+      );
+    };
+    render(<FileUploadProvider><TestComp /></FileUploadProvider>);  
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("Initial state", async () => {
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
+    expect(screen.getByTestId("progress").innerHTML).toEqual("0");
+    expect(screen.getByTestId("status").innerHTML).toEqual("");
+  })
+
+  it("Upload no file", async () => {
+    fireEvent.click(screen.getByTestId("uploadNoFile"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
+    expect(screen.getByTestId("progress").innerHTML).toEqual("0");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Error occured: No file provided");
+  })
+
+  it("Upload file", async () => {
+    fireEvent.click(screen.getByTestId("upload"));
+    await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("100"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("true");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Uploaded test.jpg\nCLOUDFRONT_URL");
+  })
+
+  it("Cancel upload", async () => {
+    setUploadFileDelay(true);
+    fireEvent.click(screen.getByTestId("upload"));
+    await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("50"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("true");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Uploading test.jpg");
+    fireEvent.click(screen.getByTestId("cancel"));
+    await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("0"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Upload cancelled");
+  })
+})

src/components/Contexts/UserContext.jsx

@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useState } from 'react';
+import auth from '../../services/auth';
+
+const UserContext = React.createContext();
+
+export const UserProvider = ({ children }) => {
+  const [fetching, setFetching] = useState(false);
+  const [token, setToken] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!localStorage) return;
+    const token = JSON.parse(localStorage.getItem("token"));
+    if (!token) return;
+    const { accessToken: { jwtToken }} = token;
+    const verifyToken = async (accessToken) => {
+      const result = await auth.verify(accessToken);
+      if (result.authenticated) {
+        setToken(token);
+      } else {
+        await signOut();
+      }
+    };
+    verifyToken(jwtToken);
+    return () => {};
+  }, []);
+ 
+  const signIn = async (username, password) => {
+    try {
+      if (!username) throw new Error('Email is required');
+      if (!password) throw new Error('Password is required');
+  
+      setFetching(true);
+      setError(null);
+  
+      const result = await auth.signIn(username, password);
+
+      if (result.message) throw new Error(result.message);
+      signedIn(result);
+    }
+    catch (error) {
+      setError(error.message);
+    }
+    finally {
+      setFetching(false);
+    }
+  };
+
+  const signUp = async (username, password, confirmPassword) => {
+    try {
+      if (!username) throw new Error('Email is required');
+      if (!password) throw new Error('Password is required');
+      if (password !== confirmPassword) throw new Error('Passwords do not match');
+
+      setFetching(true);
+      setError(null);
+
+      const result = await auth.signUp(username, password);
+      if (result.message) throw new Error(result.message);
+    }
+    catch (error) {
+      setError(error.message);
+    }
+    finally {
+      setFetching(false);
+    }
+  };
+
+  const signOut = async () => {
+    setToken(null);
+    if (!localStorage) return;
+    localStorage.removeItem("token");
+  };
+
+  const signedIn = (token) => {
+    setToken(token);
+    if (!localStorage || !token || !token.accessToken) return;
+    localStorage.setItem("token", JSON.stringify(token));
+  }
+
+  return (
+    <UserContext.Provider value={{
+      fetching,
+      token,
+      error,
+      setError,
+      signIn,
+      signUp,
+      signOut,
+    }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUserContext = () => useContext(UserContext);

src/components/Contexts/UserContext.test.jsx

@@ -0,0 +1,169 @@
+jest.mock("../../services/auth");
+
+import {render, cleanup, screen, fireEvent, waitFor} from "@testing-library/react"
+import { UserProvider, useUserContext }  from "../Contexts/UserContext";
+import auth from "../../services/auth";
+
+const TEST_TOKEN = { accessToken: { jwtToken: "TEST" }};
+
+describe("UseContext", () => {
+  
+  describe("Signup", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { signUp, error, fetching } = useUserContext();
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="fetching">{fetching.toString()}</div>
+            <button data-testid="signUpNoEmail" onClick={() => signUp("")}/>
+            <button data-testid="signUpNoPassword" onClick={() => signUp("test@test.com", "")}/>
+            <button data-testid="signUpBadConfirm" onClick={() => signUp("test@test.com", "password", "")}/>
+            <button data-testid="signUp" onClick={() => signUp("test@test.com", "password", "password")}/>          
+          </>
+        );
+      };
+      render(<UserProvider><TestComp /></UserProvider>);  
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      expect(screen.getByTestId("error").innerHTML).toEqual("");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+    });
+
+    it("Error with no email address", () => {
+      fireEvent.click(screen.getByTestId("signUpNoEmail"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("Email is required");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+    });
+
+    it("Error with no password", () => {
+      fireEvent.click(screen.getByTestId("signUpNoPassword"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("Password is required");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+    });
+
+    it("Error with non-matching password", () => {
+      fireEvent.click(screen.getByTestId("signUpBadConfirm"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("Passwords do not match");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+    });
+
+    it("No error sign up", async () => {
+      fireEvent.click(screen.getByTestId("signUp"));
+      await waitFor(() => expect(screen.getByTestId("fetching").innerHTML).toEqual("false"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("");
+    });
+
+    it("Handle server error", async () => {
+      auth.setSignUpResponse({ message: "SERVER-ERROR", error: "ERR" });
+      fireEvent.click(screen.getByTestId("signUp"));
+      await waitFor(() => expect(screen.getByTestId("fetching").innerHTML).toEqual("false"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("SERVER-ERROR");
+      auth.setSignUpResponse({});
+    });
+  });
+
+  describe("Signin", () => {
+
+    beforeEach(() => {
+      const TestComp = () => {
+        const { signIn, error, token, fetching } = useUserContext();
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="fetching">{fetching.toString()}</div>
+            <div data-testid="token">{JSON.stringify(token)}</div>
+            <button data-testid="signInNoEmail" onClick={() => signIn("")}/>
+            <button data-testid="signInNoPassword" onClick={() => signIn("test@test.com", "")}/>
+            <button data-testid="signIn" onClick={() => signIn("test@test.com", "password", "password")}/>          
+          </>
+        );
+      };
+      render(<UserProvider><TestComp /></UserProvider>);  
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      expect(screen.getByTestId("error").innerHTML).toEqual("");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+      expect(screen.getByTestId("token").innerHTML).toEqual("null");
+    });
+
+    it("Error with no email address", () => {
+      fireEvent.click(screen.getByTestId("signInNoEmail"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("Email is required");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+      expect(screen.getByTestId("token").innerHTML).toEqual("null");
+    });
+
+    it("Error with no password", () => {
+      fireEvent.click(screen.getByTestId("signInNoPassword"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("Password is required");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+      expect(screen.getByTestId("token").innerHTML).toEqual("null");
+    });
+
+    it("No error sign in", async () => {
+      const TOKEN_STRING = JSON.stringify(TEST_TOKEN);
+      auth.setSignInResponse(TEST_TOKEN);
+      fireEvent.click(screen.getByTestId("signIn"));
+      await waitFor(() => expect(screen.getByTestId("fetching").innerHTML).toEqual("false"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("");
+      expect(screen.getByTestId("token").innerHTML).toEqual(TOKEN_STRING);
+      if (!localStorage) return;
+      expect(localStorage.getItem("token")).toEqual(TOKEN_STRING);
+      localStorage.removeItem("token");
+  });
+
+    it("Handle server error", async () => {
+      auth.setSignInResponse({ message: "SERVER-ERROR", error: "ERR" });
+      fireEvent.click(screen.getByTestId("signIn"));
+      await waitFor(() => expect(screen.getByTestId("fetching").innerHTML).toEqual("false"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("SERVER-ERROR");
+      auth.setSignUpResponse({});
+    });
+  });
+
+  describe("Signout", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { signIn, signOut, error, token, fetching } = useUserContext();
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="fetching">{fetching.toString()}</div>
+            <div data-testid="token">{JSON.stringify(token)}</div>
+            <button data-testid="signIn" onClick={() => signIn("test@test.com", "password", "password")}/>          
+            <button data-testid="signOut" onClick={() => signOut()}/>          
+          </>
+        );
+      };
+      render(<UserProvider><TestComp /></UserProvider>);  
+      auth.setSignInResponse(TEST_TOKEN);
+      fireEvent.click(screen.getByTestId("signIn"));
+      await waitFor(() => expect(screen.getByTestId("fetching").innerHTML).toEqual("false"));
+    });
+
+    afterEach(() => {
+      auth.setSignInResponse({});
+      cleanup();
+    });
+
+    it("Token cleared", () => {
+      fireEvent.click(screen.getByTestId("signOut"));
+      expect(screen.getByTestId("error").innerHTML).toEqual("");
+      expect(screen.getByTestId("fetching").innerHTML).toEqual("false");
+      expect(screen.getByTestId("token").innerHTML).toEqual("null");
+      if (!localStorage) return;
+      expect(localStorage.getItem('token')).toBeNull();
+    })
+  })
+});

src/components/Contexts/__mocks__/FileUploadContext.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+let uploading = false;
+let progress = 0;
+let status = null;
+
+export const FileUploadProvider = ({ children }) => {
+  return (
+    <div data-testid="mocked-fileuploadprovider">
+      {children}
+    </div>
+  );
+};
+
+export const useFileUploadContext = () => ({
+  uploading,
+  progress,
+  status,
+  upload: jest.fn(),
+  cancel: jest.fn(),
+});

src/components/Contexts/__mocks__/UserContext.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+let token = null;
+let fetching = false;
+let error = null;
+
+export const UserProvider = ({ children }) => {
+  return (
+    <div data-testid="mocked-userprovider">
+      {children}
+    </div>
+  );
+};
+
+export const useUserContext = () => ({
+  token,
+  fetching,
+  error,
+  setError: jest.fn(),
+  signIn: jest.fn(),
+  signUp: jest.fn(),
+  signOut: jest.fn(),
+});
+
+export const setToken = (val) => {
+  token = val;
+};
+
+export const setFetching = (val) => {
+  fetching = val;
+};
+
+export const setError = (val) => {
+  error = val;
+};