diff options
author | poeti8 <ezzati.upt@gmail.com> | 2020-01-03 18:21:27 +0300 |
---|---|---|
committer | poeti8 <ezzati.upt@gmail.com> | 2020-01-03 18:23:52 +0300 |
commit | 535314b634600b4218cf6cd37274c3d09031c014 (patch) | |
tree | 366c892bbd401a5caa3abcc8f19f7e0c7e1f6823 /client | |
parent | 998cdd1e655b8f4f18e136653891fa500ed1a1c3 (diff) |
fix: various react warnings
Diffstat (limited to 'client')
-rw-r--r-- | client/components/Button.tsx | 1 | ||||
-rw-r--r-- | client/components/Checkbox.tsx | 6 | ||||
-rw-r--r-- | client/components/Extensions.tsx | 19 | ||||
-rw-r--r-- | client/components/LinksTable.tsx | 16 | ||||
-rw-r--r-- | client/components/Settings/SettingsDomain.tsx | 2 | ||||
-rw-r--r-- | client/components/Shortener.tsx | 18 | ||||
-rw-r--r-- | client/pages/stats.tsx | 1 |
7 files changed, 27 insertions, 36 deletions
diff --git a/client/components/Button.tsx b/client/components/Button.tsx index 665e930..b76b847 100644 --- a/client/components/Button.tsx +++ b/client/components/Button.tsx @@ -132,6 +132,7 @@ interface NavButtonProps extends BoxProps { disabled?: boolean; onClick?: any; // TODO: better typing type?: "button" | "submit" | "reset"; + key?: string; } export const NavButton = styled(Flex)<NavButtonProps>` diff --git a/client/components/Checkbox.tsx b/client/components/Checkbox.tsx index 0850754..355777a 100644 --- a/client/components/Checkbox.tsx +++ b/client/components/Checkbox.tsx @@ -3,12 +3,13 @@ import styled, { css } from "styled-components"; import { ifProp } from "styled-tools"; import { Flex, BoxProps } from "reflexbox/styled-components"; -import Text, { Span } from "./Text"; +import { Span } from "./Text"; interface InputProps { checked: boolean; id?: string; name: string; + onChange: any; } const Input = styled(Flex).attrs({ @@ -70,6 +71,7 @@ const Checkbox: FC<Props> = ({ label, name, width, + onChange, ...rest }) => { return ( @@ -80,7 +82,7 @@ const Checkbox: FC<Props> = ({ style={{ cursor: "pointer" }} {...(rest as any)} > - <Input name={name} id={id} checked={checked} /> + <Input onChange={onChange} name={name} id={id} checked={checked} /> <Box checked={checked} width={width} height={height} /> <Span ml={12} color="#555"> {label} diff --git a/client/components/Extensions.tsx b/client/components/Extensions.tsx index 89edd39..eaf522e 100644 --- a/client/components/Extensions.tsx +++ b/client/components/Extensions.tsx @@ -4,24 +4,7 @@ import { Flex } from "reflexbox/styled-components"; import SVG from "react-inlinesvg"; // TODO: another solution import { Colors } from "../consts"; import { ColCenterH } from "./Layout"; -import Text, { H3 } from "./Text"; - -const Title = styled.h3` - font-size: 28px; - font-weight: 300; - margin: 0 0 60px; - color: #f5f5f5; - - @media only screen and (max-width: 768px) { - font-size: 24px; - margin-bottom: 56px; - } - - @media only screen and (max-width: 448px) { - font-size: 20px; - margin-bottom: 40px; - } -`; +import { H3 } from "./Text"; const Button = styled.button` display: flex; diff --git a/client/components/LinksTable.tsx b/client/components/LinksTable.tsx index 6b34f2c..7d88272 100644 --- a/client/components/LinksTable.tsx +++ b/client/components/LinksTable.tsx @@ -225,7 +225,7 @@ const LinksTable: FC = () => { ) : ( <> {links.items.map((l, index) => ( - <Tr> + <Tr key={`link-${index}`}> <Td {...ogLinkFlex} withFade> <ALink href={l.target}>{l.target}</ALink> </Td> @@ -293,12 +293,14 @@ const LinksTable: FC = () => { l.domain ? `&domain=${l.domain}` : "" }`} > - <Action - name="pieChart" - stroke={Colors.PieIcon} - strokeWidth="2.5" - backgroundColor={Colors.PieIconBg} - /> + <ALink title="View stats" forButton> + <Action + name="pieChart" + stroke={Colors.PieIcon} + strokeWidth="2.5" + backgroundColor={Colors.PieIconBg} + /> + </ALink> </Link> )} <Action diff --git a/client/components/Settings/SettingsDomain.tsx b/client/components/Settings/SettingsDomain.tsx index bb3d518..6880b36 100644 --- a/client/components/Settings/SettingsDomain.tsx +++ b/client/components/Settings/SettingsDomain.tsx @@ -89,7 +89,7 @@ const SettingsDomain: FC = () => { </thead> <tbody> {domains.map(d => ( - <tr> + <tr key={d.customDomain}> <Td width={2 / 5}>{d.customDomain}</Td> <Td width={2 / 5}>{d.homepage || "default"}</Td> <Td width={1 / 5} justifyContent="center"> diff --git a/client/components/Shortener.tsx b/client/components/Shortener.tsx index 9b0e4ab..f73840a 100644 --- a/client/components/Shortener.tsx +++ b/client/components/Shortener.tsx @@ -61,17 +61,19 @@ const Shortener = () => { const [link, setLink] = useState<Link | null>(null); const [message, setMessage] = useMessage(3000); const [loading, setLoading] = useState(false); - const [qrModal, setQRModal] = useState(false); const [copied, setCopied] = useState(false); - const [formState, { raw, password, text, label }] = useFormState<Form>(null, { - withIds: true, - onChange(e, stateValues, nextStateValues) { - if (stateValues.showAdvanced && !nextStateValues.showAdvanced) { - formState.clear(); - formState.setField("target", stateValues.target); + const [formState, { raw, password, text, label }] = useFormState<Form>( + { showAdvanced: false }, + { + withIds: true, + onChange(e, stateValues, nextStateValues) { + if (stateValues.showAdvanced && !nextStateValues.showAdvanced) { + formState.clear(); + formState.setField("target", stateValues.target); + } } } - }); + ); const submitLink = async (reCaptchaToken?: string) => { try { diff --git a/client/pages/stats.tsx b/client/pages/stats.tsx index b229ff4..4b5fdec 100644 --- a/client/pages/stats.tsx +++ b/client/pages/stats.tsx @@ -116,6 +116,7 @@ const StatsPage: NextPage<Props> = ({ domain, id }) => { ml={10} disabled={p === period} onClick={() => setPeriod(p as any)} + key={p} > {n} </NavButton> |