feat: reorder random text characters

src/locales/en/translation.json

@@ -37,5 +37,8 @@
     "Resetting cannot restore existing settings.": "Resetting cannot restore existing settings.",
     "Remove index column:": "Remove index column:",
     "Remove stopwords": "Remove stopwords",
-    "Reorder random text characters:": "Reorder random text characters:"
+    "Reorder random text characters:": "Reorder random text characters:",
+    "Digit+Word": "Digit+Word",
+    "Word+Digit": "Word+Digit",
+    "None": "None"
 }

src/locales/ko/translation.json

@@ -37,5 +37,8 @@
     "Resetting cannot restore existing settings.": "재설정하면 기존 설정을 복원할 수 없습니다.",
     "Remove index column:": "인덱스 열 제거:",
     "Remove stopwords": "금칙어 중복 제거",
-    "Reorder random text characters:": "랜덤 텍스트 문자 재정렬:"
+    "Reorder random text characters:": "랜덤 텍스트 문자 재정렬:",
+    "Digit+Word": "숫자+문자",
+    "Word+Digit": "문자+숫자",
+    "None": "없음"
 }

src/pages/Home/components/SettingSection/AdvancedSettingsDetails/EndText.jsx

@@ -17,11 +17,15 @@ export default function EndText() {
         textState="endTextState"
         choiceState="endChoiceRandomCharacterState"
         lengthState="endLimitRandomTextLengthState"
+        reorderState="endReorderRandomTextCharactersState"
         disabledValue="endDisabledValue"
       />
       <ChoiceRandomCharacter choiceState="endChoiceRandomCharacterState" disabledValue="endDisabledValue" />
       <LimitRandomTextLength lengthState="endLimitRandomTextLengthState" disabledValue="endDisabledValue" />
-      <ReorderRandomTextCharacters />
+      <ReorderRandomTextCharacters
+        reorderState="endReorderRandomTextCharactersState"
+        disabledValue="endDisabledValue"
+      />
     </>
   );
 }

src/pages/Home/components/SettingSection/AdvancedSettingsDetails/GenerateRandomText.jsx

@@ -3,43 +3,27 @@ import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { styled } from '@mui/system';
 import MuiButton from '@mui/material/Button';
 import { generateRandomHangul, generateRandomString } from '~/modules/randomText';
-import { repeat as _repeat } from 'lodash';
 import * as mainState from '~/store/atoms/main';
 import * as mainValue from '~/store/selectors/main';
 
 const Button = styled(MuiButton)(({ theme }) => ({
   marginBottom: theme.spacing(2),
 }));
 
