Issue Fix #1 , Trimming username

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/containers/landing/index.jsx

@@ -11,16 +11,28 @@ import Particles from "react-particles-js";
 import { TweenMax } from "gsap";
 import { LandingLoader, LandingHeader } from "../../components";
 import { useHistory } from "react-router-dom";
+import {Snackbar} from '@material-ui/core';
+import MuiAlert from '@material-ui/lab/Alert';
+
 
 export default function LandingPage() {
   const [username, setUsername] = useState("");
+  const [inValidUsername, setInValidUsername] = useState(false);
   const octocatRef = useRef();
   const landingRef = useRef();
   const loaderRef = useRef();
   const history = useHistory();
 
+  const verifyUsername = (test_username) => {
+    let github_username_regex = new RegExp("^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$");
+    return github_username_regex.test(test_username);
+  }
+
   const handleUsernameSubmit = (e) => {
-    if (e.key === "Enter" && username !== "") {
+    if (e.key === "Enter" && username !== "" && verifyUsername(username)) {
+
+      setInValidUsername(false);
+
       // GSAP ANIMATIONS
       TweenMax.to(octocatRef.current, 0.5, {
         opacity: 0,
@@ -36,6 +48,9 @@ export default function LandingPage() {
 
       setTimeout(() => history.push(`/${username}`), 2000);
     }
+    else if(e.key === "Enter"){
+      setInValidUsername(true);
+    }
   };
 
   // Fade-In Transitions
@@ -66,6 +81,11 @@ export default function LandingPage() {
       <div className="landing__loader" ref={loaderRef}>
         <LandingLoader />
       </div>
+      <Snackbar open={inValidUsername} autoHideDuration={300}>
+        <MuiAlert elevation={6} severity="error" variant="filled">
+          Please enter a valid github Username. 
+        </MuiAlert>
+      </Snackbar>
     </section>
   );
 }

yarn.lock

@@ -1639,6 +1639,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.57":
+  version "4.0.0-alpha.57"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
+  integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@material-ui/styles@^4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"