Refactor Ads UI to use Formik & Material (#634)

* builds again

* loads a campaign

* theme

* theme

* prettier

* drawer

* top app bar

* fix signout, style login

* fix signin

* no need for selection

* stalemated by the backend

* complete form

* make form easier to read

* remove idea

* add and remove ads and adsets

* gotta delete more code then i add

* delete more

* closer to current experience

* creative

* ready for validation

* no more outside alerter

* use necessary formik

* validations

* validate

* submit works

* valid creative

* bye advanced

* create works

* allow for edit

* edit works

* no viewing analytics while under review

* all the old forms, gone

* prettier congrats

* direct to congrats

* edit fully working

* no ability to remove in edit

* replace select settings

* cant reduce empty array

* add url validation

* trailing asterick

* no idea

* no need for select

* more unused

* add a test

* ability to specifty currency

* disable changing monetary amount

* validate start only on new campaign

* reduce touched

* fix test

* save my active advertiser

* disable new ad on update

Author: IanKrieger

.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+build
+
+# npm and prettier fight over a EOF on these files, let npm win:
+package.json
+package-lock.json
+.npm-upgrade.json

.prettierrc.json

@@ -0,0 +1 @@
+{}

package-lock.json

@@ -5,45 +5,47 @@
   "dependencies": {
     "@apollo/client": "3.7.4",
     "@date-io/moment": "2.16.1",
-    "@material-ui/core": "4.9.13",
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
+    "@mui/icons-material": "5.11.0",
+    "@mui/lab": "5.0.0-alpha.115",
+    "@mui/material": "5.11.4",
+    "@mui/styles": "5.11.2",
+    "@mui/x-date-pickers": "5.0.14",
     "axios": "1.2.2",
     "base64url": "3.0.1",
-    "bootstrap": "4.5.3",
-    "bootstrap-daterangepicker": "3.1.0",
     "graphql": "16.6.0",
     "highcharts": "10.3.2",
     "highcharts-react-official": "3.1.0",
     "http-proxy-middleware": "2.0.6",
     "jwt-decode": "3.1.2",
     "lodash": "4.17.21",
-    "material-ui-pickers": "2.2.4",
     "moment": "2.29.4",
     "rc-menu": "8.1.0",
-    "react": "16.14.0",
-    "react-bootstrap-daterangepicker": "7.0.0",
-    "react-chartjs-2": "2.9.0",
-    "react-confetti": "5.0.1",
-    "react-dom": "16.13.1",
+    "react": "17.0.2",
+    "formik": "2.2.9",
+    "date-fns": "2.29.3",
+    "date-fns-tz": "1.3.7",
+    "react-dom": "17.0.2",
     "react-modal": "3.12.1",
-    "react-redux": "7.2.0",
-    "react-router-dom": "5.1.2",
-    "react-select": "3.1.0",
-    "react-switch": "5.0.1",
+    "react-redux": "7.2.9",
+    "react-router-dom": "5.3.4",
     "react-table": "7.8.0",
-    "react-topbar-progress-indicator": "4.1.0",
-    "redux": "4.0.5",
-    "redux-form": "8.3.5",
+    "react-topbar-progress-indicator": "4.1.1",
+    "redux": "4.2.0",
+    "redux-form": "8.3.8",
     "redux-logger": "3.0.6",
     "redux-persist": "6.0.0",
-    "redux-thunk": "2.3.0",
-    "styled-components": "5.1.0",
-    "tweetnacl": "1.0.3"
+    "redux-thunk": "2.4.2",
+    "tweetnacl": "1.0.3",
+    "yup": "0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "codegen": "graphql-codegen",
+    "format": "prettier --write .",
     "eject": "react-scripts eject",
     "tsc": "tsc"
   },
@@ -61,22 +63,19 @@
     "@types/jwt-decode": "2.2.1",
     "@types/lodash": "4.14.150",
     "@types/node": "13.13.5",
-    "@types/react": "16.9.34",
-    "@types/react-dom": "16.9.7",
-    "@types/react-redux": "7.1.8",
-    "@types/react-router-dom": "5.1.5",
-    "@types/redux-form": "8.2.5",
-    "@types/redux-logger": "3.0.7",
+    "@types/react": "17.0.52",
+    "@types/react-dom": "17.0.18",
+    "@types/react-router-dom": "5.3.3",
+    "@types/redux-form": "8.3.5",
+    "@types/redux-logger": "3.0.9",
     "local-web-server": "4.0.0",
     "react-scripts": "5.0.0",
-    "ts-node": "^10.9.1",
-    "typescript": "4.9.4"
+    "ts-node": "10.9.1",
+    "typescript": "4.9.4",
+    "prettier": "2.8.3"
   },
   "overrides": {
-    "nth-check": "2.1.1",
-    "material-ui-pickers": {
-      "@material-ui/core": "$@material-ui/core"
-    }
+    "nth-check": "2.1.1"
   },
   "browserslist": [
     ">0.2%",

package.json

@@ -4,12 +4,13 @@ import _ from "lodash";
 import Authentication from "./containers/Authentication/Authentication";
 import { Redirect, Route, Switch, withRouter } from "react-router-dom";
 
-import Context from "./state/context";
+import Context, {getActiveAdvertiser, setActiveAdvertiser} from "./state/context";
 import User from "./user/User";
 import { connect } from "react-redux";
-import { SignOut } from "./actions";
 import jwt_decode from "jwt-decode";
 import moment from "moment";
+import {CssBaseline, StyledEngineProvider, ThemeProvider} from "@mui/material";
+import {theme} from "./theme";
 
 const App = props => {
   const [loading, setLoading] = useState(undefined)
@@ -27,8 +28,9 @@ const App = props => {
     }
     const { advertisers, auth } = props;
     if (auth && auth.signedIn && auth.emailVerified) {
-      const activeAdvertiser = _.find(advertisers, { state: "active" });
+      const activeAdvertiser = getActiveAdvertiser() || _.find(advertisers, { state: "active" });
       if (advertisers.length > 0 && activeAdvertiser) {
+        setActiveAdvertiser(activeAdvertiser);
         return <Redirect to="/user/main" />;
       } else {
         return <Redirect to="/auth" />;
@@ -40,23 +42,29 @@ const App = props => {
 
   return (
     <>
-      <Context.Provider value={{
-        loading,
-        sidebar,
-        setSidebar,
-        setLoading
-      }}>
-        <Switch>
-          <Route path="/user/main" component={User} />
-          <Route path="/auth" component={Authentication} />
-          <Route path='/' exact={true} component={() => {
-            window.location.href = "https://brave.com/brave-ads-waitlist/";
-            return null;
-          }} />
-          {getRedirect()}
-        </Switch>
-
-      </Context.Provider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Context.Provider value={{
+            loading,
+            sidebar,
+            setSidebar,
+            setLoading
+          }}>
+            <Switch>
+              <Route path="/user/main">
+                <User />
+              </Route>
+              <Route path="/auth" component={Authentication} />
+              <Route path='/' exact={true} component={() => {
+                window.location.href = "https://brave.com/brave-ads-waitlist/";
+                return null;
+              }} />
+              {getRedirect()}
+            </Switch>
+          </Context.Provider>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </>
   );
 }

src/assets/images/Subdomains_Rewards_Ads_Default.png public/Subdomains_Rewards_Ads_Default.png

@@ -1,8 +1,7 @@
 import axios from "axios";
 
-import { OpenSnackBar } from "../snackbar";
-
 import { IAuthAction, IAuthPayload, ISignInPayload } from "./auth.interface";
+import {OpenSnackBar} from "../snackbar";
 
 export const SIGN_IN_START = "SIGNINSTART";
 export const SignInStart = (payload: ISignInPayload): IAuthAction => ({
@@ -28,7 +27,6 @@ export const SignIn = (payload: ISignInPayload) => {
       try {
         dispatch(SignInStart(payload));
         dispatch(SignInSuccessful({ accessToken: payload.accessToken }));
-        dispatch(OpenSnackBar("Signed In Successfully"));
         return Promise.resolve({ accessToken: payload.accessToken });
       } catch (error: any) {
         dispatch(SignInFailed(error));
@@ -43,7 +41,6 @@ export const SignIn = (payload: ISignInPayload) => {
           },
         });
         dispatch(SignInSuccessful(response.data));
-        dispatch(OpenSnackBar("Signed In Successfully"));
         return Promise.resolve(response.data);
         // TODO: Remove w/ redux
       } catch (error: any) {