Skip to content
This repository has been archived by the owner on Sep 24, 2024. It is now read-only.

Commit

Permalink
Merge pull request #70 from commercelayer/update-loading-ui
Browse files Browse the repository at this point in the history
Update loading UI
  • Loading branch information
gciotola authored May 2, 2024
2 parents 1152375 + aa49836 commit b8d1e1c
Show file tree
Hide file tree
Showing 18 changed files with 6,803 additions and 4,982 deletions.
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,10 @@
],
"devDependencies": {
"lerna": "^8.1.2",
"npm-check-updates": "^16.14.15"
"npm-check-updates": "^16.14.20"
},
"resolutions": {
"ip": "^2.0.1"
"ip": "^2.0.1",
"tar": "^6.2.1"
}
}
32 changes: 16 additions & 16 deletions packages/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,37 +29,37 @@
"prepare": "touch ./public/config.local.js"
},
"dependencies": {
"@commercelayer/app-elements": "^1.23.1",
"@commercelayer/eslint-config-ts-react": "^1.3.0",
"@commercelayer/sdk": "5.33.1",
"@commercelayer/app-elements": "^1.24.0",
"@commercelayer/eslint-config-ts-react": "^1.4.5",
"@commercelayer/sdk": "5.37.0",
"@vitejs/plugin-react": "^4.2.1",
"lodash": "^4.17.21",
"papaparse": "^5.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-select": "^5.8.0",
"wouter": "^3.0.1",
"zod": "3.22.4"
"wouter": "^3.1.2",
"zod": "3.23.5"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
"@types/lodash": "^4.14.202",
"@testing-library/react": "^15.0.6",
"@types/lodash": "^4.17.0",
"@types/lodash-es": "^4.17.12",
"@types/node": "20.11.24",
"@types/node": "20.12.8",
"@types/papaparse": "^5.3.14",
"@types/react": "^18.2.63",
"@types/react-dom": "^18.2.20",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/testing-library__jest-dom": "^5.14.9",
"dotenv": "^16.4.5",
"eslint": "^8.57.0",
"jsdom": "^24.0.0",
"rollup-plugin-external-globals": "^0.9.2",
"type-fest": "^4.11.1",
"typescript": "^5.3.3",
"vite": "^5.1.5",
"vite-tsconfig-paths": "^4.3.1",
"vitest": "^1.3.1"
"rollup-plugin-external-globals": "^0.10.0",
"type-fest": "^4.18.1",
"typescript": "^5.4.5",
"vite": "^5.2.10",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.5.3"
},
"engines": {
"node": ">=18"
Expand Down
56 changes: 29 additions & 27 deletions packages/app/src/components/Details/ImportDate.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { useImportDetailsContext } from '#components/Details/Provider'
import { formatDate, useTokenProvider } from '@commercelayer/app-elements'
import {
formatDate,
useTokenProvider,
withSkeletonTemplate
} from '@commercelayer/app-elements'

interface Props extends React.HTMLAttributes<HTMLSpanElement> {
atType:
Expand All @@ -12,32 +16,30 @@ interface Props extends React.HTMLAttributes<HTMLSpanElement> {
includeTime?: boolean
}

export function ImportDate({
atType,
prefixText,
includeTime,
...props
}: Props): JSX.Element | null {
const {
state: { data }
} = useImportDetailsContext()
export const ImportDate = withSkeletonTemplate<Props>(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
({ atType, prefixText, includeTime, isLoading, delayMs, ...props }) => {
const {
state: { data }
} = useImportDetailsContext()

const { user } = useTokenProvider()
const { user } = useTokenProvider()

if (data == null) {
return null
}
if (data == null) {
return null
}

const dateAt = data[atType]
return (
<span {...props}>
{prefixText}{' '}
{dateAt != null &&
formatDate({
isoDate: dateAt,
format: includeTime === true ? 'full' : 'date',
timezone: user?.timezone
})}
</span>
)
}
const dateAt = data[atType]
return (
<span {...props}>
{prefixText}{' '}
{dateAt != null &&
formatDate({
isoDate: dateAt,
format: includeTime === true ? 'full' : 'date',
timezone: user?.timezone
})}
</span>
)
}
)
16 changes: 6 additions & 10 deletions packages/app/src/components/Details/ImportDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,14 @@ import {
ListDetailsItem,
ListDetails,
formatDate,
useTokenProvider
useTokenProvider,
withSkeletonTemplate
} from '@commercelayer/app-elements'
import { type CommerceLayerClient } from '@commercelayer/sdk'
import { useImportDetailsContext } from './Provider'
import { RowParentResource } from './RowParentResource'
import { StatusBadge } from './StatusBadge'

interface Props {
sdkClient: CommerceLayerClient
}

export function ImportDetails({ sdkClient }: Props): JSX.Element | null {
export const ImportDetails = withSkeletonTemplate(({ isLoading }) => {
const {
state: { data }
} = useImportDetailsContext()
Expand All @@ -25,8 +21,8 @@ export function ImportDetails({ sdkClient }: Props): JSX.Element | null {
}

return (
<ListDetails title='Details'>
<RowParentResource sdkClient={sdkClient} />
<ListDetails title='Details' isLoading={isLoading}>
<RowParentResource />
{data.status != null ? (
<ListDetailsItem label='Status'>
<StatusBadge job={data} />
Expand All @@ -52,4 +48,4 @@ export function ImportDetails({ sdkClient }: Props): JSX.Element | null {
) : null}
</ListDetails>
)
}
})
11 changes: 4 additions & 7 deletions packages/app/src/components/Details/ImportReport.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
import { type Import } from '@commercelayer/sdk'
import { ImportCount } from './ImportCount'
import { useImportDetailsContext } from './Provider'
import { Report } from '@commercelayer/app-elements'
import { Report, withSkeletonTemplate } from '@commercelayer/app-elements'

export function ImportReport(): JSX.Element | null {
export const ImportReport = withSkeletonTemplate(({ isLoading }) => {
const {
state: { data }
} = useImportDetailsContext()

if (data == null) {
return null
}

const errorJsonToDownload = getJsonLogToDownload(data, 'errors_log')

return (
<Report
isLoading={isLoading}
items={[
{
label: 'Record imported',
Expand All @@ -33,7 +30,7 @@ export function ImportReport(): JSX.Element | null {
]}
/>
)
}
})

function getSourceFileUrl(job?: Import): string | undefined {
if (
Expand Down
46 changes: 26 additions & 20 deletions packages/app/src/components/Details/ImportedResourceType.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@
import { useImportDetailsContext } from '#components/Details/Provider'
import { formatResourceName } from '@commercelayer/app-elements'
import {
formatResourceName,
withSkeletonTemplate
} from '@commercelayer/app-elements'
import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api'

interface Props extends React.HTMLAttributes<HTMLSpanElement> {}

export function ImportedResourceType(props: Props): JSX.Element | null {
const {
state: { data }
} = useImportDetailsContext()
export const ImportedResourceType = withSkeletonTemplate<Props>(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
({ isLoading, delayMs, ...props }) => {
const {
state: { data }
} = useImportDetailsContext()

if (data == null) {
return null
}
if (data == null) {
return null
}

return (
<span {...props}>
{data?.resource_type != null
? formatResourceName({
resource: data.resource_type as ListableResourceType,
count: 'plural',
format: 'title'
})
: '-'}
</span>
)
}
return (
<span {...props}>
{data?.resource_type != null
? formatResourceName({
resource: data.resource_type as ListableResourceType,
count: 'plural',
format: 'title'
})
: '-'}
</span>
)
}
)
6 changes: 3 additions & 3 deletions packages/app/src/components/Details/Provider.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { type CommerceLayerClient, type Import } from '@commercelayer/sdk'
import { type Import } from '@commercelayer/sdk'
import { type ImportDetailsContextValue } from 'App'
import {
createContext,
Expand All @@ -11,10 +11,10 @@ import {
} from 'react'
import { initialState, initialValues } from './data'
import { reducer } from './reducer'
import { useCoreSdkProvider } from '@commercelayer/app-elements'

interface ImportDetailsProviderProps {
importId: string
sdkClient: CommerceLayerClient
children: ((props: ImportDetailsContextValue) => ReactNode) | ReactNode
}

Expand All @@ -25,10 +25,10 @@ export const useImportDetailsContext = (): ImportDetailsContextValue =>
useContext(Context)

export function ImportDetailsProvider({
sdkClient,
importId,
children
}: ImportDetailsProviderProps): JSX.Element {
const { sdkClient } = useCoreSdkProvider()
const [state, dispatch] = useReducer(reducer, initialState)
const intervalId = useRef<number | null>(null)

Expand Down
16 changes: 5 additions & 11 deletions packages/app/src/components/Details/RowParentResource.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import {
ListDetailsItem,
formatResourceName
formatResourceName,
useCoreSdkProvider
} from '@commercelayer/app-elements'
import { getParentResourceIfNeeded } from '#data/resources'
import { type CommerceLayerClient } from '@commercelayer/sdk'
import { useEffect, useState } from 'react'
import { useImportDetailsContext } from './Provider'

interface Props {
sdkClient: CommerceLayerClient
}

export function RowParentResource({ sdkClient }: Props): JSX.Element | null {
export function RowParentResource(): JSX.Element | null {
const {
state: { data }
} = useImportDetailsContext()
const { sdkClient } = useCoreSdkProvider()

const [isLoading, setIsLoading] = useState(true)
const [parentResourceName, setParentResourceName] = useState('')
Expand All @@ -30,10 +27,7 @@ export function RowParentResource({ sdkClient }: Props): JSX.Element | null {
return
}

const canFetch =
sdkClient != null &&
parentResourceType != null &&
parentResourceType != null
const canFetch = parentResourceType != null && parentResourceType != null

if (canFetch) {
sdkClient[parentResourceType]
Expand Down
4 changes: 3 additions & 1 deletion packages/app/src/components/Details/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import {
type ImportDetailsContextState,
type ImportDetailsContextValue
} from 'App'
import { makeImport } from '#mocks'

export const initialState: ImportDetailsContextState = {
isLoading: true,
isPolling: false,
isDeleting: false,
isNotFound: false
isNotFound: false,
data: makeImport()
}

export const initialValues: ImportDetailsContextValue = {
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/Details/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ declare module 'App' {
}

export interface ImportDetailsContextState {
data?: Import
data: Import
isLoading: boolean
isDeleting: boolean
isPolling: boolean
Expand Down
17 changes: 17 additions & 0 deletions packages/app/src/mocks/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { Resource } from '@commercelayer/sdk/lib/cjs/resource'

export * from './resources/imports'

export const isMockedId = (id: string): boolean => {
return id.startsWith('fake-')
}

export const isMock = (resource: Resource): boolean => {
return isMockedId(resource.id)
}

export const repeat = <R>(n: number, resource: () => R): R[] => {
return Array(n)
.fill(0)
.map(() => resource())
}
19 changes: 19 additions & 0 deletions packages/app/src/mocks/resource.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { ResourceTypeLock } from '@commercelayer/sdk/lib/cjs/api'

interface GenericResource<T> {
readonly type: T
id: string
created_at: string
updated_at: string
}

export const makeResource = <T extends ResourceTypeLock>(
type: T
): GenericResource<T> => {
return {
type,
id: `fake-${Math.random()}`,
created_at: new Date().toJSON(),
updated_at: new Date().toJSON()
}
}
Loading

0 comments on commit b8d1e1c

Please sign in to comment.