Skip to content

Commit

Permalink
✨ Changing from react-toast-notifications to react-hot-toast
Browse files Browse the repository at this point in the history
  • Loading branch information
@dnrm
dnrm committed Sep 26, 2021
1 parent 4c31e73 commit 9790a43
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 171 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-hot-toast": "^2.1.1",
"react-markdown": "^7.0.1",
"react-toast-notifications": "^2.5.1",
"spinners-react": "^1.0.4",
"swr": "^1.0.1",
"tailwindcss": "^2.1.4"
},
Expand Down
4 changes: 2 additions & 2 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { Provider } from "next-auth/client";
import { AnimateSharedLayout } from "framer-motion";
import { motion } from "framer-motion";
import { Toaster } from "react-hot-toast";
import { ToastProvider } from "react-toast-notifications";
import { PostsWrapper } from "../context/posts";

Expand All @@ -12,6 +11,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
<PostsWrapper>
<ToastProvider>
<Component {...pageProps} />
<Toaster position={`top-right`} toastOptions={{ duration: 5000 }}/>
</ToastProvider>
</PostsWrapper>
</Provider>
Expand Down
338 changes: 169 additions & 169 deletions pages/account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,191 +1,191 @@
import React, { useState, useEffect } from "react";
import Head from "next/head";
import { getSession } from "next-auth/client";

import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { useToasts } from "react-toast-notifications";
import { Toast, toast } from "react-hot-toast";
import { SpinnerCircular } from "spinners-react";

