[yagin] add bad reason filter and fix response

cope2n-fe/src/pages/reviews2/api.ts

@@ -10,6 +10,8 @@ export const fetchAllRequests = async (
   filterFeedbackResult: string,
   filterPredictResult: string,
   filterReviewedResult: string,
+  filterBadReason: string,
+  filterOtherReason: string,
   page = 1,
   page_size = 20,
   max_accuracy = 100,
@@ -42,6 +44,11 @@ export const fetchAllRequests = async (
   if (filterReviewedResult) {
     filterStr += `reviewed_result=${filterReviewedResult}&`;
   }
+  if (filterBadReason === 'other' && filterOtherReason.trim()) {
+    filterStr += `bad_reason=${filterOtherReason}&`;
+  } else if(filterBadReason !== 'other') {
+    filterStr += `bad_reason=${filterBadReason}&`;
+  }
   //
   if (startDate && endDate) {
     filterStr += `start_date=${startDate}&end_date=${endDate}&`;
@@ -105,7 +112,7 @@ export const fetchRequest = async (id: string) => {
   });
   return await (
     await response.json()
-  ).subscription_requests?.[0] || null;
+  ).subscription_requests?.[0];
 };
 
 export const addRecentRequest = (

cope2n-fe/src/pages/reviews2/index.tsx

@@ -76,6 +76,9 @@ const ReviewPage = () => {
   const [filterFeedbackResult, setFilterFeedbackResult] = useState('');
   const [filterPredictResult, setFilterPredictResult] = useState('');
   const [filterReviewedResult, setFilterReviewedResult] = useState('');
+  const [filterBadReason, setFilterBadReason] = useState('other');
+  const [filterOtherReason, setFilterOtherReason] = useState('');
+
   // const [requests, setRequests] = useState([]);
   const [currentRequest, setCurrentRequest] = useState(null);
   const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
@@ -118,6 +121,8 @@ const ReviewPage = () => {
         filterFeedbackResult,
         filterPredictResult,
         filterReviewedResult,
+        filterBadReason,
+        filterOtherReason,
         1,
         1,
         filterAccuracy,
@@ -125,7 +130,7 @@ const ReviewPage = () => {
         setTotalPages(data?.page?.total_requests);
         setHasNextRequest(1 < data?.page?.total_requests);
         const firstRequest = fetchRequest(
-          data?.subscription_requests[0].RequestID,
+          data?.subscription_requests?.[0]?.RequestID,
         );
         firstRequest.then(async (data) => {
           if (data) setCurrentRequest(data);
@@ -231,6 +236,8 @@ const ReviewPage = () => {
       filterFeedbackResult,
       filterPredictResult,
       filterReviewedResult,
+      filterBadReason,
+      filterOtherReason,
       requestIndex,
       1,
       filterAccuracy,
@@ -290,6 +297,8 @@ const ReviewPage = () => {
       filterFeedbackResult,
       filterPredictResult,
       filterReviewedResult,
+      filterBadReason,
+      filterOtherReason,
       1,
       1,
       filterAccuracy,
@@ -919,31 +928,75 @@ const ReviewPage = () => {
           style={{
             marginTop: 30,
           }}
+          layout="vertical"
         >
-          <Form.Item
-            name='dateRange'
-            label={t`Date (GMT+8)`}
-            rules={[
-              {
-                required: true,
-                message: 'Please select a date range',
-              },
-            ]}
-            style={{
-              marginBottom: 24,
-            }}
-          >
-            <DatePicker.RangePicker
-              onChange={(date, dateString) => {
-                setFilterDateRange(dateString);
-              }}
-              style={{ width: 200 }}
-            />
-          </Form.Item>
-
           <div
             style={{
-              marginTop: 10,
+
+              display: 'flex',
+              justifyContent: 'space-between',
+              marginLeft: 0,
+              padding: 0,
+            }}
+          >
+            <Form.Item
+              name='dateRange'
+              label={t`Date (GMT+8)`}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please select a date range',
+                },
+              ]}
+              style={{
+                flex: 1,
+              }}
+            >
+              <DatePicker.RangePicker
+                onChange={(date, dateString) => {
+                  setFilterDateRange(dateString);
+                }}
+                style={{ width: 300 }}
+              />
+            </Form.Item>
+            <div style={{
+              flex: 1,
+            }}>
+              <Form.Item
+                name='bad_reason'
+                label={t`Bad image reason`}
+              >
+                <Select
+                  placeholder='Select a reason'
+                  style={{ width: 300 }}
+                  options={REASON_BAD_QUALITY}
+                  value={filterBadReason}
+                  defaultValue={filterBadReason}
+                  onChange={setFilterBadReason}
+                />
+              </Form.Item>
+              {filterBadReason === 'other' && (
+                <Form.Item
+                  name='other_reason'
+                  style={{
+                    flex: 1,
+                  }}
+                >
+                  <Input
+                    placeholder='Other reason'
+                    value={filterOtherReason}
+                    style={{ width: 300 }}
+                    onChange={(e) => {
+                      setFilterOtherReason(e.target.value);
+                    }}
+                  />
+                </Form.Item>
+              )}
+            </div>
+          </div>
+          <div
+            style={{
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -959,10 +1012,13 @@ const ReviewPage = () => {
                   message: 'Please select a subsidiary',
                 },
               ]}
+              style={{
+                flex: 1,
+              }}
             >
               <Select
                 placeholder='Select a subsidiary'
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={SUBSIDIARIES}
                 value={filterSubsidiaries}
                 defaultValue={filterSubsidiaries}
@@ -978,8 +1034,12 @@ const ReviewPage = () => {
                   message: 'Please select max accuracy',
                 },
               ]}
+              style={{
+                flex: 1,
+              }}
             >
               <InputNumber
+                style={{ width: 300 }}
                 min={1}
                 max={100}
                 defaultValue={filterAccuracy}
@@ -989,7 +1049,7 @@ const ReviewPage = () => {
           </div>
           <div
             style={{
-              marginTop: 10,
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -1005,9 +1065,12 @@ const ReviewPage = () => {
                   message: 'Please select review status',
                 },
               ]}
+              style={{
+                flex: 1,
+              }}
             >
               <Select
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={[
                   { label: 'All', value: 'all' },
                   { label: 'Reviewed', value: 'reviewed' },
@@ -1027,10 +1090,10 @@ const ReviewPage = () => {
                   message: 'Please select test status',
                 },
               ]}
-              style={{ marginLeft: 16 }}
+              style={{ flex: 1 }}
             >
               <Select
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={[
                   { label: 'Include tests', value: 'true' },
                   { label: 'Exclude tests', value: 'false' },
@@ -1044,7 +1107,7 @@ const ReviewPage = () => {
           {/* add 4 more filter fields */}
           <div
             style={{
-              marginTop: 10,
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -1054,16 +1117,13 @@ const ReviewPage = () => {
             <Form.Item
               name='doc_type'
               label={t`Only type`}
-              rules={[
+              style={{
-                {
+                flex: 1,
-                  required: true,
+              }}
-                  message: 'Please select a document type',
-                },
-              ]}
             >
               <Select
                 placeholder='Select a document type'
-                style={{ width: 200 }}
+                style={{ width: 300 }}
                 options={DOCTYPE}
                 value={filterDoctype}
                 defaultValue={filterDoctype}
@@ -1073,8 +1133,12 @@ const ReviewPage = () => {
             <Form.Item
               name='feedback_result'
               label={t`Feedback includes`}
+              style={{
+                flex: 1,
+              }}
             >
               <Input
+                style={{ width: 300 }}
                 defaultValue={filterFeedbackResult}
                 onChange={(e) => setFilterFeedbackResult(e.target.value)}
               />
@@ -1082,7 +1146,7 @@ const ReviewPage = () => {
           </div>
           <div
             style={{
-              marginTop: 10,
+
               display: 'flex',
               justifyContent: 'space-between',
               marginLeft: 0,
@@ -1092,17 +1156,25 @@ const ReviewPage = () => {
             <Form.Item
               name='predict_result'
               label={t`Predict includes`}
+              style={{
+                flex: 1,
+              }}
             >
               <Input
+                style={{ width: 300 }}
                 defaultValue={filterPredictResult}
                 onChange={(e) => setFilterPredictResult(e.target.value)}
               />
             </Form.Item>
             <Form.Item
               name='reviewed_result'
-              label={t`Review inculdes`}
+              label={t`Review includes`}
+              style={{
+                flex: 1,
+              }}
             >
               <Input
+                style={{ width: 300 }}
                 defaultValue={filterReviewedResult}
                 onChange={(e) => setFilterReviewedResult(e.target.value)}
               />