Merge pull request #309 from sproul-club/migrate-landing-page

avinashrao2002 · web-flow · commit bb9251ce9d4d · 2022-10-25T12:19:22.000-07:00
Migrate Landing Page
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,6 +15,7 @@
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "require-jsdoc": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "warn"
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -32,4 +32,25 @@ yarn-error.log*
 .vercel
 
 # typescript
-*.tsbuildinfo
+*.tsbuildinfo
+
+#amplify-do-not-edit-begin
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/backend/amplify-meta.json
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end
diff --git a/amplify/.config/project-config.json b/amplify/.config/project-config.json
@@ -0,0 +1,17 @@
+{
+  "projectName": "client",
+  "version": "3.1",
+  "frontend": "javascript",
+  "javascript": {
+    "framework": "react",
+    "config": {
+      "SourceDir": "src",
+      "DistributionDir": "build",
+      "BuildCommand": "npm.cmd run-script build",
+      "StartCommand": "npm.cmd run-script start"
+    }
+  },
+  "providers": [
+    "awscloudformation"
+  ]
+}
diff --git a/amplify/README.md b/amplify/README.md
@@ -0,0 +1,8 @@
+# Getting Started with Amplify CLI
+This directory was generated by [Amplify CLI](https://docs.amplify.aws/cli).
+
+Helpful resources:
+- Amplify documentation: https://docs.amplify.aws
+- Amplify CLI documentation: https://docs.amplify.aws/cli
+- More details on this folder & generated files: https://docs.amplify.aws/cli/reference/files
+- Join Amplify's community: https://amplify.aws/community/
diff --git a/amplify/backend/backend-config.json b/amplify/backend/backend-config.json
@@ -0,0 +1 @@
+{}
diff --git a/amplify/backend/tags.json b/amplify/backend/tags.json
@@ -0,0 +1,10 @@
+[
+  {
+    "Key": "user:Stack",
+    "Value": "{project-env}"
+  },
+  {
+    "Key": "user:Application",
+    "Value": "{project-name}"
+  }
+]
diff --git a/amplify/backend/types/amplify-dependent-resources-ref.d.ts b/amplify/backend/types/amplify-dependent-resources-ref.d.ts
@@ -0,0 +1 @@
+export type AmplifyDependentResourcesAttributes = {}
diff --git a/amplify/cli.json b/amplify/cli.json
@@ -0,0 +1,62 @@
+{
+  "features": {
+    "graphqltransformer": {
+      "addmissingownerfields": true,
+      "improvepluralization": false,
+      "validatetypenamereservedwords": true,
+      "useexperimentalpipelinedtransformer": true,
+      "enableiterativegsiupdates": true,
+      "secondarykeyasgsi": true,
+      "skipoverridemutationinputtypes": true,
+      "transformerversion": 2,
+      "suppressschemamigrationprompt": true,
+      "securityenhancementnotification": false,
+      "showfieldauthnotification": false,
+      "usesubusernamefordefaultidentityclaim": true,
+      "usefieldnameforprimarykeyconnectionfield": false,
+      "enableautoindexquerynames": false,
+      "respectprimarykeyattributesonconnectionfield": false,
+      "shoulddeepmergedirectiveconfigdefaults": false,
+      "populateownerfieldforstaticgroupauth": false
+    },
+    "frontend-ios": {
+      "enablexcodeintegration": true
+    },
+    "auth": {
+      "enablecaseinsensitivity": true,
+      "useinclusiveterminology": true,
+      "breakcirculardependency": true,
+      "forcealiasattributes": false,
+      "useenabledmfas": true
+    },
+    "codegen": {
+      "useappsyncmodelgenplugin": true,
+      "usedocsgeneratorplugin": true,
+      "usetypesgeneratorplugin": true,
+      "cleangeneratedmodelsdirectory": true,
+      "retaincasestyle": true,
+      "addtimestampfields": true,
+      "handlelistnullabilitytransparently": true,
+      "emitauthprovider": true,
+      "generateindexrules": true,
+      "enabledartnullsafety": true
+    },
+    "appsync": {
+      "generategraphqlpermissions": true
+    },
+    "latestregionsupport": {
+      "pinpoint": 1,
+      "translate": 1,
+      "transcribe": 1,
+      "rekognition": 1,
+      "textract": 1,
+      "comprehend": 1
+    },
+    "project": {
+      "overrides": true
+    }
+  },
+  "debug": {
+    "shareProjectConfig": false
+  }
+}
diff --git a/amplify/hooks/README.md b/amplify/hooks/README.md
@@ -0,0 +1,7 @@
+# Command Hooks
+
+Command hooks can be used to run custom scripts upon Amplify CLI lifecycle events like pre-push, post-add-function, etc.
+
+To get started, add your script files based on the expected naming convention in this directory.
+
+Learn more about the script file naming convention, hook parameters, third party dependencies, and advanced configurations at https://docs.amplify.aws/cli/usage/command-hooks
diff --git a/amplify/team-provider-info.json b/amplify/team-provider-info.json
@@ -0,0 +1,15 @@
+{
+  "dev": {
+    "awscloudformation": {
+      "AuthRoleName": "amplify-client-dev-232233-authRole",
+      "UnauthRoleArn": "arn:aws:iam::855935189350:role/amplify-client-dev-232233-unauthRole",
+      "AuthRoleArn": "arn:aws:iam::855935189350:role/amplify-client-dev-232233-authRole",
+      "Region": "us-west-1",
+      "DeploymentBucketName": "amplify-client-dev-232233-deployment",
+      "UnauthRoleName": "amplify-client-dev-232233-unauthRole",
+      "StackName": "amplify-client-dev-232233",
+      "StackId": "arn:aws:cloudformation:us-west-1:855935189350:stack/amplify-client-dev-232233/59f85eb0-1162-11ed-8947-022f622c7091",
+      "AmplifyAppId": "d73u8lvo42dz5"
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@node-sass/json-importer": "^1.3.1",
     "next": "^12.1.6",
+    "node-sass": "^7.0.1",
     "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "sass": "^1.54.0"
   },
   "devDependencies": {
     "@types/node": "17.0.31",
diff --git a/src/contexts/Theme/ThemeContext.ts b/src/contexts/Theme/ThemeContext.ts
@@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+interface ThemeContextProps {
+  theme: string;
+  setTheme: (arg0: "light" | "dark") => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps>({
+  theme: "",
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
+export default ThemeContext;
diff --git a/src/contexts/Theme/ThemeProvider.tsx b/src/contexts/Theme/ThemeProvider.tsx
@@ -0,0 +1,43 @@
+import { ReactNode, useEffect, useState } from "react";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import ThemeContext from "./ThemeContext";
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const [theme, setTheme] = useState("light");
+  const [localTheme, setLocalTheme] = useLocalStorage("sc-theme", "light");
+
+  useEffect(() => {
+    setTheme(localTheme);
+  }, [localTheme]);
+
+  const updateTheme = (newTheme: string) => {
+    setLocalTheme(newTheme);
+    setTheme(newTheme);
+  };
+
+  const toggleTheme = () => {
+    setTheme((prev) => {
+      const newTheme = prev === "light" ? "dark" : "light";
+      setLocalTheme(newTheme);
+      return newTheme;
+    });
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme: theme,
+        setTheme: updateTheme,
+        toggleTheme: toggleTheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;
diff --git a/src/contexts/Theme/index.ts b/src/contexts/Theme/index.ts
@@ -0,0 +1 @@
+export { default as ThemeProvider } from "./ThemeProvider";
diff --git a/src/contexts/Theme/useTheme.ts b/src/contexts/Theme/useTheme.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import ThemeContext from "./ThemeContext";
+
+const useTheme = () => useContext(ThemeContext);
+
+export default useTheme;
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+const useLocalStorage = (key: string, initialValue: any) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error);
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: any) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,7 +1,32 @@
 import type { AppProps } from "next/app";
+import { ReactNode, useEffect } from "react";
+import { ThemeProvider } from "../contexts/Theme";
+import useTheme from "../contexts/Theme/useTheme";
+import "../styles/globals.scss";
+import "./landing/Landing.scss";
 
-const App = ({ Component, pageProps }: AppProps) => {
-  return <Component {...pageProps} />;
+const AppWrapper = ({ Component, pageProps }: AppProps) => {
+  return (
+    <ThemeProvider>
+      <AppLogic>
+        <Component {...pageProps} />
+      </AppLogic>
+    </ThemeProvider>
+  );
 };
 
-export default App;
+interface AppLogicProps {
+  children: ReactNode;
+}
+
+const AppLogic = ({ children }: AppLogicProps) => {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    document.querySelector("body")?.setAttribute("class", theme);
+  }, [theme]);
+
+  return <>{children}</>;
+};
+
+export default AppWrapper;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
diff --git a/src/pages/landing/Landing.scss b/src/pages/landing/Landing.scss
diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
diff --git a/src/styles/theme.json b/src/styles/theme.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`"plugins": ["react", "@typescript-eslint"],`
`16`	`16`	`"rules": {`
`17`	`17`	`"require-jsdoc": "off",`
`18`		`- "react/react-in-jsx-scope": "off"`
	`18`	`+ "react/react-in-jsx-scope": "off",`
	`19`	`+ "no-unused-vars": "warn"`
`19`	`20`	`}`
`20`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export type AmplifyDependentResourcesAttributes = {}`