Skip to content

Commit

Permalink
Added SkeletonLoader to Review
Browse files Browse the repository at this point in the history
  • Loading branch information
@veronikasif
veronikasif committed Oct 9, 2024
1 parent 06c5bf2 commit bd6be4f
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 138 deletions.
4 changes: 3 additions & 1 deletion libs/application/templates/new-primary-school/src/fields/RelativesTableRepeater/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ const RelativesTableRepeater: FC<React.PropsWithChildren<FieldBaseProps>> = ({
}) => {
const { id, title } = field

const relationFriggOptions = useFriggOptions(OptionsType.RELATION)
const { options: relationFriggOptions } = useFriggOptions(
OptionsType.RELATION,
)

return (
<TableRepeaterFormField
Expand Down
133 changes: 76 additions & 57 deletions libs/application/templates/new-primary-school/src/fields/Review/review-groups/Child.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import { YES } from '@island.is/application/types'
import { DataValue, ReviewGroup } from '@island.is/application/ui-components'
import { GridColumn, GridRow, Stack, Text } from '@island.is/island-ui/core'
import {
GridColumn,
GridRow,
SkeletonLoader,
Stack,
Text,
} from '@island.is/island-ui/core'
import { useLocale } from '@island.is/localization'
import { format as formatKennitala } from 'kennitala'
import { useFriggOptions } from '../../../hooks/useFriggOptions'
import { OptionsType } from '../../../lib/constants'
import { newPrimarySchoolMessages } from '../../../lib/messages'
import {
getApplicationAnswers,
getSelectedOptionLabel,
} from '../../../lib/newPrimarySchoolUtils'
import { ReviewGroupProps } from './props'
import { useFriggOptions } from '../../../hooks/useFriggOptions'
import { OptionsType } from '../../../lib/constants'

export const Child = ({
application,
Expand All @@ -22,7 +28,9 @@ export const Child = ({
application.answers,
)

const pronounOptions = useFriggOptions(OptionsType.PRONOUN)
const { options: pronounOptions, loading } = useFriggOptions(
OptionsType.PRONOUN,
)

return (
<ReviewGroup
Expand All @@ -37,77 +45,88 @@ export const Child = ({
</Text>
</GridColumn>
</GridRow>
<GridRow rowGap={2}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(newPrimarySchoolMessages.shared.fullName)}
value={childInfo.name}
/>
</GridColumn>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(newPrimarySchoolMessages.shared.nationalId)}
value={formatKennitala(childInfo.nationalId)}
/>
</GridColumn>
</GridRow>
<GridRow rowGap={2}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(newPrimarySchoolMessages.shared.address)}
value={childInfo.address.streetAddress}
/>
</GridColumn>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.shared.municipality,
)}
value={`${childInfo.address.postalCode}, ${childInfo.address.city}`}
/>
</GridColumn>
</GridRow>
{(childInfo.preferredName ||
childInfo.pronouns?.length > 0 ||
differentPlaceOfResidence === YES) && (
<GridRow rowGap={2}>
{childInfo.preferredName && (
{childInfo.pronouns?.length > 0 && loading ? (
<SkeletonLoader height={40} width="100%" borderRadius="large" />
) : (
<>
<GridRow rowGap={2}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.childrenNParents
.childInfoPreferredName,
newPrimarySchoolMessages.shared.fullName,
)}
value={childInfo.preferredName}
value={childInfo.name}
/>
</GridColumn>
)}
{childInfo.pronouns?.length > 0 && (
<GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.childrenNParents.childInfoPronouns,
newPrimarySchoolMessages.shared.nationalId,
)}
value={childInfo.pronouns
.map((pronoun) =>
getSelectedOptionLabel(pronounOptions, pronoun),
)
.join(', ')}
value={formatKennitala(childInfo.nationalId)}
/>
</GridColumn>
</GridRow>
<GridRow rowGap={2}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(newPrimarySchoolMessages.shared.address)}
value={childInfo.address.streetAddress}
/>
</GridColumn>
)}
{differentPlaceOfResidence === YES && (
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.childrenNParents
.childInfoPlaceOfResidence,
newPrimarySchoolMessages.shared.municipality,
)}
value={`${childInfo.placeOfResidence?.streetAddress}, ${childInfo.placeOfResidence?.postalCode}`}
value={`${childInfo.address.postalCode}, ${childInfo.address.city}`}
/>
</GridColumn>
</GridRow>
{(childInfo.preferredName ||
childInfo.pronouns?.length > 0 ||
differentPlaceOfResidence === YES) && (
<GridRow rowGap={2}>
{childInfo.preferredName && (
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.childrenNParents
.childInfoPreferredName,
)}
value={childInfo.preferredName}
/>
</GridColumn>
)}
{childInfo.pronouns?.length > 0 && (
<GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.childrenNParents
.childInfoPronouns,
)}
value={childInfo.pronouns
.map((pronoun) =>
getSelectedOptionLabel(pronounOptions, pronoun),
)
.join(', ')}
/>
</GridColumn>
)}
{differentPlaceOfResidence === YES && (
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.childrenNParents
.childInfoPlaceOfResidence,
)}
value={`${childInfo.placeOfResidence?.streetAddress}, ${childInfo.placeOfResidence?.postalCode}`}
/>
</GridColumn>
)}
</GridRow>
)}
</GridRow>
</>
)}
</Stack>
</ReviewGroup>
Expand Down
104 changes: 58 additions & 46 deletions ...ion/templates/new-primary-school/src/fields/Review/review-groups/ReasonForApplication.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import { DataValue, ReviewGroup } from '@island.is/application/ui-components'
import { GridColumn, GridRow, Stack } from '@island.is/island-ui/core'
import {
GridColumn,
GridRow,
SkeletonLoader,
Stack,
} from '@island.is/island-ui/core'
import { useLocale } from '@island.is/localization'
import { getCountryByCode } from '@island.is/shared/utils'
import { useFriggOptions } from '../../../hooks/useFriggOptions'
import {
ReasonForApplicationOptions,
OptionsType,
ReasonForApplicationOptions,
} from '../../../lib/constants'
import { newPrimarySchoolMessages } from '../../../lib/messages'
import {
getApplicationAnswers,
getSelectedOptionLabel,
} from '../../../lib/newPrimarySchoolUtils'
import { ReviewGroupProps } from './props'
import { useFriggOptions } from '../../../hooks/useFriggOptions'

