fix: various react warnings

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>`

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}

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";
+import { 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;
-  }
-`;
 
 const Button = styled.button`
   display: flex;

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
+                        <ALink title="View stats" forButton>
-                          name="pieChart"
+                          <Action
-                          stroke={Colors.PieIcon}
+                            name="pieChart"
-                          strokeWidth="2.5"
+                            stroke={Colors.PieIcon}
-                          backgroundColor={Colors.PieIconBg}
+                            strokeWidth="2.5"
-                        />
+                            backgroundColor={Colors.PieIconBg}
+                          />
+                        </ALink>
                       </Link>
                     )}
                     <Action

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">

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, {
+  const [formState, { raw, password, text, label }] = useFormState<Form>(
-    withIds: true,
+    { showAdvanced: false },
-    onChange(e, stateValues, nextStateValues) {
+    {
-      if (stateValues.showAdvanced && !nextStateValues.showAdvanced) {
+      withIds: true,
-        formState.clear();
+      onChange(e, stateValues, nextStateValues) {
-        formState.setField("target", stateValues.target);
+        if (stateValues.showAdvanced && !nextStateValues.showAdvanced) {
+          formState.clear();
+          formState.setField("target", stateValues.target);
+        }
       }
     }
-  });
+  );
 
   const submitLink = async (reCaptchaToken?: string) => {
     try {

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>