h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Replace redwood flash with toaster

Browse Source 
https://community.redwoodjs.com/t/redwood-flash-is-being-replaced-with-react-hot-toast-how-to-update-your-project-v0-27-0/1921
Resolves #326.
This commit is contained in:
Kurt Hutten
2021-06-06 06:12:26 +10:00
parent 7caf857c98
commit a0b588000a
17 changed files with 50 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/web/src/components/AdminParts/AdminParts.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { Link, routes } from '@redwoodjs/router'
import { QUERY } from 'src/components/AdminPartsCell'
@@ -21,10 +22,6 @@ const truncate = (text) => {
return output
}
const jsonTruncate = (obj) => {
return truncate(JSON.stringify(obj, null, 2))
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
@@ -38,10 +35,9 @@ const checkboxInputTag = (checked) => {
}
const AdminParts = ({ parts }) => {
const { addMessage } = useFlash()
const [deletePart] = useMutation(DELETE_PART_MUTATION, {
onCompleted: () => {
addMessage('Part deleted.', { classes: 'rw-flash-success' })
toast.success('Part deleted.')
},
// This refetches the query on the list page. Read more about other ways to
// update the cache over here:

8
app/web/src/components/EditSubjectAccessRequestCell/EditSubjectAccessRequestCell.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { navigate, routes } from '@redwoodjs/router'
import SubjectAccessRequestForm from 'src/components/SubjectAccessRequestForm'
@@ -33,15 +34,12 @@ const UPDATE_SUBJECT_ACCESS_REQUEST_MUTATION = gql`
export const Loading = () => <div>Loading...</div>
export const Success = ({ subjectAccessRequest }) => {
const { addMessage } = useFlash()
const [updateSubjectAccessRequest, { loading, error }] = useMutation(
UPDATE_SUBJECT_ACCESS_REQUEST_MUTATION,
{
onCompleted: () => {
navigate(routes.subjectAccessRequests())
addMessage('SubjectAccessRequest updated.', {
classes: 'rw-flash-success',
})
toast.success('SubjectAccessRequest updated.')
},
}
)

6
app/web/src/components/EditUserCell/EditUserCell.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { navigate, routes } from '@redwoodjs/router'
import UserProfile from 'src/components/UserProfile'
@@ -33,11 +34,10 @@ export const Empty = () => <div className="h-full">Empty</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ user, refetch, variables: { isEditable } }) => {
const { addMessage } = useFlash()
const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
onCompleted: ({ updateUserByUserName }) => {
navigate(routes.user({ userName: updateUserByUserName.userName }))
addMessage('User updated.', { classes: 'rw-flash-success' })
toast.success('User updated.')
},
})

8
app/web/src/components/IdePartCell/IdePartCell.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { navigate, routes } from '@redwoodjs/router'
import IdeCascadeStudio from 'src/components/IdeCascadeStudio'
import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
@@ -46,11 +47,10 @@ export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Part not found</div>
export const Success = ({ part, refetch }) => {
const { addMessage } = useFlash()
const { user } = useUser()
const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
onCompleted: () => {
addMessage('Part updated.', { classes: 'rw-flash-success fixed w-screen z-10' })
toast.success('Part updated.')
},
})
const [forkPart] = useMutation(FORK_PART_MUTATION, {
@@ -67,7 +67,7 @@ export const Success = ({ part, refetch }) => {
partTitle: forkPart?.title,
})
)
addMessage('Part Forked.', { classes: 'rw-flash-success' })
toast.success('Part Forked.')
},
})

8
app/web/src/components/IdeToolbar/IdeToolbar.js
View File

@@ -4,7 +4,8 @@ import OutBound from 'src/components/OutBound'
import ReactGA from 'react-ga'
import { Link, routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import Button from 'src/components/Button'
import ImageUploader from 'src/components/ImageUploader'
@@ -43,7 +44,6 @@ const IdeToolbar = ({
}
})
const { addMessage } = useFlash()
const [forkPart] = useMutation(FORK_PART_MUTATION, {
refetchQueries: [
{
@@ -86,9 +86,7 @@ const IdeToolbar = ({
partTitle: data?.forkPart?.title,
})
)
addMessage(`Part created with title: ${data?.forkPart?.title}.`, {
classes: 'rw-flash-success',
})
toast.success(`Part created with title: ${data?.forkPart?.title}.`)
} else if (isAuthenticated) onSave()
else recordedLogin()
}

5
app/web/src/components/LoginModal/LoginModal.js
View File

@@ -6,13 +6,12 @@ import InputTextForm from 'src/components/InputTextForm'
import OutBound from 'src/components/OutBound'
import { Form, Submit } from '@redwoodjs/forms'
import { useAuth } from '@redwoodjs/auth'
import { useFlash } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { Link, routes } from '@redwoodjs/router'
import { subscribe } from 'src/helpers/subscribe'
const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
const { logIn, signUp } = useAuth()
const { addMessage } = useFlash()
const [tab, setTab] = useState(shouldStartWithSignup ? 0 : 1)
const onTabChange = (_, newValue) => {
@@ -26,7 +25,7 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
try {
setError('')
if (checkBox) {
subscribe({ email, addMessage })
subscribe({ email, addMessage: (msg) => toast.error(msg) })
}
await signUp({
email,

10
app/web/src/components/PartCell/PartCell.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { navigate, routes } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
@@ -113,7 +114,6 @@ export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
const { currentUser } = useAuth()
const { addMessage } = useFlash()
const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
onCompleted: ({ updatePart }) => {
navigate(
@@ -122,7 +122,7 @@ export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
partTitle: updatePart.title,
})
)
addMessage('Part updated.', { classes: 'rw-flash-success' })
toast.success('Part updated.')
},
})
const [createPart] = useMutation(CREATE_PART_MUTATION, {
@@ -133,7 +133,7 @@ export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
partTitle: createPart?.title,
})
)
addMessage('Part Created.', { classes: 'rw-flash-success' })
toast.success('Part Created.')
},
})
const onSave = async (id, input) => {
@@ -147,7 +147,7 @@ export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
const [deletePart] = useMutation(DELETE_PART_MUTATION, {
onCompleted: ({ deletePart }) => {
navigate(routes.home())
addMessage('Part deleted.', { classes: 'rw-flash-success' })
toast.success('Part deleted.')
},
})

8
app/web/src/components/SubjectAccessRequest/SubjectAccessRequest.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { Link, routes, navigate } from '@redwoodjs/router'
import { QUERY } from 'src/components/SubjectAccessRequestsCell'
@@ -32,15 +33,12 @@ const checkboxInputTag = (checked) => {
}
const SubjectAccessRequest = ({ subjectAccessRequest }) => {
const { addMessage } = useFlash()
const [deleteSubjectAccessRequest] = useMutation(
DELETE_SUBJECT_ACCESS_REQUEST_MUTATION,
{
onCompleted: () => {
navigate(routes.subjectAccessRequests())
addMessage('SubjectAccessRequest deleted.', {
classes: 'rw-flash-success',
})
toast.success('SubjectAccessRequest deleted.')
},
// This refetches the query on the list page. Read more about other ways to
// update the cache over here:

8
app/web/src/components/SubjectAccessRequests/SubjectAccessRequests.js
View File

@@ -1,4 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import { Link, routes } from '@redwoodjs/router'
import { QUERY } from 'src/components/SubjectAccessRequestsCell'
@@ -38,14 +39,11 @@ const checkboxInputTag = (checked) => {
}
const SubjectAccessRequestsList = ({ subjectAccessRequests }) => {
const { addMessage } = useFlash()
const [deleteSubjectAccessRequest] = useMutation(
DELETE_SUBJECT_ACCESS_REQUEST_MUTATION,
{
onCompleted: () => {
addMessage('SubjectAccessRequest deleted.', {
classes: 'rw-flash-success',
})
toast.success('SubjectAccessRequest deleted.')
},
// This refetches the query on the list page. Read more about other ways to
// update the cache over here:

7
app/web/src/components/Users/Users.js
View File

@@ -1,5 +1,5 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes } from '@redwoodjs/router'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
const DELETE_USER_MUTATION = gql`
mutation DeleteUserMutation($id: String!) {
@@ -36,10 +36,9 @@ const checkboxInputTag = (checked) => {
}
const UsersList = ({ users }) => {
const { addMessage } = useFlash()
const [deleteUser] = useMutation(DELETE_USER_MUTATION, {
onCompleted: () => {
addMessage('User deleted.', { classes: 'rw-flash-success' })
toast.success('User deleted.')
},
})

4
app/web/src/helpers/subscribe.js
View File

@@ -7,9 +7,7 @@ export const subscribe = ({ email, addMessage }) => {
)
} catch (e) {
setTimeout(() => {
addMessage('Problem subscribing to newsletter', {
classes: 'bg-red-300 text-red-900',
})
addMessage('Problem subscribing to newsletter')
}, 1000)
}
}

17
app/web/src/layouts/MainLayout/MainLayout.js
View File

@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'
import { Link, routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Flash, useFlash } from '@redwoodjs/web'
import { Toaster, toast } from '@redwoodjs/web/toast'
import Tooltip from '@material-ui/core/Tooltip'
import Popover from '@material-ui/core/Popover'
import { getActiveClasses } from 'get-active-classes'
@@ -20,7 +20,6 @@ let previousSubmission = ''
const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
const { logOut, isAuthenticated, currentUser, client } = useAuth()
const { addMessage } = useFlash()
const { user, loading } = useUser()
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false)
@@ -75,12 +74,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
client
.confirm(token, true)
.then(() => {
addMessage('Email confirmed', { classes: 'rw-flash-success' })
toast.success('Email confirmed')
})
.catch(() => {
addMessage('Problem confirming email', {
classes: 'bg-red-300 text-red-900',
})
toast.error('Problem confirming email')
})
} else if (key === 'recovery_token') {
client
@@ -89,12 +86,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
navigate(routes.updatePassword())
})
.catch(() => {
addMessage('Problem recovering account', {
classes: 'bg-red-300 text-red-900',
})
toast.error('Problem recovering account')
})
}
}, [hash, client]) // complaining about not having addMessage, however adding it puts useEffect into a loop
}, [hash, client])
return (
<div>
<header id="cadhub-main-header">
@@ -197,7 +192,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
)}
</nav>
</header>
<Flash timeout={1500} />
<Toaster timeout={1500} />
<LoginModal
open={isLoginModalOpen}
onClose={() => setIsLoginModalOpen(false)}