const Account = ({ session }: any) => {
const [name, setName] = useState(session?.user?.name);
const [username, setUsername] = useState();
const [bio, setBio] = useState();

const { addToast } = useToasts();

useEffect(() => {
const get = async () => {
const response = await fetch("/api/get-user");
const json = await response.json();
setUsername(json.username ? json.username : "");
setName(json.name ? json.name : "");
setBio(json.bio ? json.bio : "");
};

get();
}, []);

const handleNameChange = (e: any) => {
setName(e.target.value);
};

const handleUsernameChange = (e: any) => {
setUsername(e.target.value);
const [name, setName] = useState(session?.user?.name);
const [username, setUsername] = useState();
const [bio, setBio] = useState();

const [updating, setUpdating] = useState(false);

useEffect(() => {
const get = async () => {
const response = await fetch("/api/get-user");
const json = await response.json();
setUsername(json.username ? json.username : "");
setName(json.name ? json.name : "");
setBio(json.bio ? json.bio : "");
};

const handleBioChange = (e: any) => {
setBio(e.target.value);
};
get();
}, []);

const handleSubmit = async (e: any) => {
e.preventDefault();
console.log(e);
const handleNameChange = (e: any) => {
setName(e.target.value);
};

const response = await fetch("/api/update-user", {
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({
username: username,
name: name,
bio: bio
}),
});
const handleUsernameChange = (e: any) => {
setUsername(e.target.value);
};

if (response.ok) {
addToast('success', {
appearance: 'success',
autoDismiss: true
})
}
const handleBioChange = (e: any) => {
setBio(e.target.value);
};

const json = await response.json();
console.log(json);
};
const handleSubmit = async (e: any) => {
e.preventDefault();
setUpdating(true);

return (
<>
<Head>
<title>My Account | Crystal</title>
</Head>
<Navbar />
<main className="flex flex-col p-8">
<header className="flex items-center justify-between">
<h1 className="text-4xl md:text-8xl lg:text-9xl tracking-tighter font-bold text-black py-5">
My Account
</h1>
</header>
<hr className="border-1 border-gray-300" />
<div
className="flex justify-start gap-8 items-center mt-8 profile-picture p-4 bg-cover"
style={{
backgroundImage:
'url("https://source.unsplash.com/collection/94997000/)',
}}
>
<img
src={session ? session?.user?.image : ""}
className="ml-4 w-40 rounded-full border-4 border-white shadow-2xl"
alt=""
/>
<h1 className="text-8xl font-bold text-white py-2 px-4 bg-black bg-opacity-50 rounded-lg">
{name}
</h1>
</div>
<form onSubmit={handleSubmit}>
<div className="account-information mt-8 flex justify-center items-start gap-8 flex-col max-w-4xl">
<div className="username w-full">
<div className="username-input flex justify-start items-center gap-8 w-full">
<h1 className="font-bold text-4xl tracking-tighter">
Username
</h1>
<input
value={username}
onChange={handleUsernameChange}
type="text"
name="username"
className="w-full p-1 font-light text-xl border-2 border-gray-200 rounded-lg"
placeholder="Username..."
/>
</div>
<label
htmlFor="username"
className="max-w-xl text-gray-500"
>
Your username is the unique identifier for your
account. Give people your username so they can
follow you!
</label>
</div>
<div className="name w-full">
<div className="name-input flex justify-start items-center gap-8 w-full">
<h1 className="font-bold text-4xl tracking-tighter">
Name
</h1>
<input
value={name}
onChange={handleNameChange}
type="text"
name="name"
className="w-full p-1 font-light text-xl border-2 border-gray-200 rounded-lg"
placeholder="Name..."
/>
</div>
<label
htmlFor="name"
className="max-w-xl text-gray-500"
>
Your name will appear in your profile.
</label>
</div>
<div className="bio w-full">
<div className="bio-input flex justify-start items-start gap-8 w-full">
<h1 className="font-bold text-4xl tracking-tighter">
Bio
</h1>
<textarea
onChange={handleBioChange}
value={bio}
cols={30}
rows={3}
name="bio"
className="w-full p-1 font-light text-xl border-2 border-gray-200 rounded-lg resize-none"
placeholder="Bio..."
/>
</div>
<label
htmlFor="bio"
className="max-w-xl text-gray-500"
>
Your bio will appear in your profile. It is like
a description for your account.
</label>
</div>
</div>
<div className="save-button mt-8">
<button
type="submit"
className="p-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg px-36 py-2"
>
Save
</button>
</div>
</form>
</main>
<Footer />
</>
);
try {
const response = await fetch("/api/update-user", {
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({
username: username,
name: name,
bio: bio,
}),
});

if (response.ok) {
toast.success("Successfully updated user!");
setUpdating(false);
} else {
toast.error("Error updating user :c");
setUpdating(false);
}
} catch (e) {
toast.error("Error updating user :c");
setUpdating(false);
}
};

return (
<>
<Head>
<title>My Account | Crystal</title>
</Head>
<Navbar />
<main className="flex flex-col p-8">
<header className="flex items-center justify-between">
<h1 className="text-4xl md:text-8xl lg:text-9xl tracking-tighter font-bold text-black py-5">
My Account
</h1>
</header>
<hr className="border-1 border-gray-300" />
<div
className="flex justify-start gap-8 items-center mt-8 profile-picture p-4 bg-cover"
style={{
backgroundImage:
'url("https://source.unsplash.com/collection/94997000/)',
}}
>
<img
src={session ? session?.user?.image : ""}
className="ml-4 w-20 md:w-40 rounded-full border-4 border-white shadow-2xl"
alt=""
/>
<h1 className="text-4xl md:text-8xl font-bold text-white py-2 px-4 bg-black bg-opacity-50 rounded-lg">
{name}
</h1>
</div>
<form onSubmit={handleSubmit}>
<div className="account-information mt-8 flex justify-center items-start gap-8 flex-col max-w-4xl">
<div className="username w-full">
<div className="username-input flex justify-start items-center gap-8 w-full">
<h1 className="font-bold text-4xl tracking-tighter">
Username
</h1>
<input
value={username}
onChange={handleUsernameChange}
type="text"
name="username"
className="w-full p-1 font-light text-xl border-2 border-gray-200 rounded-lg"
placeholder="Username..."
/>
</div>
<label htmlFor="username" className="max-w-xl text-gray-500">
Your username is the unique identifier for your account. Give
people your username so they can follow you!
</label>
</div>
<div className="name w-full">
<div className="name-input flex justify-start items-center gap-8 w-full">
<h1 className="font-bold text-4xl tracking-tighter">Name</h1>
<input
value={name}
onChange={handleNameChange}
type="text"
name="name"
className="w-full p-1 font-light text-xl border-2 border-gray-200 rounded-lg"
placeholder="Name..."
/>
</div>
<label htmlFor="name" className="max-w-xl text-gray-500">
Your name will appear in your profile.
</label>
</div>
<div className="bio w-full">
<div className="bio-input flex justify-start items-start gap-8 w-full">
<h1 className="font-bold text-4xl tracking-tighter">Bio</h1>
<textarea
onChange={handleBioChange}
value={bio}
cols={30}
rows={3}
name="bio"
className="w-full p-1 font-light text-xl border-2 border-gray-200 rounded-lg resize-none"
placeholder="Bio..."
/>
</div>
<label htmlFor="bio" className="max-w-xl text-gray-500">
Your bio will appear in your profile. It is like a description
for your account.
</label>
</div>
</div>
<div className="save-button mt-8">
<button
type="submit"
className="flex px-36 justify-center items-center p-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg py-2 h-12 w-36"
>
{updating === false ? (
<p>Save</p>
) : (
<SpinnerCircular
style={{ height: "100%" }}
thickness={200}
speed={100}
color="rgba(255, 255, 255, 1)"
secondaryColor="rgba(0, 0, 0, 0.3)"
/>
)}
</button>
</div>
</form>
</main>
<Footer />
</>
);
};

export default Account;

export async function getServerSideProps(context: any) {
const session = await getSession(context);
const session = await getSession(context);

return {
props: {
session,
},
};
return {
props: {
session,
},
};
}
Loading

1 comment on commit 9790a43

@vercel
Copy link

@vercel vercel bot commented on 9790a43 Sep 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.