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 Gravatar from 'src/components/Gravatar/Gravatar'
import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle'
import SocialCardModal from 'src/components/SocialCardModal/SocialCardModal'
const FORK_PROJECT_MUTATION = gql`
mutation ForkProjectMutation($input: ForkProjectInput!) {
@@ -60,13 +59,15 @@ export default function IdeHeader({
context: 'ide' | 'profile'
}) {
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 canEdit =
(currentUser && currentUser?.sub === project?.user?.id) ||
currentUser?.roles?.includes('admin')
const projectOwner = project?.user?.userName
const showForkMessage = !canEdit && hasUnsavedChanges
const [createFork] = useMutation(FORK_PROJECT_MUTATION, {
onCompleted: ({ forkProject }) => {
@@ -203,13 +204,19 @@ export default function IdeHeader({
</Popover>
{currentUser?.sub && (
<TopButton
onClick={handleFork}
name="Fork"
className=" 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" />
onClick={handleFork}
name="Fork"
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" />
</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>
</>