fix: make task status filter to be controllable

Author: hbarcelos

src/features/tasks/TaskStatusFilter.jsx

@@ -4,23 +4,27 @@ import styled from 'styled-components';
 import { Badge, Select } from 'antd';
 import theme from '~/features/ui/theme';
 
-export default function TaskStatusFilter({ fullWidth, onChange, defaultValue }) {
+export default function TaskStatusFilter({ fullWidth, onChange, value, defaultValue }) {
+  const controlledProps = value !== undefined ? { value } : {};
+
   return (
     <StyledSelect
       filterOption={false}
       size="large"
       listHeight={368}
       dropdownRender={menu => <StyledItemWrapper>{menu}</StyledItemWrapper>}
       $fullWidth={fullWidth}
-      onChange={onChange}
       defaultValue={defaultValue}
+      onChange={onChange}
       options={filterOptions}
+      {...controlledProps}
     />
   );
 }
 
 TaskStatusFilter.propTypes = {
   onChange: t.func,
+  value: t.string,
   defaultValue: t.string,
   fullWidth: t.bool,
 };

src/pages/Home.jsx

@@ -60,7 +60,7 @@ export default function Home() {
               </StyledSwitchWrapper>
             </Col>
             <Col xl={8} lg={{ span: 8, offset: 0 }} md={{ span: 12, offset: 0 }} sm={{ span: 18, offset: 3 }} xs={24}>
-              <Link to={r.TRANSLATOR_DASHBOARD}>
+              <Link to={`${r.TRANSLATOR_DASHBOARD}?status=open`}>
                 <StyledButton fullWidth>
                   <WorkAsATranslatorAvatar />
                   <span className="text">Work as a Translator</span>
@@ -72,14 +72,14 @@ export default function Home() {
                   size="small"
                   checkedChildren={<CheckOutlined />}
                   unCheckedChildren={<CloseOutlined />}
-                  checked={defaultPage === r.TRANSLATOR_DASHBOARD}
-                  onClick={createClickHandler(r.TRANSLATOR_DASHBOARD)}
+                  checked={defaultPage === `${r.TRANSLATOR_DASHBOARD}?status=open`}
+                  onClick={createClickHandler(`${r.TRANSLATOR_DASHBOARD}?status=open`)}
                 />
                 Set as default page for Linguo
               </StyledSwitchWrapper>
             </Col>
             <Col xl={8} lg={{ span: 8, offset: 0 }} md={{ span: 12, offset: 6 }} sm={{ span: 18, offset: 3 }} xs={24}>
-              <Link to={`${r.TRANSLATOR_DASHBOARD}?filter=inReview`}>
+              <Link to={`${r.TRANSLATOR_DASHBOARD}?status=inReview&allTasks=true`}>
                 <StyledButton fullWidth>
                   <ReviewTranslationsAvatar />
                   <span className="text">Review Translations</span>
@@ -91,8 +91,8 @@ export default function Home() {
                   size="small"
                   checkedChildren={<CheckOutlined />}
                   unCheckedChildren={<CloseOutlined />}
-                  checked={defaultPage === `${r.TRANSLATOR_DASHBOARD}?filter=inReview`}
-                  onClick={createClickHandler(`${r.TRANSLATOR_DASHBOARD}?filter=inReview`)}
+                  checked={defaultPage === `${r.TRANSLATOR_DASHBOARD}?status=inReview&allTasks=true`}
+                  onClick={createClickHandler(`${r.TRANSLATOR_DASHBOARD}?status=inReview&allTasks=true`)}
                 />
                 Set as default page for Linguo
               </StyledSwitchWrapper>

src/pages/RequesterDashboard/TaskListHeader.jsx

@@ -38,7 +38,7 @@ function TaskStatusFilterContainer() {
     [setFilters, allTasks]
   );
 
-  return <TaskStatusFilter fullWidth defaultValue={status} onChange={handleFilterChange} />;
+  return <TaskStatusFilter fullWidth value={status} onChange={handleFilterChange} />;
 }
 
 const StyledHeader = styled.header`

src/pages/TranslatorDashboard/TaskListHeader.jsx

@@ -60,7 +60,7 @@ function TaskStatusFilterContainer() {
     [setFilters, allTasks]
   );
 
-  return <TaskStatusFilter fullWidth defaultValue={status} onChange={handleFilterChange} />;
+  return <TaskStatusFilter fullWidth value={status} onChange={handleFilterChange} />;
 }
 
 const StyledHeader = styled.header`