🌟 add mongodb

Author: LuciLua

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.next
+.next
+.env

package.json

@@ -13,13 +13,15 @@
  },
  "dependencies": {
  "framer-motion": "^7.10.0",
+ "mongodb": "^4.13.0",
  "next": "^13.0.7",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scroll": "^1.8.9",
  "three": "^0.147.0"
  },
  "devDependencies": {
+ "@types/mongodb": "^4.0.7",
  "@types/node": "^18.11.15",
  "@types/react": "^18.0.26",
  "axios": "^1.2.1",

src/components/Form/Buttons/Buttons.tsx

@@ -7,8 +7,6 @@ import Link from "next/link"
 
 function Buttons({ statusLogin, state, setState }) {
 
- const [data, setData] = useState({})
-
  const c_btn = useRef<any>(null)
  const c_btn_span = useRef<any>(null)
  const c_btn_create_span = useRef<any>(null)

src/components/Form/Form.tsx

@@ -1,8 +1,9 @@
 // styles
 import styles from "./Form.module.scss"
 // react hooks
-import { FormEvent, useState } from "react"
-
+import { FormEvent, useEffect, useState } from "react"
+// axios
+import axios from "axios"
 // components
 import SignIn from "./SignIn/SignIn"
 import SignUp from "./SignUp/SignUp"
@@ -12,23 +13,38 @@ import Footer from "./Footer/Footer"
 function Form({ state, setState }) {
  const [statusLogin, setStatusLogin] = useState<Boolean>(false)
  const [path, setPath] = useState<String>('/')
+ const [data, setData] = useState({})
 
  function verifyIfCanSubmit(e: FormEvent) {
  // se dados estiverem ok
  if (statusLogin) {
+
+ // let responseFromAxios = axios.get("/api/submit")
+ // .then(resp => resp.data)
+ // .then(resp => JSON.stringify(resp))
+ // .catch(err => console.log("err: ", err))
+
  if (state == 'signUp') {
  // se o formulario for do tipo cadastro, va para o login
+ axios.post("/api/submit", data)
  setPath('/')
  } else {
  // se o formulario for do tipo login, va para home
- setPath('/logged')
+ axios.post("/api/submit", data)
+ setPath('/logged/')
  }
  } else {
  console.log('Not yet')
  e.preventDefault()
  }
  }
 
+ // useEffect(() => {
+ // let responseFromAxios = axios.get("/api/submit")
+ // .then(resp => resp.data)
+ // .then(resp => resp.message)
+ // console.log(responseFromAxios)
+ // })
 
  return (
  <form
@@ -37,9 +53,9 @@ function Form({ state, setState }) {
  action={`${path}`}>
  <div className={styles.tick} />
  {state == 'signIn' ?
- <SignIn setStatusLogin={setStatusLogin} />
+ <SignIn setData={setData} setStatusLogin={setStatusLogin} />
  :
- <SignUp setStatusLogin={setStatusLogin} />}
+ <SignUp setData={setData} setStatusLogin={setStatusLogin} />}
  <Buttons setState={setState} state={state} statusLogin={statusLogin} />
  <Footer />
  </form>

src/components/Form/SignIn/SignIn.tsx

@@ -11,12 +11,13 @@ import Input from "../Input/Input"
 // types
 import { UserProps } from "../../../types/UserProps"
 
-function SignIn({ setStatusLogin }) {
+function SignIn({ setStatusLogin, setData }) {
 
 
  const [email, setEmail] = useState<String>('')
  const [pass, setPass] = useState<String>('')
 
+
  function validEmail(email: any) {
  var regexEmail = new RegExp('[a-zA-Z0-9-_!.]+@+[a-zA-Z0-9]+[.]+[a-zA-Z0-9]')
  return regexEmail.test(email) ? true : false
@@ -28,8 +29,12 @@ function SignIn({ setStatusLogin }) {
  }
 
  function formValidation(email: String, pass: String) {
- return validEmail(email) && validPass(pass) ?
- setStatusLogin(true) : setStatusLogin(false)
+ if (validEmail(email) && validPass(pass)) {
+ setStatusLogin(true)
+ setData({ email, pass })
+ } else {
+ setStatusLogin(false)
+ }
  }
 
  useEffect(() => {

src/components/Form/SignUp/SignUp.tsx

@@ -4,15 +4,14 @@ import styles from "../Form.module.scss"
 import { AiOutlineUser } from "react-icons/ai"
 import { RiLockPasswordLine } from "react-icons/ri"
 // React Hooks
-import { FormEvent, InputHTMLAttributes, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 // Components
 import Header from "../Header/Header"
 import Input from "../Input/Input"
 // types
 import { UserProps } from "../../../types/UserProps"
-import EventEmitter from "events"
 
-function SignUp({ setStatusLogin }) {
+function SignUp({ setStatusLogin, setData }) {
 
  const [username, setUsername] = useState<String>('')
  const [email, setEmail] = useState<String>('')
@@ -39,14 +38,16 @@ function SignUp({ setStatusLogin }) {
  }
 
  function formValidation(username: String, email: String, pass: String, passConfirm: String) {
- return validUsername(username) &&
+ if (validUsername(username) &&
  validEmail(email) &&
  validPass(pass) &&
- validPassConfirm(passConfirm)
- ?
+ validPassConfirm(passConfirm)) {
+ setData({ username, email, pass })
  setStatusLogin(true)
- :
+ }
+ else {
  setStatusLogin(false)
+ }
  }
 
  useEffect(() => {

src/pages/api/submit.ts

@@ -1,5 +1,38 @@
-export default (request, response) => {
+import { MongoClient, Db } from "mongodb";
+import url from "url";
+
+let cacheDb: Db = null;
+
+async function connectToDatabase(uri: string) {
+ if (cacheDb) {
+ return cacheDb;
+ }
+
+ const client = await MongoClient.connect(uri, {
+ useNewUrlParser: true,
+ useUnifiedTopology: true,
+ });
+
+ const dbName = url.parse(uri).pathname.substring(1);
+ // substring pula 1 caractere e pega o q vem depois
+ const db = client.db(dbName);
+
+ cacheDb = db;
+
+ return db;
+}
+
+export default async (request, response) => {
  const { username, pass, email } = request.body;
 
- return response.json({ message: `${username} | ${pass} | ${email} ` });
+ const db = await connectToDatabase(process.env.MONGODB_URI);
+ const collection = db.collection("users");
+
+ await collection.insertOne({
+ username,
+ pass,
+ email,
+ });
+
+ return response.status(201).json({ ok: true });
 };

src/pages/logged/index.tsx

@@ -8,8 +8,17 @@ import AnimatedPage from "../../styles/animations/AnimatedPage"
 // components
 import Menu from "../../components/Menu/Menu"
 import MyNotes from "../../components/MyNotes/MyNotes"
+import { useEffect } from "react"
 
 function Logged() {
+
+ useEffect(() => {
+ if (localStorage !== undefined) {
+ const usuario = JSON.parse(localStorage.getItem('user'))
+ console.log(usuario)
+ }
+ })
+
  return (
  <div className={styles.container}>
  <Head>