Fix PR feedbacks

packages/strapi-helper-plugin/lib/src/hooks/useDebounce.js

@@ -1,20 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-// A simple hook to debounce value.
-const useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value]);
-
-  return debouncedValue;
-};
-
-export default useDebounce;

packages/strapi-helper-plugin/lib/src/index.js

@@ -95,7 +95,6 @@ export { default as request } from './utils/request';
 export { default as storeData } from './utils/storeData';
 export { default as templateObject } from './utils/templateObject';
 export { default as getYupInnerErrors } from './utils/getYupInnerErrors';
-export { default as useDebounce } from './hooks/useDebounce';
 export { default as useClickAwayListener } from './hooks/useClickAwayListener';
 
 // SVGS

packages/strapi-plugin-content-manager/admin/src/components/InputUID/InputUID.js

@@ -1,13 +1,14 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { InputText } from '@buffetjs/core';
+import { colors } from '@buffetjs/styles';
 
 const InputUID = styled(InputText)`
   width: 100%;
   ${({ error }) =>
     error &&
-    css`
+    `
       > input {
-        border-color: red;
+        border-color: ${colors.darkOrange};
       }
     `}
 `;

packages/strapi-plugin-content-manager/admin/src/components/InputUID/Options/Option.js

@@ -3,12 +3,19 @@ import styled from 'styled-components';
 const Option = styled.div`
   &:hover {
     background-color: #e4f0fc;
+    .right-label {
+      display: block;
+    }
   }
+  cursor: pointer;
   line-height: 2.6rem;
   font-size: 1.5rem;
   padding: 5px;
   display: flex;
   justify-content: space-between;
+  .right-label {
+    display: none;
+  }
 `;
 
 export default Option;

packages/strapi-plugin-content-manager/admin/src/components/InputUID/Options/index.js

@@ -1,43 +1,27 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
-import pluginId from '../../../pluginId';
+import getTrad from '../../../utils/getTrad'
 import OptionsWrapper from './wrapper';
 import Option from './Option';
 import OptionsTitle from './OptionsTitle';
 import RightOptionLabel from './RightOptionLabel';
 
-const Options = ({ options, title }) => {
-  const [displayRightOptionLabel, setDisplayRightOptionLabel] = useState(false);
-  const handleOptionMouseEnter = () => {
-    setDisplayRightOptionLabel(true);
-  };
-  const handleOptionMouseLeave = () => {
-    setDisplayRightOptionLabel(false);
-  };
+const Options = ({ options, title }) => (
+  <OptionsWrapper>
+    {title && <OptionsTitle>{title}</OptionsTitle>}
+    {options.map(option => (
+      <Option key={option.id} onClick={option.onClick}>
+        <div>{option.label}</div>
 
-  return (
-    <OptionsWrapper>
-      {title && <OptionsTitle>{title}</OptionsTitle>}
-      {options.map(option => (
-        <Option
-          onMouseEnter={handleOptionMouseEnter}
-          onMouseLeave={handleOptionMouseLeave}
-          key={option.id}
-          onClick={option.onClick}
-        >
-          <div>{option.label}</div>
-          {displayRightOptionLabel && (
-            <FormattedMessage id={`${pluginId}.components.uid.apply`}>
-              {msg => <RightOptionLabel>{msg}</RightOptionLabel>}
-            </FormattedMessage>
-          )}
-        </Option>
-      ))}
-    </OptionsWrapper>
-  );
-};
+        <FormattedMessage id={getTrad('components.uid.apply')}>
+          {msg => <RightOptionLabel className="right-label">{msg}</RightOptionLabel>}
+        </FormattedMessage>
+      </Option>
+    ))}
+  </OptionsWrapper>
+);
 
 Options.propTypes = {
   options: PropTypes.array.isRequired,

packages/strapi-plugin-content-manager/admin/src/components/InputUID/Options/wrapper.js

@@ -2,12 +2,12 @@ import styled from 'styled-components';
 
 const wrapper = styled.div`
   position: absolute;
-  background-color: white;
-  border: 1px solid ${props => props.theme.main.colors.border};
   width: 100%;
   margin-top: 3px;
-  z-index: 10;
+  border: 1px solid ${props => props.theme.main.colors.border};
   border-radius: 2px;
+  background-color: white;
+  z-index: 10;
 `;
 
 export default wrapper;

packages/strapi-plugin-content-manager/admin/src/components/InputUID/RegenerateButton.js

@@ -4,10 +4,11 @@ const RegenerateButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10;
-  background-color: #fafafb;
   width: 40px;
   height: 32px;
+  background-color: #fafafb;
+  z-index: 10;
+  
   &:hover {
     cursor: pointer;
     background-color: #aed4fb;

packages/strapi-plugin-content-manager/admin/src/components/InputUID/RightLabel.js

@@ -5,8 +5,10 @@ import styled from 'styled-components';
 import { useGlobalContext } from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
 
-// This component is only used in this file so there is no need to create a separated file.
+// Note you don't need to create a specific file for this one
+// as it will soon be replaced by the Text one so you can leave it in this file.
 const RightContentLabel = styled.div`
   padding: 0 5px;
   text-transform: capitalize;
