Merge pull request #32 from the-deep/feature/rank-questions

Add rank question preview
the-deep · Sep 7, 2023 · dca1d62 · dca1d62
2 parents 2d4a184 + f10ffc0
commit dca1d62
Show file tree

Hide file tree

Showing 50 changed files with 1,175 additions and 250 deletions.
diff --git a/src/App/routes.tsx b/src/App/routes.tsx
@@ -101,6 +101,18 @@ const resetPassword = myWrapRoute({
     },
 });
 
+const forgotPassword = myWrapRoute({
+    path: 'forgot-password',
+    component: {
+        render: () => import('#views/Login/ForgotPassword'),
+        props: {},
+    },
+    context: {
+        title: 'Forgot Password',
+        visibility: 'anything',
+    },
+});
+
 // FIXME: eager load this page
 const resetPasswordRedirect = myWrapRoute({
     path: '/permalink/password-reset/:uuid/:token',
@@ -162,6 +174,7 @@ export const wrappedRoutes = {
     login,
     register,
     resetPassword,
+    forgotPassword,
     resetPasswordRedirect,
     projectEdit,
     questionnaireEdit,

diff --git a/src/components/ChoiceCollectionSelectInput/index.tsx b/src/components/ChoiceCollectionSelectInput/index.tsx
@@ -1,7 +1,12 @@
 import { useMemo, useState } from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
+import {
+    isNotDefined,
+} from '@togglecorp/fujs';
 import { gql, useQuery } from '@apollo/client';
-import { SearchSelectInput } from '@the-deep/deep-ui';
+import {
+    SearchSelectInput,
+    SearchSelectInputProps,
+} from '@the-deep/deep-ui';
 
 import {
     ChoiceCollectionsQuery,
@@ -36,38 +41,40 @@ const CHOICE_COLLECTIONS = gql`
 }
 `;
 
-type ChoiceCollection = NonNullable<ChoiceCollectionsQuery['private']['projectScope']>['choiceCollections']['items'][number];
+type ChoiceCollection = Omit<NonNullable<ChoiceCollectionsQuery['private']['projectScope']>['choiceCollections']['items'][number], '__typename'>;
 
 const choiceCollectionKeySelector = (d: ChoiceCollection) => d.id;
 const choiceCollectionLabelSelector = (d: ChoiceCollection) => d.label;
 
-interface Props<T> {
+type Def = { containerClassName?: string };
+type ChoiceCollectionSelectInputProps<
+    K extends string,
+    GK extends string
+> = SearchSelectInputProps<
+    string,
+    K,
+    GK,
+    ChoiceCollection,
+    Def,
+    'onSearchValueChange' | 'searchOptions' | 'optionsPending' | 'keySelector' | 'labelSelector' | 'totalOptionsCount' | 'onShowDropdownChange'
+> & {
     projectId: string;
     questionnaireId: string | null;
-    name: T;
-    label: string;
-    onChange: (value: string | undefined, name: T) => void;
-    value: string | null | undefined;
-    error: string | undefined;
-}
+};
 
-function ChoiceCollectionSelectInput<T extends string>(props: Props<T>) {
+const PAGE_SIZE = 20;
+
+function ChoiceCollectionSelectInput<
+    K extends string,
+    GK extends string
+>(props: ChoiceCollectionSelectInputProps<K, GK>) {
     const {
         projectId,
         questionnaireId,
-        name,
-        value,
-        label,
-        onChange,
-        error,
+        ...otherProps
     } = props;
 
-    const [
-        choiceCollectionOptions,
-        setChoiceCollectionOptions,
-    ] = useState<ChoiceCollection[] | undefined | null>();
-
-    const [search, setSearch] = useState<string>();
+    const [searchText, setSearchText] = useState<string>();
     const [opened, setOpened] = useState(false);
 
     const optionsVariables = useMemo(() => {
@@ -78,12 +85,14 @@ function ChoiceCollectionSelectInput<T extends string>(props: Props<T>) {
         return ({
             projectId,
             questionnaireId,
-            search,
+            search: searchText,
+            limit: PAGE_SIZE,
+            offset: 0,
         });
     }, [
         projectId,
         questionnaireId,
-        search,
+        searchText,
     ]);
 
     const {
@@ -96,23 +105,19 @@ function ChoiceCollectionSelectInput<T extends string>(props: Props<T>) {
         skip: isNotDefined(optionsVariables) || !opened,
         variables: optionsVariables,
     });
-    const searchOption = choiceCollectionsResponse?.private.projectScope?.choiceCollections.items;
+
+    const options = choiceCollectionsResponse?.private.projectScope?.choiceCollections.items;
 
     return (
         <SearchSelectInput
-            name={name}
-            error={error}
-            disabled={choiceCollectionLoading}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...otherProps}
+            searchOptions={options}
             keySelector={choiceCollectionKeySelector}
             labelSelector={choiceCollectionLabelSelector}
-            onChange={onChange}
-            onSearchValueChange={setSearch}
-            onOptionsChange={setChoiceCollectionOptions}
-            label={label}
-            searchOptions={searchOption}
-            options={choiceCollectionOptions}
+            onSearchValueChange={setSearchText}
             onShowDropdownChange={setOpened}
-            value={value}
+            optionsPending={choiceCollectionLoading}
         />
     );
 }

diff --git a/src/components/Navbar/index.module.css b/src/components/Navbar/index.module.css
@@ -43,6 +43,10 @@
                 color: var(--dui-color-primary);
                 font-size: var(--dui-font-size-small);
                 font-weight: var(--dui-font-weight-bold);
+
+                &.active {
+                    border-color: var(--dui-color-primary);
+                }
             }
         }
 

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,6 +1,13 @@
 import { useContext, useMemo, useCallback } from 'react';
-import { NavLink, Link } from 'react-router-dom';
+import {
+    NavLink,
+    Link,
+    useLocation,
+} from 'react-router-dom';
 import { IoLogOutOutline } from 'react-icons/io5';
+import {
+    _cs,
+} from '@togglecorp/fujs';
 import { gql, useMutation } from '@apollo/client';
 import {
     DropdownMenu,
@@ -36,6 +43,8 @@ function Navbar(props: Props) {
         header,
     } = props;
 
+    const location = useLocation();
+
     const { userDetails } = useContext(UserContext);
     const alert = useAlert();
 
@@ -104,7 +113,10 @@ function Navbar(props: Props) {
             <div className={styles.right}>
                 <div className={styles.navLinks}>
                     <NavLink
-                        className={styles.navItem}
+                        className={_cs(
+                            styles.navItem,
+                            location.pathname === '/' && styles.active,
+                        )}
                         to="/"
                     >
                         My Projects
@@ -135,7 +147,6 @@ function Navbar(props: Props) {
                             Profile
                         </DropdownMenuItem>
                         <DropdownMenuItem
-                            // FIXME: Fix routes
                             className={styles.dropDownMenuItem}
                             name={undefined}
                             actions={<IoLogOutOutline />}

diff --git a/src/components/UserSelectInput/index.tsx b/src/components/UserSelectInput/index.tsx
@@ -48,10 +48,14 @@ export type User = Omit<NonNullable<NonNullable<NonNullable<NonNullable<UsersQue
 
 const keySelector = (u: User) => u.id;
 const labelSelector = (u: User) => u.displayName;
+
 const PAGE_SIZE = 20;
 
 type Def = { containerClassName?: string };
-type UserSelectInputProps<K extends string, GK extends string> = SearchSelectInputProps<
+type UserSelectInputProps<
+    K extends string,
+    GK extends string
+> = SearchSelectInputProps<
     string,
     K,
     GK,

diff --git a/src/components/questionPreviews/DateQuestionPreview/index.module.css b/src/components/questionPreviews/DateQuestionPreview/index.module.css
@@ -1,6 +1,10 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
+
+    .icon {
+        color: var(--dui-color-primary);
+        font-size: var(--dui-font-size-extra-large);
+    }
 }
diff --git a/src/components/questionPreviews/DateQuestionPreview/index.tsx b/src/components/questionPreviews/DateQuestionPreview/index.tsx
@@ -7,6 +7,7 @@ import {
 import {
     TextOutput,
     DateInput,
+    Element,
 } from '@the-deep/deep-ui';
 
 import styles from './index.module.css';
@@ -32,13 +33,18 @@ function DateQuestionPreview(props: Props) {
                 spacing="none"
                 block
             />
-            <DateInput
-                name={undefined}
-                placeholder="Select Date"
-                value={undefined}
+            <Element
                 icons={<MdOutlineCalendarMonth />}
-                readOnly
-            />
+                iconsContainerClassName={styles.icon}
+                childrenContainerClassName={styles.uploadPreview}
+            >
+                <DateInput
+                    name={undefined}
+                    placeholder="Select Date"
+                    value={undefined}
+                    readOnly
+                />
+            </Element>
         </div>
     );
 }

diff --git a/src/components/questionPreviews/FileQuestionPreview/index.module.css b/src/components/questionPreviews/FileQuestionPreview/index.module.css
@@ -1,7 +1,6 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 
     .upload-preview-wrapper {

diff --git a/src/components/questionPreviews/ImageQuestionPreview/index.module.css b/src/components/questionPreviews/ImageQuestionPreview/index.module.css
@@ -1,7 +1,6 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 
     .upload-preview-wrapper {

diff --git a/src/components/questionPreviews/IntegerQuestionPreview/index.module.css b/src/components/questionPreviews/IntegerQuestionPreview/index.module.css
@@ -1,6 +1,10 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
+
+    .icon {
+        color: var(--dui-color-primary);
+        font-size: var(--dui-font-size-extra-large);
+    }
 }
diff --git a/src/components/questionPreviews/IntegerQuestionPreview/index.tsx b/src/components/questionPreviews/IntegerQuestionPreview/index.tsx
@@ -7,6 +7,7 @@ import {
 import {
     TextOutput,
     NumberInput,
+    Element,
 } from '@the-deep/deep-ui';
 
 import styles from './index.module.css';
@@ -32,13 +33,18 @@ function IntegerQuestionPreview(props: Props) {
                 spacing="none"
                 block
             />
-            <NumberInput
-                name={undefined}
-                placeholder="Enter integer"
-                value={undefined}
+            <Element
                 icons={<MdOutline123 />}
-                readOnly
-            />
+                iconsContainerClassName={styles.icon}
+                childrenContainerClassName={styles.uploadPreview}
+            >
+                <NumberInput
+                    name={undefined}
+                    placeholder="Enter integer"
+                    value={undefined}
+                    readOnly
+                />
+            </Element>
         </div>
     );
 }

diff --git a/src/components/questionPreviews/NoteQuestionPreview/index.module.css b/src/components/questionPreviews/NoteQuestionPreview/index.module.css
@@ -1,6 +1,10 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
+
+    .icon {
+        color: var(--dui-color-primary);
+        font-size: var(--dui-font-size-extra-large);
+    }
 }
diff --git a/src/components/questionPreviews/NoteQuestionPreview/index.tsx b/src/components/questionPreviews/NoteQuestionPreview/index.tsx
@@ -1,12 +1,12 @@
 import {
-    MdOutlineAbc,
+    MdOutlineEditNote,
 } from 'react-icons/md';
 import {
     _cs,
 } from '@togglecorp/fujs';
 import {
+    Element,
     TextOutput,
-    TextInput,
 } from '@the-deep/deep-ui';
 
 import styles from './index.module.css';
@@ -24,18 +24,17 @@ function NoteQuestionPreview(props: Props) {
 
     return (
         <div className={_cs(styles.preview, className)}>
-            <TextOutput
-                value={label ?? 'This is a note. This field cannot return any response.'}
-                spacing="none"
-                block
-            />
-            <TextInput
-                name={undefined}
-                placeholder="Enter note"
-                value={undefined}
-                icons={<MdOutlineAbc />}
-                readOnly
-            />
+            <Element
+                icons={<MdOutlineEditNote />}
+                iconsContainerClassName={styles.icon}
+                childrenContainerClassName={styles.uploadPreview}
+            >
+                <TextOutput
+                    value={label ?? 'This is a note. This field cannot return any response.'}
+                    spacing="none"
+                    block
+                />
+            </Element>
         </div>
     );
 }

diff --git a/src/components/questionPreviews/RankQuestionPreview/RankQuestionItem/index.module.css b/src/components/questionPreviews/RankQuestionPreview/RankQuestionItem/index.module.css
@@ -0,0 +1,13 @@
+.item-wrapper {
+    display: flex;
+    border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+    border-radius: var(--dui-border-radius-card);
+
+    .icon {
+        background-color: var(--color-gray2);
+        padding: var(--dui-spacing-small);
+    }
+    .item {
+        padding: var(--dui-spacing-small);
+    }
+}