@@ -0,0 +1,65 @@
1+import React, { useCallback, useEffect, useState } from 'react';
2+import { FormProvider, useForm } from 'react-hook-form';
3+import { Link } from 'react-router-dom';
4+import { PostOptions } from '../components/PostOptions';
5+import { useGroups } from '../state/groups';
6+import { PostOption, PostOptionsForm } from '../types/sphinx';
7+
8+export const Groups = () => {
9+ const groups = useGroups();
10+ const [firstLoad, setFirstLoad] = useState(true);
11+ const form = useForm<PostOptionsForm>({
12+ defaultValues: {
13+ options: []
14+ }
15+ });
16+ const { handleSubmit, reset, watch, setValue } = form;
17+ const options = watch('options');
18+
19+ useEffect(() => {
20+ if (groups.length > 0 && firstLoad) {
21+ reset({
22+ options: []
23+ })
24+
25+ setFirstLoad(false);
26+ }
27+ }, [groups, firstLoad]);
28+
29+ const toggleAll = useCallback(() => {
30+ if (options.length !== groups.length) {
31+ setValue('options', groups.map(g => g.key));
32+ } else {
33+ setValue('options', []);
34+ }
35+ }, [groups, options, setValue]);
36+
37+ const onSubmit = useCallback(() => {
38+ reset();
39+ }, [reset]);
40+
41+ return (
42+ <>
43+ <header className='flex items-center'>
44+ <h1 className='text-2xl font-semibold'>Add Groups</h1>
45+ <button className='p-2 ml-auto text-sm underline font-semibold' onClick={toggleAll}>
46+ {options.length !== groups.length && 'select all'}
47+ {options.length === groups.length && 'deselect all'}
48+ </button>
49+ </header>
50+ <FormProvider {...form}>
51+ <form onSubmit={handleSubmit(onSubmit)}>
52+ <PostOptions options={groups} emptyMessage="No groups found" />
53+ <div className='flex justify-between border-t border-zinc-300 py-3 mt-6'>
54+ <Link to="/search" className='flex items-center rounded-lg text-base font-semibold text-rosy bg-rosy/30 border-2 border-transparent hover:border-rosy leading-none py-2 px-3 transition-colors'>
55+ Back to Search
56+ </Link>
57+ <button type="submit" className='flex items-center rounded-lg text-base font-semibold text-linen bg-rosy disabled:bg-zinc-200 disabled:text-zinc-400 disabled:border-transparent border-2 border-transparent hover:border-linen/60 leading-none py-2 px-3 transition-colors' disabled={options.length === 0}>
58+ Publish
59+ </button>
60+ </div>
61+ </form>
62+ </FormProvider>
63+ </>
64+ );
65+}