Project scenarios filters

app/hooks/features/index.ts

@@ -68,6 +68,7 @@ export function useAllFeatures(projectId, options: UseFeaturesOptionsProps = {})
   });
 
   const query = useInfiniteQuery(['all-features', projectId, JSON.stringify(options)], fetchFeatures, {
+    retry: false,
     placeholderData: placeholderDataRef.current,
     getNextPageParam: (lastPage) => {
       const { data: { meta } } = lastPage;
@@ -78,10 +79,10 @@ export function useAllFeatures(projectId, options: UseFeaturesOptionsProps = {})
     },
   });
 
-  const { data } = query;
+  const { data, error } = query;
   const { pages } = data || {};
 
-  if (data) {
+  if (data || error) {
     placeholderDataRef.current = data;
   }
 

app/hooks/gap-analysis/index.ts

@@ -56,6 +56,7 @@ export function useGapAnalysis(projectId, options: UseFeaturesOptionsProps = {})
   });
 
   const query = useInfiniteQuery(['gap-analysis', projectId, JSON.stringify(options)], fetchFeatures, {
+    retry: false,
     placeholderData: placeholderDataRef.current,
     getNextPageParam: (lastPage) => {
       const { data: { meta } } = lastPage;
@@ -66,10 +67,10 @@ export function useGapAnalysis(projectId, options: UseFeaturesOptionsProps = {})
     },
   });
 
-  const { data } = query;
+  const { data, error } = query;
   const { pages } = data || {};
 
