fix: navigate on submit, fix privacy toggle, prviate message

republik · Dec 13, 2024 · a767bbe · a767bbe
1 parent 24b8e58
commit a767bbe
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 28 deletions.
diff --git a/apps/www/components/Profile/EditProfile/PrivacySettings.js b/apps/www/components/Profile/EditProfile/PrivacySettings.js
@@ -15,6 +15,7 @@ const styles = {
 }
 
 const PrivacySettings = ({ user, onChange, values, errors, t }) => {
+  console.log(values.hasPublicProfile)
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
       {!user.isEligibleForProfile && (
@@ -69,12 +70,11 @@ export const PublicCheckbox = withT(({ user, values, onChange, t }) => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
     <div {...styles.radio}>
       <Radio
-        value='true'
         checked={values.hasPublicProfile}
-        onChange={(e) => {
+        onChange={() => {
           onChange({
             values: {
-              hasPublicProfile: e.target.value,
+              hasPublicProfile: true,
             },
           })
         }}
@@ -85,12 +85,11 @@ export const PublicCheckbox = withT(({ user, values, onChange, t }) => (
     </div>
     <div {...styles.radio}>
       <Radio
-        value='false'
         checked={!values.hasPublicProfile}
-        onChange={(e) => {
+        onChange={() => {
           onChange({
             values: {
-              hasPublicProfile: e.target.value,
+              hasPublicProfile: false,
             },
           })
         }}

diff --git a/apps/www/components/Profile/EditProfile/Submit.js b/apps/www/components/Profile/EditProfile/Submit.js
@@ -3,6 +3,7 @@ import { graphql } from '@apollo/client/react/hoc'
 import { gql } from '@apollo/client'
 import { css } from 'glamor'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import {
   InlineSpinner,
@@ -29,19 +30,11 @@ const styles = {
 
 const Submit = ({ me, user, t, state, setState, update }) => {
   const [colorScheme] = useColorContext()
+  const router = useRouter()
 
   if (!me || me.id !== user.id) {
     return null
   }
-  if (state.updating) {
-    return (
-      <div {...styles.container}>
-        <InlineSpinner />
-        <br />
-        {t('profile/edit/updating')}
-      </div>
-    )
-  }
 
   const errorMessages = Object.keys(state.errors)
     .map((key) => state.errors[key])
@@ -74,7 +67,7 @@ const Submit = ({ me, user, t, state, setState, update }) => {
       <div
         style={{
           opacity: errorMessages.length ? 0.5 : 1,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         <Button
@@ -102,14 +95,10 @@ const Submit = ({ me, user, t, state, setState, update }) => {
                 state.values.publicUrl === DEFAULT_VALUES.publicUrl
                   ? ''
                   : state.values.publicUrl,
-            })
+            }).then(() => router.push(`/~${user.slug}`))
           }}
         >
-          {t(
-            state.values.hasPublicProfile && !user.hasPublicProfile
-              ? 'profile/edit/publish'
-              : 'profile/edit/save',
-          )}
+          {state.updating ? <InlineSpinner /> : <>{t('profile/edit/save')}</>}
         </Button>
       </div>
       <Link
@@ -182,7 +171,6 @@ export default compose(
           .then(() => {
             setState(() => ({
               updating: false,
-              isEditing: false,
               error: undefined,
               values: {},
             }))

diff --git a/apps/www/components/Profile/ProfileView/index.js b/apps/www/components/Profile/ProfileView/index.js
@@ -7,6 +7,7 @@ import {
   Interaction,
   mediaQueries,
   IconButton,
+  useColorContext,
 } from '@project-r/styleguide'
 
 import { useMe } from '../../../lib/context/MeContext'
@@ -118,17 +119,13 @@ const makeLoadMore = (fetchMore, dataType, variables) => () =>
 const ProfileView = ({ data: { user }, fetchMore }) => {
   const { me } = useMe()
   const { t } = useTranslation()
+  const [colorScheme] = useColorContext()
 
   const isMe = me && me.id === user.id
 
   const listedCredential = user.credentials?.filter((c) => c.isListed)[0]
   return (
     <>
-      {!user.hasPublicProfile && (
-        <Box>
-          <Interaction.P>{t('profile/private')}</Interaction.P>
-        </Box>
-      )}
       {isMe && (
         <Link
           style={{
@@ -144,6 +141,14 @@ const ProfileView = ({ data: { user }, fetchMore }) => {
           {t('profile/edit/start')}
         </Link>
       )}
+      {!user.hasPublicProfile && (
+        <p
+          {...colorScheme.set('backgroundColor', 'alert')}
+          style={{ padding: 24, marginBottom: 16 }}
+        >
+          {t('profile/private')}
+        </p>
+      )}
       {!!user.statement && <p {...styles.statement}>{`«${user.statement}»`}</p>}
       <div {...styles.profileContainer}>
         <div {...styles.column}>