Add modal for alerting that is neccesary to fork the project. Remove unused import component (#554)

This commit was merged in pull request #554.
This commit is contained in:
Javier González Bodas
2021-10-12 20:55:23 +02:00
committed by GitHub
parent 549217e953
commit ae05a79e58

View File

@@ -12,7 +12,6 @@ import CaptureButton from 'src/components/CaptureButton/CaptureButton'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext' import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
import Gravatar from 'src/components/Gravatar/Gravatar' import Gravatar from 'src/components/Gravatar/Gravatar'
import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle' import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle'
import SocialCardModal from 'src/components/SocialCardModal/SocialCardModal'
const FORK_PROJECT_MUTATION = gql` const FORK_PROJECT_MUTATION = gql`
mutation ForkProjectMutation($input: ForkProjectInput!) { mutation ForkProjectMutation($input: ForkProjectInput!) {
@@ -60,13 +59,15 @@ export default function IdeHeader({
context: 'ide' | 'profile' context: 'ide' | 'profile'
}) { }) {
const { currentUser } = useAuth() const { currentUser } = useAuth()
const { project } = useIdeContext() const { project, state } = useIdeContext()
const hasUnsavedChanges = project?.code && state?.code && project?.code !== state?.code
const isProfile = context === 'profile' const isProfile = context === 'profile'
const canEdit = const canEdit =
(currentUser && currentUser?.sub === project?.user?.id) || (currentUser && currentUser?.sub === project?.user?.id) ||
currentUser?.roles?.includes('admin') currentUser?.roles?.includes('admin')
const projectOwner = project?.user?.userName const projectOwner = project?.user?.userName
const showForkMessage = !canEdit && hasUnsavedChanges
const [createFork] = useMutation(FORK_PROJECT_MUTATION, { const [createFork] = useMutation(FORK_PROJECT_MUTATION, {
onCompleted: ({ forkProject }) => { onCompleted: ({ forkProject }) => {
@@ -205,11 +206,17 @@ export default function IdeHeader({
<TopButton <TopButton
onClick={handleFork} onClick={handleFork}
name="Fork" name="Fork"
className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" className={ showForkMessage ? " bg-ch-blue-650 bg-opacity-80 hover:bg-opacity-100 text-ch-gray-300 border-blue-300 border-2"
: " bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" }
> >
<Svg name="fork-new" className="w-6 h-6 text-ch-blue-400" /> <Svg name="fork-new" className="w-6 h-6 text-ch-blue-400" />
</TopButton> </TopButton>
)} )}
{currentUser?.sub && showForkMessage && (
<div className="fixed bg-white w-60 h-10 top-20 right-20 z-10 rounded-md font-bold text-sm flex p-2 items-center">
<Svg name="exclamation-circle" className="text-red-400 w-8 h-8 mx-2"/> Fork to save your work
</div>
)}
</div> </div>
</div> </div>
</> </>