-  if (data) {
+  if (data || error) {
     placeholderDataRef.current = data;
   }
 

app/hooks/organizations/index.ts

@@ -56,6 +56,7 @@ export function useOrganizations(options: UseOrganizationsOptionsProps = {}) {
   });
 
   const query = useInfiniteQuery(['organizations', JSON.stringify(options)], fetchOrganizations, {
+    retry: false,
     placeholderData: placeholderDataRef.current,
     getNextPageParam: (lastPage) => {
       const { data: { meta } } = lastPage;
@@ -66,10 +67,10 @@ export function useOrganizations(options: UseOrganizationsOptionsProps = {}) {
     },
   });
 
-  const { data } = query;
+  const { data, error } = query;
   const { pages } = data || {};
 
-  if (data) {
+  if (data || error) {
     placeholderDataRef.current = data;
   }
 

app/hooks/scenarios/index.ts

@@ -40,7 +40,7 @@ export function useScenarios(pId, options: UseScenariosOptionsProps = {}) {
     .reduce((acc, k) => {
       return {
         ...acc,
-        [`filter[${k}]`]: filters[k],
+        [`filter[${k}]`]: filters[k].toString(),
       };
     }, {});
 
@@ -63,6 +63,7 @@ export function useScenarios(pId, options: UseScenariosOptionsProps = {}) {
   });
 
   const query = useInfiniteQuery(['scenarios', pId, JSON.stringify(options)], fetchScenarios, {
+    retry: false,
     placeholderData: placeholderDataRef.current,
     getNextPageParam: (lastPage) => {
       const { data: { meta } } = lastPage;
@@ -73,10 +74,10 @@ export function useScenarios(pId, options: UseScenariosOptionsProps = {}) {
     },
   });
 
-  const { data } = query;
+  const { data, error } = query;
   const { pages } = data || {};
 
-  if (data) {
+  if (data || error) {
     placeholderDataRef.current = data;
   }
 

app/layout/projects/show/scenarios/component.tsx

@@ -33,7 +33,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
   const [modal, setModal] = useState(false);
   const [deleteScenario, setDelete] = useState(null);
 
-  const { search } = useSelector((state) => state['/projects/[id]']);
+  const { search, filters, sort } = useSelector((state) => state['/projects/[id]']);
 
   const { query } = useRouter();
   const { pid } = query;
@@ -63,8 +63,9 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
     search,
     filters: {
       projectId: pid,
+      ...filters,
     },
-    sort: '-lastModifiedAt',
+    sort,
   });
 
   const scrollRef = useBottomScrollListener(
@@ -150,7 +151,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
 
             <Loading
               visible={allScenariosIsFetching && !allScenariosIsFetched}
-              className="absolute top-0 bottom-0 left-0 right-0 z-40 flex items-center justify-center w-full h-full bg-gray-700 bg-opacity-90"
+              className="absolute top-0 bottom-0 left-0 right-0 z-40 flex items-center justify-center w-full h-full bg-black bg-opacity-90"
               iconClassName="w-10 h-10 text-primary-500"
             />
 
@@ -167,7 +168,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
             <div className="relative overflow-hidden">
               <div className="absolute top-0 left-0 z-10 w-full h-6 bg-gradient-to-b from-black via-black" />
               <div ref={scrollRef} className="relative z-0 flex flex-col flex-grow h-full py-6 overflow-x-hidden overflow-y-auto">
-                {allScenariosData.map((s, i) => {
+                {!!allScenariosData.length && allScenariosData.map((s, i) => {
                   return (
                     <ScenarioItem
                       key={`${s.id}`}
@@ -183,6 +184,12 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
                     />
                   );
                 })}
+
+                {!allScenariosData.length && (
+                  <div>
+                    No results found
+                  </div>
+                )}
               </div>
               <div className="absolute bottom-0 left-0 z-10 w-full h-6 bg-gradient-to-t from-black via-black" />
               <div

app/layout/projects/show/scenarios/filters/component.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { Form as FormRFF, Field as FieldRFF } from 'react-final-form';
+import Button from 'components/button';
+import Checkbox from 'components/forms/checkbox';
+import Label from 'components/forms/label';
+import Radio from 'components/forms/radio';
+
+export interface ProjectScenariosFiltersProps {
+  filters?: Record<string, any>;
+  onChangeFilters: (filters: Record<string, any>) => void;
+  sort?: string;
+  onChangeSort: (sort: string) => void;
+  onDismiss?: () => void;
+}
+
+const STATUS = [
+  { id: 'created', label: 'created' },
+  { id: 'running', label: 'running' },
+  { id: 'completed', label: 'completed' },
+];
+
+const SORT = [
+  { id: '-lastModifiedAt', label: 'Most recent' },
+  { id: 'lastModifiedAt', label: 'First created' },
+  { id: 'name', label: 'Name' },
+  { id: '-name', label: '-Name' },
+];
+
+export const ProjectScenariosFilters: React.FC<ProjectScenariosFiltersProps> = ({
+  filters = {},
+  onChangeFilters,
+  sort,
+  onChangeSort,
+  onDismiss,
+}: ProjectScenariosFiltersProps) => {
+  const INITIAL_VALUES = useMemo(() => {
+    return {
+      ...filters,
+      sort: sort || SORT[0].id,
+    };
+  }, [filters, sort]);
+
+  // Callbacks
+  const onSubmit = useCallback((values) => {
+    const { sort: valuesSort, ...valuesFilters } = values;
+    onChangeFilters(valuesFilters);
+    onChangeSort(valuesSort);
+    if (onDismiss) onDismiss();
+  }, [onChangeFilters, onChangeSort, onDismiss]);
+
+  const onClear = useCallback(() => {
+    onChangeFilters({});
+    onChangeSort(null);
+    if (onDismiss) onDismiss();
+  }, [onChangeFilters, onChangeSort, onDismiss]);
+
+  return (
+    <FormRFF
+      key="features-all-filters"
+      onSubmit={onSubmit}
+      initialValues={INITIAL_VALUES}
+    >
+      {({ handleSubmit }) => (
+        <form onSubmit={handleSubmit} autoComplete="off" className="flex flex-col flex-grow overflow-hidden text-black">
+          <h2 className="pl-8 mb-5 text-lg pr-28 font-heading">Filters</h2>
+
+          <div className="flex flex-col px-8 space-y-5">
+            <div>
+              <h3 className="flex-shrink-0 mb-2 text-sm pr-28 font-heading">Filter by type</h3>
+              <div className="flex flex-col space-y-2">
+                {STATUS.map(({ id, label }) => {
+                  return (
+                    <FieldRFF
+                      key={id}
+                      name="status"
+                      type="checkbox"
+                      value={id}
+                    >
+                      {(fprops) => (
+                        <div className="flex space-x-2">
+                          <Checkbox theme="light" id={`status-${id}`} {...fprops.input} />
+                          <Label theme="light" id={`status-${id}`} className="ml-2">{label}</Label>
+                        </div>
+                      )}
+                    </FieldRFF>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div>
+              <h3 className="flex-shrink-0 mb-2 text-sm pr-28 font-heading">Order by</h3>
+              <div className="flex flex-col space-y-2">
+                {SORT.map(({ id, label }) => {
+                  return (
+                    <FieldRFF
+                      key={id}
+                      name="sort"
+                      type="radio"
+                      value={id}
+                    >
+                      {(fprops) => (
+                        <div className="flex space-x-2">
+                          <Radio theme="light" id={`sort-${id}`} {...fprops.input} />
+                          <Label theme="light" id={`sort-${id}`} className="ml-2">{label}</Label>
+                        </div>
+                      )}
+                    </FieldRFF>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-center flex-shrink-0 px-8 mt-10 space-x-3">
+            <Button
+              className="w-full"
+              theme="secondary"
+              size="lg"
+              onClick={onClear}
+            >
+              Clear all
+            </Button>
+
+            <Button
+              type="submit"
+              className="w-full"
+              theme="primary"
+              size="lg"
+            >
+              Apply
+            </Button>
+          </div>
+        </form>
+      )}
+    </FormRFF>
+  );
+};
+
+export default ProjectScenariosFilters;

app/layout/projects/show/scenarios/filters/index.ts

@@ -0,0 +1 @@
+export { default } from './component';