diff --git a/web/lib/util/format.ts b/web/lib/util/format.ts index 9d0496b2..741200c9 100644 --- a/web/lib/util/format.ts +++ b/web/lib/util/format.ts @@ -16,3 +16,14 @@ export function formatWithCommas(amount: number) { export function formatPercent(zeroToOne: number) { return Math.round(zeroToOne * 100) + '%' } + +export function toCamelCase(words: string) { + return words + .split(' ') + .map((word) => word.trim()) + .filter((word) => word) + .map((word, index) => + index === 0 ? word : word[0].toLocaleUpperCase() + word.substring(1) + ) + .join('') +} diff --git a/web/pages/fold/[foldSlug]/edit.tsx b/web/pages/fold/[foldSlug]/edit.tsx index 30fed0ae..2a093dfd 100644 --- a/web/pages/fold/[foldSlug]/edit.tsx +++ b/web/pages/fold/[foldSlug]/edit.tsx @@ -15,6 +15,7 @@ import { } from '../../../lib/firebase/folds' import Custom404 from '../../404' import { SiteLink } from '../../../components/site-link' +import { toCamelCase } from '../../../lib/util/format' export async function getStaticProps(props: { params: { foldSlug: string } }) { const { foldSlug } = props.params @@ -36,20 +37,27 @@ export default function EditFoldPage(props: { fold: Fold | null }) { const { fold } = props const [name, setName] = useState(fold?.name ?? '') - const [tags, setTags] = useState(fold?.tags.join(', ') ?? '') + + const initialOtherTags = + fold?.tags.filter((tag) => tag !== toCamelCase(name)).join(', ') ?? '' + + const [otherTags, setOtherTags] = useState(initialOtherTags) const [isSubmitting, setIsSubmitting] = useState(false) if (!fold) return + const tags = parseWordsAsTags(toCamelCase(name) + ' ' + otherTags) + const saveDisabled = - !name || - !tags || - (name === fold.name && _.isEqual(parseWordsAsTags(tags), fold.tags)) + !name || (name === fold.name && _.isEqual(tags, fold.tags)) const onSubmit = async () => { setIsSubmitting(true) - await updateFold(fold, { name, tags: parseWordsAsTags(tags) }) + await updateFold(fold, { + name, + tags, + }) setIsSubmitting(false) } @@ -90,16 +98,13 @@ export default function EditFoldPage(props: { fold: Fold | null }) { placeholder="Politics, Economics, Rationality" className="input input-bordered resize-none" disabled={isSubmitting} - value={tags} - onChange={(e) => setTags(e.target.value || '')} + value={otherTags} + onChange={(e) => setOtherTags(e.target.value || '')} /> - `#${tag}`)} - noLink - /> + `#${tag}`)} noLink /> []) @@ -80,6 +81,11 @@ function CreateFoldButton() { const router = useRouter() + const updateName = (newName: string) => { + setName(newName) + setTags(toCamelCase(newName)) + } + const onSubmit = async () => { setIsSubmitting(true) @@ -113,8 +119,8 @@ function CreateFoldButton() { - A fold is a view of markets that match selected tags. - You can further include or exclude individual markets. + A fold is a view of markets that match one or more tags. + You can further exclude individual markets. @@ -130,13 +136,13 @@ function CreateFoldButton() { className="input input-bordered resize-none" disabled={isSubmitting} value={name} - onChange={(e) => setName(e.target.value || '')} + onChange={(e) => updateName(e.target.value || '')} /> - + {/* Tags @@ -148,13 +154,19 @@ function CreateFoldButton() { value={tags} onChange={(e) => setTags(e.target.value || '')} /> - + */} - - `#${tag}`)} - noLink - /> + {tags && ( + <> + + Primary tag + + `#${tag}`)} + noLink + /> + > + )} )