Patch 1

context/index.js

@@ -0,0 +1,17 @@
+import React, { useState, createContext } from "react";
+
+export const Context = createContext();
+
+export const ContextProvider = (props) => {
+  const [username, setUsername] = useState("");
+  const [secret, setSecret] = useState("");
+
+  const value = {
+    username,
+    setUsername,
+    secret,
+    setSecret,
+  };
+
+  return <Context.Provider value={value}>{props.children}</Context.Provider>;
+};

package.json

@@ -8,8 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "axios": "^0.23.0",
     "next": "^11.0.0",
     "react": "17.0.2",
+    "react-chat-engine": "^1.11.20",
     "react-dom": "17.0.2"
   }
 }

pages/_app.js

@@ -2,12 +2,12 @@ import "../styles/auth.css";
 import "../styles/chats.css";
 import "../styles/index.css";
 
-// import { ContextProvider } from '../context'
+import { ContextProvider } from "../context";
 
 export default function App({ Component, pageProps }) {
   return (
-    // <ContextProvider>
-    <Component {...pageProps} />
-    // </ContextProvider>
+    <ContextProvider>
+      <Component {...pageProps} />
+    </ContextProvider>
   );
 }

pages/chats.js

@@ -1,5 +1,47 @@
-import React from "react";
+import React, { useState, useEffect, useContext } from "react";
 
-export default function Chats() {
-  return <div className="background">chats</div>;
+import { Context } from "../context";
+
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+
+const ChatEngine = dynamic(() =>
+  import("react-chat-engine").then((module) => module.ChatEngine)
+);
+const MessageFormSocial = dynamic(() =>
+  import("react-chat-engine").then((module) => module.MessageFormSocial)
+);
+
+export default function Home() {
+  const { username, secret } = useContext(Context);
+  const [showChat, setShowChat] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof document !== undefined) {
+      setShowChat(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (username === "" || secret === "") {
+      router.push("/");
+    }
+  }, [username, secret]);
+
+  if (!showChat) return <div />;
+
+  return (
+    <div className="background">
+      <div className="shadow">
+        <ChatEngine
+          height="calc(100vh - 212px)"
+          projectID="b1f9ebfa-0130-4d6c-b2e9-67f4fab240fe"
+          userName={username}
+          userSecret={secret}
+          renderNewMessageForm={() => <MessageFormSocial />}
+        />
+      </div>
+    </div>
+  );
 }

pages/index.js

@@ -1,5 +1,63 @@
-import React from "react";
+import React, { useContext } from "react";
 
-export default function Auth() {
-  return <div className="background">auth</div>;
-}
+import { Context } from "../context";
+
+import { useRouter } from "next/router";
+
+import axios from "axios";
+
+const Auth = () => {
+  const { username, setUsername, secret, setSecret } = useContext(Context);
+
+  const router = useRouter();
+
+  function onSubmit(e) {
+    e.preventDefault();
+
+    if (username.length === 1 || secret.length === 1) return;
+
+    axios
+      .put(
+        "https://api.chatengine.io/users/",
+        { username, secret },
+        { headers: { "Private-Key": "c2f82e63-9978-4c5c-9c17-8b0dec845dc6" } }
+      )
+
+      .then((r) => {
+        router.push("/chats");
+      });
+  }
+
+  return (
+    <div className="background">
+      <div className="auth-container">
+        <form className="auth-form" onSubmit={(e) => onSubmit(e)}>
+          <div className="auth-title">NextJS Chat</div>
+
+          <div className="input-container">
+            <input
+              placeholder="Email"
+              className="text-input"
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
+
+          <div className="input-container">
+            <input
+              type="password"
+              placeholder="Password"
+              className="text-input"
+              onChange={(e) => setSecret(e.target.value)}
+            />
+          </div>
+
+          <button type="submit" className="submit-button">
+            Login / Sign Up
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Auth;