feat: add create/edit link form + controller methods

inertia/components/common/form/_button.tsx

@@ -14,7 +14,7 @@ const Button = styled.button(({ theme }) => ({
 
   '&:disabled': {
     cursor: 'not-allowed',
-    opacity: '0.75',
+    opacity: '0.5',
   },
 
   '&:not(:disabled):hover': {

inertia/components/common/form/_form.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 const Form = styled.form({
   width: '100%',
   display: 'flex',
-  gap: '0.5em',
+  gap: '1em',
   flexDirection: 'column',
 });
 

inertia/components/common/form/_form_field_error.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+// TODO: create a global style variable (fontSize)
+const FormFieldError = styled.p(({ theme }) => ({
+  fontSize: '12px',
+  color: theme.colors.lightRed,
+}));
+
+export default FormFieldError;

inertia/components/common/form/checkbox.tsx

@@ -0,0 +1,55 @@
+import { ChangeEvent, Fragment, InputHTMLAttributes, useState } from 'react';
+import Toggle from 'react-toggle';
+import FormField from '~/components/common/form/_form_field';
+import FormFieldError from '~/components/common/form/_form_field_error';
+
+interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  label: string;
+  name: string;
+  checked: boolean;
+  errors?: string[];
+  onChange?: (name: string, checked: boolean) => void;
+}
+
+export default function Checkbox({
+  name,
+  label,
+  checked = false,
+  errors = [],
+  onChange,
+  required = false,
+  ...props
+}: InputProps): JSX.Element {
+  const [checkboxChecked, setCheckboxChecked] = useState<boolean>(checked);
+
+  if (typeof window === 'undefined') return <Fragment />;
+
+  function _onChange({ target }: ChangeEvent<HTMLInputElement>) {
+    setCheckboxChecked(target.checked);
+    if (onChange) {
+      onChange(target.name, target.checked);
+    }
+  }
+
+  return (
+    <FormField
+      css={{ alignItems: 'center', gap: '1em', flexDirection: 'row' }}
+      required={required}
+    >
+      <label htmlFor={name} title={label}>
+        {label}
+      </label>
+      <Toggle
+        {...props}
+        onChange={_onChange}
+        checked={checkboxChecked}
+        placeholder={props.placeholder ?? 'Type something...'}
+        name={name}
+        id={name}
+      />
+      {errors.length > 0 &&
+        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
+    </FormField>
+  );
+}

inertia/components/common/form/textbox.tsx

@@ -1,14 +1,8 @@
-import styled from '@emotion/styled';
 import { ChangeEvent, InputHTMLAttributes, useState } from 'react';
 import FormField from '~/components/common/form/_form_field';
+import FormFieldError from '~/components/common/form/_form_field_error';
 import Input from '~/components/common/form/_input';
 
-// TODO: create a global style variable (fontSize)
-const InputLegend = styled.p(({ theme }) => ({
-  fontSize: '12px',
-  color: theme.colors.lightRed,
-}));
-
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   label: string;
@@ -49,7 +43,7 @@ export default function TextBox({
         placeholder={props.placeholder ?? 'Type something...'}
       />
       {errors.length > 0 &&
-        errors.map((error) => <InputLegend>{error}</InputLegend>)}
+        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
     </FormField>
   );
 }

inertia/components/common/modal/_modal_container.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
+import TransitionLayout from '~/components/layouts/_transition_layout';
 
-const ModalContainer = styled.div(({ theme }) => ({
+const ModalContainer = styled(TransitionLayout)(({ theme }) => ({
   minWidth: '500px',
   background: theme.colors.secondary,
   padding: '1em',

inertia/components/common/modal/_modal_wrapper.tsx

@@ -13,6 +13,7 @@ const ModalWrapper = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column',
+  transition: theme.transition.delay,
 }));
 
 export default ModalWrapper;

inertia/components/dashboard/link/link_controls.tsx

@@ -13,8 +13,9 @@ import {
   DropdownItemButton,
   DropdownItemLink,
 } from '~/components/common/dropdown/dropdown_item';
+import useActiveCollection from '~/hooks/use_active_collection';
 import useCollections from '~/hooks/use_collections';
-import { appendCollectionId } from '~/lib/navigation';
+import { appendLinkId } from '~/lib/navigation';
 import { makeRequest } from '~/lib/request';
 
 const StartItem = styled(DropdownItemButton)(({ theme }) => ({
@@ -25,6 +26,7 @@ export default function LinkControls({ link }: { link: Link }) {
   const theme = useTheme();
   const { t } = useTranslation('common');
   const { collections, setCollections } = useCollections();
+  const { setActiveCollection } = useActiveCollection();
 
   const toggleFavorite = useCallback(
     (linkId: Link['id']) => {
@@ -45,22 +47,20 @@ export default function LinkControls({ link }: { link: Link }) {
       };
 
       setCollections(collectionsCopy);
+      setActiveCollection(collectionsCopy[collectionIndex]);
     },
     [collections, setCollections]
   );
 
   const onFavorite = () => {
-    const editRoute = route('link.edit', {
+    const { url, method } = route('link.toggle-favorite', {
       params: { id: link.id },
     });
     makeRequest({
-      url: editRoute.url,
-      method: editRoute.method,
+      url,
+      method,
       body: {
-        name: link.name,
-        url: link.url,
         favorite: !link.favorite,
-        collectionId: link.collectionId,
       },
     })
       .then(() => toggleFavorite(link.id))
@@ -85,18 +85,12 @@ export default function LinkControls({ link }: { link: Link }) {
         )}
       </StartItem>
       <DropdownItemLink
-        href={appendCollectionId(
-          route('link.edit-form').url,
-          link.collectionId
-        )}
+        href={appendLinkId(route('link.edit-form').url, link.id)}
       >
         <GoPencil /> {t('link.edit')}
       </DropdownItemLink>
       <DropdownItemLink
-        href={appendCollectionId(
-          route('link.delete-form').url,
-          link.collectionId
-        )}
+        href={appendLinkId(route('link.delete-form').url, link.id)}
         danger
       >
         <IoTrashOutline /> {t('link.delete')}

inertia/components/dashboard/link/link_item.tsx

@@ -2,8 +2,8 @@ import type Link from '#models/link';
 import styled from '@emotion/styled';
 import { AiFillStar } from 'react-icons/ai';
 import ExternalLink from '~/components/common/external_link';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import LinkControls from '~/components/dashboard/link/link_controls';
+import LinkFavicon from '~/components/dashboard/link/link_favicon';
 
 const LinkWrapper = styled.li(({ theme }) => ({
   userSelect: 'none',

inertia/components/form/form_collection.tsx

@@ -1,10 +1,10 @@
-import { ChangeEvent, FormEvent } from 'react';
-import FormField from '~/components/common/form/_form_field';
+import { FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import Checkbox from '~/components/common/form/checkbox';
 import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
 import FormLayout from '~/components/layouts/form_layout';
 import { Visibility } from '../../../app/enums/visibility';
-import { useTranslation } from 'react-i18next';
 
 export type FormCollectionData = {
   name: string;
@@ -12,6 +12,17 @@ export type FormCollectionData = {
   visibility: Visibility;
 };
 
+interface FormCollectionProps {
+  title: string;
+  canSubmit: boolean;
+  disableHomeLink?: boolean;
+  data: FormCollectionData;
+  errors?: Record<string, Array<string>>;
+
+  setData: (name: string, value: any) => void;
+  handleSubmit: () => void;
+}
+
 export default function FormCollection({
   title,
   canSubmit,
@@ -21,22 +32,10 @@ export default function FormCollection({
 
   setData,
   handleSubmit,
-}: {
-  title: string;
-  canSubmit: boolean;
-  disableHomeLink?: boolean;
-  data: FormCollectionData;
-  errors?: Record<string, Array<string>>;
-
-  setData: (name: string, value: string) => void;
-  handleSubmit: () => void;
-}) {
+}: FormCollectionProps) {
   const { t } = useTranslation('common');
-  const handleOnCheck = ({ target }: ChangeEvent<HTMLInputElement>) =>
-    setData(
-      'visibility',
-      target.checked ? Visibility.PUBLIC : Visibility.PRIVATE
-    );
+  const handleOnCheck: FormCollectionProps['setData'] = (name, value) =>
+    setData(name, value ? Visibility.PUBLIC : Visibility.PRIVATE);
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -62,22 +61,19 @@ export default function FormCollection({
           autoFocus
         />
         <TextBox
-          label={t('collection.name')}
-          placeholder={t('collection.name')}
+          label={t('collection.description')}
+          placeholder={t('collection.description')}
           name="description"
           onChange={setData}
           value={data.description ?? undefined}
           errors={errors?.description}
         />
-        <FormField>
-          <label htmlFor="visibility">Public</label>
-          <input
-            type="checkbox"
-            onChange={handleOnCheck}
-            checked={data.visibility === Visibility.PUBLIC}
-            id="visibility"
-          />
-        </FormField>
+        <Checkbox
+          label="Public"
+          name="visibility"
+          onChange={handleOnCheck}
+          checked={data.visibility === Visibility.PUBLIC}
+        />
       </BackToDashboard>
     </FormLayout>
   );

inertia/components/form/form_link.tsx

@@ -0,0 +1,105 @@
+import type Collection from '#models/collection';
+import { FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import Checkbox from '~/components/common/form/checkbox';
+import TextBox from '~/components/common/form/textbox';
+import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
+import FormLayout from '~/components/layouts/form_layout';
+import useSearchParam from '~/hooks/use_search_param';
+
+export type FormLinkData = {
+  name: string;
+  description: string | null;
+  url: string;
+  favorite: boolean;
+  collectionId: Collection['id'];
+};
+
+interface FormLinkProps {
+  title: string;
+  canSubmit: boolean;
+  disableHomeLink?: boolean;
+  data: FormLinkData;
+  errors?: Record<string, Array<string>>;
+  collections: Collection[];
+
+  setData: (name: string, value: any) => void;
+  handleSubmit: () => void;
+}
+
+export default function FormLink({
+  title,
+  canSubmit,
+  disableHomeLink,
+  data,
+  errors,
+  collections,
+
+  setData,
+  handleSubmit,
+}: FormLinkProps) {
+  const { t } = useTranslation('common');
+  const collectionId = useSearchParam('collectionId') ?? collections[0].id;
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    handleSubmit();
+  };
+
+  return (
+    <FormLayout
+      title={title}
+      handleSubmit={onSubmit}
+      canSubmit={canSubmit}
+      disableHomeLink={disableHomeLink}
+      collectionId={collectionId}
+    >
+      <BackToDashboard>
+        <TextBox
+          label={t('link.name')}
+          placeholder={t('link.name')}
+          name="name"
+          onChange={setData}
+          value={data.name}
+          errors={errors?.name}
+          required
+          autoFocus
+        />
+        <TextBox
+          label={t('link.link')}
+          placeholder={t('link.link')}
+          name="url"
+          onChange={setData}
+          value={data.url}
+          errors={errors?.url}
+          required
+        />
+        <TextBox
+          label={t('link.description')}
+          placeholder={t('link.description')}
+          name="description"
+          onChange={setData}
+          value={data.description ?? undefined}
+          errors={errors?.description}
+        />
+        <select
+          onChange={({ target }) => setData('collectionId', target.value)}
+          defaultValue={data.collectionId}
+        >
+          {collections.map((collection) => (
+            <option key={collection.id} value={collection.id}>
+              {collection.name}
+            </option>
+          ))}
+        </select>
+        <Checkbox
+          label={t('favorite')}
+          name="favorite"
+          onChange={setData}
+          checked={data.favorite}
+          errors={errors?.favorite}
+        />
+      </BackToDashboard>
+    </FormLayout>
+  );
+}

inertia/components/lang_selector.tsx

@@ -21,7 +21,9 @@ export default function LangSelector() {
       defaultValue={i18n.language}
     >
       {languages.map((lang) => (
-        <option value={lang}>{t(`language.${lang}`)}</option>
+        <option value={lang} key={lang}>
+          {t(`language.${lang}`)}
+        </option>
       ))}
     </select>
   );