@@ -20,7 +22,7 @@ const RightLabel = ({ label, availability }) => {
     return (
       <RightContentLabel color="blue">
         {formatMessage({
-          id: `${pluginId}.components.uid.regenerate`,
+          id: getTrad('components.uid.regenerate'),
         })}
       </RightContentLabel>
     );
@@ -42,7 +44,7 @@ const RightLabel = ({ label, availability }) => {
         <Remove fill="#ff203c" width="12px" height="12px" />
         <RightContentLabel color="red">
           {formatMessage({
-            id: `${pluginId}.components.uid.unavailable`,
+            id: getTrad('components.uid.unavailable'),
           })}
         </RightContentLabel>
       </>

packages/strapi-plugin-content-manager/admin/src/components/InputUID/index.js

@@ -1,13 +1,15 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Regenerate } from '@buffetjs/icons';
+import { Sync } from '@buffetjs/icons';
 import { ErrorMessage as BaseErrorMessage } from '@buffetjs/styles';
 import { Label, Error } from '@buffetjs/core';
+import { useDebounce } from '@buffetjs/hooks';
 import styled from 'styled-components';
-import { request, LoadingIndicator, useClickAwayListener, useDebounce } from 'strapi-helper-plugin';
+import { request, LoadingIndicator, useClickAwayListener } from 'strapi-helper-plugin';
 import { FormattedMessage } from 'react-intl';
 
 import pluginId from '../../pluginId';
+import getRequestUrl from '../../utils/getRequestUrl';
 import useDataManager from '../../hooks/useDataManager';
 import RightLabel from './RightLabel';
 import Options from './Options';
@@ -53,11 +55,32 @@ const InputUID = ({
   const [label, setLabel] = useState();
   const debouncedValue = useDebounce(value, 300);
   const wrapperRef = useRef(null);
+  const generateUid = useRef();
   const initialValue = initialData[name];
 
+  generateUid.current = async () => {
+    setIsLoading(true);
+    const requestURL = getRequestUrl('explorer/uid/generate');
+    try {
+      const { data } = await request(requestURL, {
+        method: 'POST',
+        body: {
+          contentTypeUID,
+          field: name,
+          data: modifiedData,
+        },
+      });
+      onChange({ target: { name, value: data, type: 'text' } });
+      setIsLoading(false);
+    } catch (err) {
+      console.error({ err });
+      setIsLoading(false);
+    }
+  };
+
   const checkAvailability = async () => {
     setIsLoading(true);
-    const requestURL = '/content-manager/explorer/uid/check-availability';
+    const requestURL = getRequestUrl('explorer/uid/check-availability');
     try {
       const data = await request(requestURL, {
         method: 'POST',
@@ -79,42 +102,23 @@ const InputUID = ({
     }
   };
 
-  const generate = async () => {
-    setIsLoading(true);
-    const requestURL = '/content-manager/explorer/uid/generate';
-    try {
-      const { data } = await request(requestURL, {
-        method: 'POST',
-        body: {
-          contentTypeUID,
-          field: name,
-          data: modifiedData,
-        },
-      });
-      onChange({ target: { name, value: data, type: 'text' } });
-      setIsLoading(false);
-    } catch (err) {
-      console.error({ err });
-      setIsLoading(false);
-    }
-  };
-
   useEffect(() => {
     if (!value && required) {
-      generate();
+      generateUid.current();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
-    if (debouncedValue && debouncedValue !== initialValue) {
+    // if (debouncedValue && debouncedValue !== initialValue) {
+    if (debouncedValue) {
       checkAvailability();
     }
     if (!debouncedValue) {
       setAvailability(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue]);
+  }, [debouncedValue, initialValue]);
 
   useEffect(() => {
     let timer;
@@ -191,12 +195,12 @@ const InputUID = ({
                 <RegenerateButton
                   onMouseEnter={handleGenerateMouseEnter}
                   onMouseLeave={handleGenerateMouseLeave}
-                  onClick={generate}
+                  onClick={generateUid.current}
                 >
                   {isLoading ? (
                     <LoadingIndicator />
                   ) : (
-                    <Regenerate fill={label ? '#007EFF' : '#B5B7BB'} width="15px" height="15px" />
+                    <Sync fill={label ? '#007EFF' : '#B5B7BB'} width="15px" height="15px" />
                   )}
                 </RegenerateButton>
               </RightContent>