4
app/web/src/layouts/SubjectAccessRequestsLayout/SubjectAccessRequestsLayout.js
View File

@@ -1,10 +1,10 @@
import { Link, routes } from '@redwoodjs/router'
import { Flash } from '@redwoodjs/web'
import { Toaster } from '@redwoodjs/web/toast'
const SubjectAccessRequestsLayout = (props) => {
return (
<div className="rw-scaffold">
<Flash timeout={1000} />
<Toaster timeout={1000} />
<header className="rw-header">
<h1 className="rw-heading rw-heading-primary">
<Link to={routes.subjectAccessRequests()} className="rw-link">

9
app/web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js
View File

@@ -1,28 +1,25 @@
import { routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Form, Submit } from '@redwoodjs/forms'
import { useFlash } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import InputTextForm from 'src/components/InputTextForm'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
const AccountRecoveryPage = () => {
const { addMessage } = useFlash()
const { client } = useAuth()
const onSubmit = ({ email }) => {
client
.requestPasswordRecovery(email)
.then(() => {
addMessage('Email sent', { classes: 'rw-flash-success' })
toast.success('Email sent')
setTimeout(() => {
navigate(routes.home())
}, 500)
})
.catch(() => {
addMessage('Problem sending email', {
classes: 'bg-red-300 text-red-900',
})
toast.error('Problem sending email')
})
}
return (

6
app/web/src/pages/SubjectAccessRequestsPage/SubjectAccessRequestsPage.js
View File

@@ -6,6 +6,7 @@ import { Form, Submit } from '@redwoodjs/forms'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
import InputTextForm from 'src/components/InputTextForm'
import { toast } from '@redwoodjs/web/dist/toast'
export const QUERY = gql`
query SUBJECT_ACCESS_REQUEST($userName: String!) {
@@ -74,7 +75,6 @@ const CREATE_SUBJECT_ACCESS_REQUEST_MUTATION = gql`
`
const SubjectAccessRequestPage = () => {
const { addMessage } = useFlash()
const [input, setInput] = useState({})
const { data } = useQuery(QUERY, {
skip: !input.userName,
@@ -88,9 +88,7 @@ const SubjectAccessRequestPage = () => {
CREATE_SUBJECT_ACCESS_REQUEST_MUTATION,
{
onCompleted: () => {
addMessage('SubjectAccessRequest created.', {
classes: 'rw-flash-success',
})
toast.success('SubjectAccessRequest created.')
},
}
)

13
app/web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js
View File

@@ -1,35 +1,30 @@
import { routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Form, Submit } from '@redwoodjs/forms'
import { useFlash } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'
import InputTextForm from 'src/components/InputTextForm'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
const UpdatePasswordPage = () => {
const { addMessage } = useFlash()
const { client } = useAuth()
const onSubmit = ({ password, confirm }) => {
if (password !== confirm || !password) {
addMessage("Passwords don't match, try again", {
classes: 'bg-red-300 text-red-900',
})
toast.error("Passwords don't match, try again")
return
}
client
.currentUser()
.update({ password })
.then(() => {
addMessage('Password updated', { classes: 'rw-flash-success' })
toast.success('Password updated')
setTimeout(() => {
navigate(routes.home())
}, 500)
})
.catch(() => {
addMessage('Problem updating password', {
classes: 'bg-red-300 text-red-900',
})
toast.error('Problem updating password')
})
}
return (

3
app/web/src/scaffold.css
View File

@@ -6,9 +6,6 @@
.rw-scaffold ::after,
.rw-scaffold ::before {
box-sizing: inherit;
border-width: 0;
border-style: solid;
border-color: #e2e8f0;
}
.rw-scaffold main {
color: #4a5568;