Merge branch 'develop'

README.md

@@ -34,3 +34,11 @@ Visit the [demo site](https://w3labkr.github.io/js-smart-shuffle-words/).
 ```
 
 Directory tree generated using [tree.nathanfriend.io](https://tree.nathanfriend.io).
+
+## Browser Support
+
+Smart Shuffle Words supports modern browsers. For more information see [here](https://mui.com/material-ui/getting-started/supported-platforms/#browser).
+
+| Edge   | Firefox  | Chrome  | Safari (macOS)  | Safari (iOS)  | IE                    |
+|------- |--------- |-------- |---------------- |-------------- |---------------------- |
+| >= 91  | >= 78    | >= 90   | >= 14           | >= 12.5       | 11 (partial support)  |

src/locales/en/translation.json

@@ -45,6 +45,9 @@
     "An error has occurred.": "An error has occurred.",
     "Import data": "Import data",
     "Import stopwords": "Import stopwords",
-    "Stopword url:": "Stopword url:",
-    "Enter the address of a Google Sheets published on the web.": "Enter the address of a Google Sheets published on the web."
+    "Google spreadsheets publish URL:": "Google spreadsheets publish URL:",
+    "Enter the address of a google spreadsheets published on the web.": "Enter the address of a google spreadsheets published on the web.",
+    "Google spreadsheets ID:": "Google spreadsheets ID:",
+    "Enter the shared google spreadsheets ID.": "Enter the shared google spreadsheets ID.",
+    "Import stopwords from google spreadsheets:": "Import stopwords from google spreadsheets:"
 }

src/locales/ko/translation.json

@@ -45,6 +45,9 @@
     "An error has occurred.": "오류가 발생했습니다.",
     "Import data": "데이터 가져오기",
     "Import stopwords": "금칙어 가져오기",
-    "Stopword url:": "금칙어 링크 주소:",
-    "Enter the address of a Google Sheets published on the web.": "웹에 게시된 구글 스프레드시트의 주소를 입력하세요."
+    "Google spreadsheets publish URL:": "구글 스프레드시트 발행 주소:",
+    "Enter the address of a google spreadsheets published on the web.": "웹에 게시된 구글 스프레드시트의 주소를 입력하세요.",
+    "Google spreadsheets ID:": "구글 스프레드시트 아이디:",
+    "Enter the shared google spreadsheets ID.": "공유 된 구글 스프레드시트 아이디를 입력하세요.",
+    "Import stopwords from google spreadsheets:": "구글 스프레드시트에서 금칙어 가져오기:"
 }

src/modules/parser.js

@@ -1,4 +1,22 @@
-export const parseGoogleSpreadsheets = (htmlString) => {
+export const getGoogleSpreadsheetsUrl = (spreadsheetsDataType, spreadsheetsPublishURL, spreadsheetsID) => {
+  switch (spreadsheetsDataType) {
+    case 'html':
+      return spreadsheetsPublishURL;
+    case 'json':
+      return `https://docs.google.com/spreadsheets/d/${spreadsheetsID}/gviz/tq`;
+  }
+};
+
+export const parseGoogleSpreadsheets = (dataType, data) => {
+  switch (dataType) {
+    case 'html':
+      return parseHTML(data);
+    case 'json':
+      return parseJSON(data);
+  }
+};
+
+export const parseHTML = (htmlString) => {
   let doc = new DOMParser().parseFromString(htmlString, 'text/html');
   let rows = doc.querySelectorAll('tbody tr');
   let list = [];
@@ -10,5 +28,27 @@ export const parseGoogleSpreadsheets = (htmlString) => {
     }
   }
 
