Conversation
|
Summary Layout |
libs/pages/home/src/lib/home.tsx
Outdated
| import { useContext } from 'react'; | ||
| import { YadomsConnectionContext, YadomsConnection } from '@yadoms/shared'; | ||
| import YButton from './widgets/YButton'; | ||
| // import YButton from './widgets/YButton'; |
libs/pages/home/src/lib/home.tsx
Outdated
| <h1>Welcome to PagesHome!</h1> | ||
| <p>Socket is {connected ? 'connected' : 'DISCONNECTED'}</p> | ||
| <p>Server current time is {serverCurrentTime?.toString()}</p> | ||
| {/* |
|
|
||
|
|
||
|
|
| Window: {color: "#4057dc", size:40}, | ||
| Linux:{color: "#6f706e", size:40}, | ||
| MacOs:{color: "#000000", size:40}, | ||
| DefaultOs:{color: "#6e6e70", size:40}, | ||
| SqLite:{color: "#66b2fc", size:40}, | ||
| Postgres:{color: "#3177ff", size:40}, | ||
| Database:{color: "#f14809", size:40}, | ||
| DatabaseVersion: {color: "#cec483", size:40}, | ||
| Power: {color: "#00ff28" ,size:40}, | ||
| Version: {color: "#873be1", size:40}, | ||
| Size: {color: "#e52121", size:40}, | ||
| SQL: {color: "#0048fd", size:40}, |
There was a problem hiding this comment.
could u extract color values into an enum or named colored ( we could use them on other components)
| export function isVersion(version: string) : boolean { | ||
| return semver.valid(version) != null; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| function formatDate(isoDate: string | undefined): string { | ||
| const {i18n } = useTranslation(); | ||
| const locale = i18n.language; | ||
| if (!isoDate) { | ||
| return ''; | ||
| } | ||
|
|
||
| const year = parseInt(isoDate.slice(0, 4), 10); | ||
| const month = parseInt(isoDate.slice(4, 6), 10) - 1; | ||
| const day = parseInt(isoDate.slice(6, 8), 10); | ||
| const hour = parseInt(isoDate.slice(9, 11), 10); | ||
| const minute = parseInt(isoDate.slice(11, 13), 10); | ||
| const second = parseInt(isoDate.slice(13, 15), 10); | ||
| const millisecond = Math.round(parseFloat("0." + isoDate.split('.')[1]) * 1000); | ||
|
|
||
| const date = new Date(year, month, day, hour, minute, second, millisecond); | ||
|
|
||
| const options: Intl.DateTimeFormatOptions = { | ||
| weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', | ||
| hour: 'numeric', minute: 'numeric', second: 'numeric', | ||
| }; | ||
|
|
||
| return date.toLocaleDateString(locale, options); | ||
|
|
||
| } |
There was a problem hiding this comment.
could u please move formatDate and isVersion to shared lib
|
|
||
| } | ||
|
|
||
| export function Card({ icon, label, content, color, isLoading, children }: { |
There was a problem hiding this comment.
could u extract this component to another component and create a props object for it's input
| {isLoading ? ( | ||
| <Skeleton height={20} mt="md" width="80%" radius="sm" /> | ||
| ) : isVersion(content) ? ( | ||
| <Badge color="pink" variant="light" mt={10}> |
There was a problem hiding this comment.
All data comes from one Ip and calls onces could create a specific skeleton for all card and move this logic of displaying the loader into the parent caller
| </Badge> | ||
| ) : ( | ||
| <Text size={{ base: 'xs', sm: 'lg' }}> | ||
| {Number.isInteger(content) ? `${content} Octets` : content} |
There was a problem hiding this comment.
u could create a const that is doing this logic
| ); | ||
| } | ||
|
|
||
| export function FeaturesGrid({ systemInformations, children, isLoading }: { systemInformations: SystemInformation[], children: ReactNode, isLoading:boolean }) { |
There was a problem hiding this comment.
could be also extract and a children component and use props object
| const getPlatformIcon = (platform: string | undefined) => { | ||
| if (!platform) return <SystemIcon size={customization.DefaultOs.size} color={customization.DefaultOs.color} />;; | ||
|
|
||
| if (platform.startsWith('Windows')) { |
There was a problem hiding this comment.
you could use also else if in here
| return <LinuxLogo size={customization.Linux.size} color={customization.Linux.color} />; | ||
| } else if (platform.startsWith('MacOs')) { | ||
| return <MacOSLogo size={customization.MacOs.size} color={customization.MacOs.color} />; | ||
| } else { |
| switch (engine) { | ||
| case 'SQLite': | ||
| return <SQLiteLogo size={customization.SqLite.size} color={customization.SqLite.color} />; | ||
| case 'Postgres': | ||
| return <PostgreSQLLogo size={customization.Postgres.size} color={customization.Postgres.color} />; | ||
| default: | ||
| return <SQLIcon size={customization.SQL.size} color={customization.SQL.color}/>; | ||
| } |
There was a problem hiding this comment.
did u fortget the operator break ?
No description provided.