export const ReasonForApplication = ({
application,
Expand All @@ -27,65 +32,72 @@ export const ReasonForApplication = ({
reasonForApplicationPostalCode,
} = getApplicationAnswers(application.answers)

const relationFriggOptions = useFriggOptions(OptionsType.REASON)
const { options: relationFriggOptions, loading } = useFriggOptions(
OptionsType.REASON,
)

return (
<ReviewGroup
isEditable={editable}
editAction={() => goToScreen?.('reasonForApplication')}
isLast
>
<Stack space={2}>
<GridRow>
<GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.primarySchool
.reasonForApplicationSubSectionTitle,
)}
value={getSelectedOptionLabel(
relationFriggOptions,
reasonForApplication,
)}
/>
</GridColumn>
</GridRow>
{reasonForApplication === ReasonForApplicationOptions.MOVING_ABROAD && (
{loading ? (
<SkeletonLoader height={40} width="80%" borderRadius="large" />
) : (
<Stack space={2}>
<GridRow>
<GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.primarySchool.country,
newPrimarySchoolMessages.primarySchool
.reasonForApplicationSubSectionTitle,
)}
value={
lang === 'is'
? getCountryByCode(reasonForApplicationCountry)?.name_is
: getCountryByCode(reasonForApplicationCountry)?.name
}
/>
</GridColumn>
</GridRow>
)}
{reasonForApplication ===
ReasonForApplicationOptions.MOVING_MUNICIPALITY && (
<GridRow rowGap={2}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(newPrimarySchoolMessages.shared.address)}
value={reasonForApplicationStreetAddress}
/>
</GridColumn>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.shared.postalCode,
value={getSelectedOptionLabel(
relationFriggOptions,
reasonForApplication,
)}
value={reasonForApplicationPostalCode}
/>
</GridColumn>
</GridRow>
)}
</Stack>
{reasonForApplication ===
ReasonForApplicationOptions.MOVING_ABROAD && (
<GridRow>
<GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.primarySchool.country,
)}
value={
lang === 'is'
? getCountryByCode(reasonForApplicationCountry)?.name_is
: getCountryByCode(reasonForApplicationCountry)?.name
}
/>
</GridColumn>
</GridRow>
)}
{reasonForApplication ===
ReasonForApplicationOptions.MOVING_MUNICIPALITY && (
<GridRow rowGap={2}>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(newPrimarySchoolMessages.shared.address)}
value={reasonForApplicationStreetAddress}
/>
</GridColumn>
<GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
<DataValue
label={formatMessage(
newPrimarySchoolMessages.shared.postalCode,
)}
value={reasonForApplicationPostalCode}
/>
</GridColumn>
</GridRow>
)}
</Stack>
)}
</ReviewGroup>
)
}
Loading

0 comments on commit bd6be4f

Please sign in to comment.