-  return list;
+  return list.join(' ');
+};
+
+export const parseJSON = (jsonString) => {
+  let str = jsonString
+    .replace(/\/.*\//, '')
+    .replace(/google.visualization.Query.setResponse\(/, '')
+    .replace(/\);$/, '');
+  let data = JSON.parse(str);
+  let rows = data.table.rows;
+  let list = [];
+
+  for (let index = 0, length = rows.length; index < length; index++) {
+    let row = Object.values(rows[index]);
+    for (let idx = 0, len = row.length; idx < len; idx++) {
+      let cols = row[idx];
+      for (let i = 0, l = cols.length; i < l; i++) {
+        list.push(cols[i]['v']);
+      }
+    }
+  }
+
+  return list.join(' ');
 };

src/pages/Home/components/ActionSection/ImportStopwordsAction.jsx

@@ -9,8 +9,13 @@ import Backdrop from '@mui/material/Backdrop';
 import CircularProgress from '@mui/material/CircularProgress';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
-import { parseGoogleSpreadsheets } from '~/modules/parser';
-import { stopwordsState, stopwordUrlState } from '~/store/atoms/main';
+import { parseGoogleSpreadsheets, getGoogleSpreadsheetsUrl } from '~/modules/parser';
+import {
+  stopwordsState,
+  googleSpreadsheetsDataTypeState,
+  googleSpreadsheetsPublishURLState,
+  googleSpreadsheetsIDState,
+} from '~/store/atoms/main';
 
 const Button = styled(MuiButton)(({ theme }) => ({
   marginRight: theme.spacing(1),
@@ -26,15 +31,18 @@ export default function ImportStopwordsAction() {
     message: t('Succeed!'),
   });
   const setStopwords = useSetRecoilState(stopwordsState);
-  const stopwordUrl = useRecoilValue(stopwordUrlState);
+  const spreadsheetsDataType = useRecoilValue(googleSpreadsheetsDataTypeState);
+  const spreadsheetsPublishURL = useRecoilValue(googleSpreadsheetsPublishURLState);
+  const spreadsheetsID = useRecoilValue(googleSpreadsheetsIDState);
 
-  const handleClick = _debounce((url) => {
+  const handleClick = _debounce(() => {
+    let url = getGoogleSpreadsheetsUrl(spreadsheetsDataType, spreadsheetsPublishURL, spreadsheetsID);
     setBackdrop({ open: true });
     axios
       .get(url)
       .then(function (response) {
-        const stopwords = parseGoogleSpreadsheets(response.data);
-        setStopwords(stopwords.join(' '));
+        const stopwords = parseGoogleSpreadsheets(spreadsheetsDataType, response.data);
+        setStopwords(stopwords);
         setBackdrop({ open: false });
         setSnackbar((prev) => ({ ...prev, open: true }));
       })
@@ -46,7 +54,7 @@ export default function ImportStopwordsAction() {
 
   return (
     <>
-      <Button variant="outlined" size="large" onClick={() => handleClick(stopwordUrl)}>
+      <Button variant="outlined" size="large" onClick={handleClick}>
         {t('Import stopwords')}
       </Button>
       <Backdrop

src/pages/Home/components/ActionSection/ResetSettings.jsx

@@ -38,7 +38,9 @@ export default function ResetSettings() {
     lineTextLengthState: useResetRecoilState(mainState['lineTextLengthState']),
     specialCharactersState: useResetRecoilState(mainState['specialCharactersState']),
     stopwordsState: useResetRecoilState(mainState['stopwordsState']),
-    stopwordUrlState: useResetRecoilState(mainState['stopwordUrlState']),
+    googleSpreadsheetsDataTypeState: useResetRecoilState(mainState['googleSpreadsheetsDataTypeState']),
+    googleSpreadsheetsPublishURLState: useResetRecoilState(mainState['googleSpreadsheetsPublishURLState']),
+    googleSpreadsheetsIDState: useResetRecoilState(mainState['googleSpreadsheetsIDState']),
 
     // Advanced Settings: Start
     startEnabledState: useResetRecoilState(mainState['startEnabledState']),

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

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue } from 'recoil';
 import Typography from '@mui/material/Typography';
@@ -11,7 +11,7 @@ export default function HighlightStopwords() {
   const stopwords = useRecoilValue(stopwordsState);
   const [highlightWords, setHighlightWords] = useState([]);
 
-  useMemo(() => {
+  useEffect(() => {
     let words = [];
 
     if (stopwords.trim().length) {

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

@@ -1,25 +1,64 @@
 import { useTranslation } from 'react-i18next';
 import { useRecoilState } from 'recoil';
 import TextField from '@mui/material/TextField';
+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 Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
-import { stopwordUrlState } from '~/store/atoms/main';
+import {
+  googleSpreadsheetsDataTypeState,
+  googleSpreadsheetsPublishURLState,
+  googleSpreadsheetsIDState,
+} from '~/store/atoms/main';
 
 export default function ImportStopwords() {
   const { t } = useTranslation();
-  const [stopwords, setStopwords] = useRecoilState(stopwordUrlState);
+  const [spreadsheetsDataType, setSpreadsheetsDataType] = useRecoilState(googleSpreadsheetsDataTypeState);
+  const [spreadsheetsPublishURL, setSpreadsheetsPublishURL] = useRecoilState(googleSpreadsheetsPublishURLState);
+  const [spreadsheetsId, setSpreadsheetsId] = useRecoilState(googleSpreadsheetsIDState);
 
   return (
     <Stack spacing={1}>
-      <Typography>{t('Stopword url:')}</Typography>
-      <TextField
-        fullWidth
-        value={stopwords}
-        variant="outlined"
-        placeholder={t('Please enter text')}
-        helperText={t('Enter the address of a Google Sheets published on the web.')}
-        onChange={(e) => setStopwords(e.target.value)}
-      />
+      <FormControl>
+        <Typography>{t('Import stopwords from google spreadsheets:')}</Typography>
+        <RadioGroup
+          row
+          name="spreadsheetsDataType"
+          value={spreadsheetsDataType}
+          onChange={(e) => setSpreadsheetsDataType(e.target.value)}
+        >
+          <FormControlLabel value="html" control={<Radio />} label="HTML" />
+          <FormControlLabel value="json" control={<Radio />} label="JSON" />
+        </RadioGroup>
+      </FormControl>
+      {spreadsheetsDataType === 'html' && (
+        <>
+          <Typography>{t('Google spreadsheets publish URL:')}</Typography>
+          <TextField
+            fullWidth
+            value={spreadsheetsPublishURL}
+            variant="outlined"
+            placeholder={t('Please enter text')}
+            helperText={t('Enter the address of a google spreadsheets published on the web.')}
+            onChange={(e) => setSpreadsheetsPublishURL(e.target.value)}
+          />
+        </>
+      )}
+      {spreadsheetsDataType === 'json' && (
+        <>
+          <Typography>{t('Google spreadsheets ID:')}</Typography>
+          <TextField
+            fullWidth
+            value={spreadsheetsId}
+            variant="outlined"
+            placeholder={t('Please enter text')}
+            helperText={t('Enter the shared google spreadsheets ID.')}
+            onChange={(e) => setSpreadsheetsId(e.target.value)}
+          />
+        </>
+      )}
     </Stack>
   );
 }

src/pages/Home/components/WidgetArea/index.jsx

@@ -1,10 +1,29 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
 import Divider from '@mui/material/Divider';
-import ImportData from './ImportData';
 
 export default function WidgetArea() {
   return (
     <>
-      <ImportData />
+      <List>
+        <ListItem disablePadding>
+          <ListItemButton>
+            <ListItemText primary="Menu1" />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton>
+            <ListItemText primary="Menu2" />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton>
+            <ListItemText primary="Menu3" />
+          </ListItemButton>
+        </ListItem>
+      </List>
       <Divider />
     </>
   );

src/store/atoms/main.js

@@ -70,8 +70,20 @@ export const stopwordsState = atom({
   effects_UNSTABLE: [persistAtom],
 });
 
-export const stopwordUrlState = atom({
-  key: 'stopwordUrlState',
+export const googleSpreadsheetsDataTypeState = atom({
+  key: 'googleSpreadsheetsDataTypeState',
+  default: 'html',
+  effects_UNSTABLE: [persistAtom],
+});
+
+export const googleSpreadsheetsPublishURLState = atom({
+  key: 'googleSpreadsheetsPublishURLState',
+  default: '',
+  effects_UNSTABLE: [persistAtom],
+});
+
+export const googleSpreadsheetsIDState = atom({
+  key: 'googleSpreadsheetsIDState',
   default: '',
   effects_UNSTABLE: [persistAtom],
 });

src/store/atoms/theme.js

@@ -16,5 +16,5 @@ export const themeLanguageState = atom({
 
 export const themeSidebarWidthState = atom({
   key: 'themeSidebarWidthState',
-  default: 240,
+  default: 0, // (default) 240
 });