-export default function GenerateRandomText({ textState, choiceState, lengthState, disabledValue }) {
+export default function GenerateRandomText({ textState, choiceState, lengthState, reorderState, disabledValue }) {
   const { t } = useTranslation();
   const setText = useSetRecoilState(mainState[textState]);
   const choices = useRecoilValue(mainState[choiceState]);
   const length = useRecoilValue(mainState[lengthState]);
+  const reorder = useRecoilValue(mainState[reorderState]);
   const disabled = useRecoilValue(mainValue[disabledValue]);
 
   const handleClick = () => {
-    let characters = '';
+    let characters = setCharacters(choices);
+    let text = generateRandomString(characters, length);
+    text = reorderCharacters(reorder, text);
 
-    console.log(choices.length);
-
-    if (choices.indexOf('uppercase') !== -1) {
-      characters += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    }
-
-    if (choices.indexOf('lowercase') !== -1) {
-      characters += 'abcdefghijklmnopqrstuvwxyz';
-    }
-
-    if (choices.indexOf('digit') !== -1) {
-      characters += _repeat('0123456789', 2);
-    }
-
-    if (choices.indexOf('korean') !== -1) {
-      characters += generateRandomHangul(26);
-    }
-
-    setText(generateRandomString(characters, length));
+    setText(text);
   };
 
   return (
@@ -48,3 +32,43 @@ export default function GenerateRandomText({ textState, choiceState, lengthState
     </Button>
   );
 }
+
+function setCharacters(choices) {
+  let characters = '';
+
+  if (choices.indexOf('uppercase') !== -1) {
+    characters += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  }
+
+  if (choices.indexOf('lowercase') !== -1) {
+    characters += 'abcdefghijklmnopqrstuvwxyz';
+  }
+
+  if (choices.indexOf('digit') !== -1) {
+    characters += '0123456789';
+  }
+
+  if (choices.indexOf('korean') !== -1) {
+    characters += generateRandomHangul(26);
+  }
+
+  return characters;
+}
+
+function reorderCharacters(reorder, oldText) {
+  if (reorder === 'none') {
+    return oldText;
+  }
+
+  let digit = oldText.replace(/([^0-9])/g, '');
+  let nonDigit = oldText.replace(/([0-9])/g, '');
+  let newText = '';
+
+  if (reorder === 'digitWord') {
+    newText = digit + nonDigit;
+  } else if (reorder === 'wordDigit') {
+    newText = nonDigit + digit;
+  }
+
+  return newText;
+}

src/pages/Home/components/SettingSection/AdvancedSettingsDetails/ReorderRandomTextCharacters.jsx

@@ -1,17 +1,26 @@
 import { useTranslation } from 'react-i18next';
-// import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import Typography from '@mui/material/Typography';
-// import * as mainState from '~/store/atoms/main';
-// import * as mainValue from '~/store/selectors/main';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import * as mainState from '~/store/atoms/main';
+import * as mainValue from '~/store/selectors/main';
 
-export default function ReorderRandomTextCharacters() {
+export default function ReorderRandomTextCharacters({ reorderState, disabledValue }) {
   const { t } = useTranslation();
-  // const [length, setLength] = useRecoilState(mainState[lengthState]);
-  // const disabled = useRecoilValue(mainValue[disabledValue]);
+  const [value, setValue] = useRecoilState(mainState[reorderState]);
+  const disabled = useRecoilValue(mainValue[disabledValue]);
 
   return (
-    <>
+    <FormControl>
       <Typography>{t('Reorder random text characters:')}</Typography>
-    </>
+      <RadioGroup row name="reorderRandomTextCharacters" value={value} onChange={(e) => setValue(e.target.value)}>
+        <FormControlLabel value="none" control={<Radio />} label={t('None')} disabled={disabled} />
+        <FormControlLabel value="digitWord" control={<Radio />} label={t('Digit+Word')} disabled={disabled} />
+        <FormControlLabel value="wordDigit" control={<Radio />} label={t('Word+Digit')} disabled={disabled} />
+      </RadioGroup>
+    </FormControl>
   );
 }

src/pages/Home/components/SettingSection/AdvancedSettingsDetails/StartText.jsx

@@ -17,11 +17,15 @@ export default function StartText() {
         textState="startTextState"
         choiceState="startChoiceRandomCharacterState"
         lengthState="startLimitRandomTextLengthState"
+        reorderState="startReorderRandomTextCharactersState"
         disabledValue="startDisabledValue"
       />
       <ChoiceRandomCharacter choiceState="startChoiceRandomCharacterState" disabledValue="startDisabledValue" />
       <LimitRandomTextLength lengthState="startLimitRandomTextLengthState" disabledValue="startDisabledValue" />
-      <ReorderRandomTextCharacters />
+      <ReorderRandomTextCharacters
+        reorderState="startReorderRandomTextCharactersState"
+        disabledValue="startDisabledValue"
+      />
     </>
   );
 }

src/pages/Home/components/SettingSection/GeneralSettingsDetails/HighlightStopWords.jsx

@@ -1,11 +1,16 @@
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue } from 'recoil';
+import { styled } from '@mui/system';
 import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
+import MuiStack from '@mui/material/Stack';
 import { generateRandomColorRgb } from '~/modules/randomColor';
 import { stopWordsState } from '~/store/atoms/main';
 
+const Stack = styled(MuiStack)(({ theme }) => ({
+  marginTop: theme.spacing(-1),
+}));
+
 export default function HighlightStopWords() {
   const { t } = useTranslation();
   const stopWords = useRecoilValue(stopWordsState);

src/pages/Home/components/SettingSection/GeneralSettingsDetails/LimitTextLength.jsx

@@ -1,12 +1,17 @@
 import { useTranslation } from 'react-i18next';
 import { useRecoilState } from 'recoil';
+import { styled } from '@mui/system';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
+import MuiFormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
 import { lineTextLengthState } from '~/store/atoms/main';
 
+const FormControl = styled(MuiFormControl)(({ theme }) => ({
+  marginTop: theme.spacing(-1),
+}));
+
 export default function LimitTextLength() {
   const { t } = useTranslation();
   const [value, setValue] = useRecoilState(lineTextLengthState);

src/pages/Home/components/SettingSection/GeneralSettingsDetails/RemoveSpecialCharacters.jsx

@@ -1,10 +1,15 @@
 import { useTranslation } from 'react-i18next';
 import { useRecoilState } from 'recoil';
+import { styled } from '@mui/system';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
+import MuiStack from '@mui/material/Stack';
 import { specialCharactersState } from '~/store/atoms/main';
 
+const Stack = styled(MuiStack)(({ theme }) => ({
+  marginTop: theme.spacing(-1),
+}));
+
 export default function RemoveSpecialCharacters() {
   const { t } = useTranslation();
   const [specialCharacters, setStopWordSpecialCharacters] = useRecoilState(specialCharactersState);

src/store/atoms/main.js

@@ -97,6 +97,12 @@ export const startLimitRandomTextLengthState = atom({
   effects_UNSTABLE: [persistAtom],
 });
 
+export const startReorderRandomTextCharactersState = atom({
+  key: 'startReorderRandomTextCharactersState',
+  default: 'none',
+  effects_UNSTABLE: [persistAtom],
+});
+
 export const endEnabledState = atom({
   key: 'endEnabledState',
   default: false,
@@ -120,3 +126,9 @@ export const endLimitRandomTextLengthState = atom({
   default: 12,
   effects_UNSTABLE: [persistAtom],
 });
+
+export const endReorderRandomTextCharactersState = atom({
+  key: 'endReorderRandomTextCharactersState',
+  default: 'none',
+  effects_UNSTABLE: [persistAtom],
+});