louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

```

Browse Source 
update Add development environment configuration, I18n support, route adjustments, and various hooks refactoring
```
This commit is contained in:
louiscklaw
2025-05-16 17:47:05 +08:00
parent 6b917c9fb9
commit 49189a532e
28 changed files with 274 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
002_source/ionic_mobile/.env.development Normal file
View File

@@ -0,0 +1,4 @@
#
# POCKETBASE running in wsl2
#
VITE_POCKETBASE_URL=http://192.168.222.199:8090

1
002_source/ionic_mobile/.gitignore vendored
View File

@@ -1,6 +1,7 @@
.env
**/*.log
**/*.del
**/*.draft
**/*.bak
**/*del

6
002_source/ionic_mobile/scripts/001_build.sh Executable file
View File

@@ -0,0 +1,6 @@
#!/usr/bin/env bash
set -ex
npm run lint
npx nodemon --ext ts,tsx --exec "npm run build"

2
002_source/ionic_mobile/src/RouteConfig.tsx
View File

@@ -28,7 +28,7 @@ import { AuthSignUp } from './pages/auth/SignUp';
import Lesson from './pages/Lesson/index';
// NOTES: old version using json file
import LessonWordPageByDb from './pages/Lesson/LessonWordPageByDb';
// import LessonWordPageByDb from './pages/Lesson/LessonWordPageByDb';
import WordPage from './pages/Lesson/WordPage';
//
import ListeningPractice from './pages/ListeningPractice';

29
002_source/ionic_mobile/src/components/CustomField/index.tsx
View File

@@ -7,7 +7,23 @@ interface CustomFieldProps {
label: string;
required: boolean;
input: {
props: { type: string; placeholder: string };
props: {
type:
| 'date'
| 'email'
| 'number'
| 'password'
| 'search'
| 'tel'
| 'text'
| 'url'
| 'time'
| 'week'
| 'month'
| 'datetime-local';
placeholder: string;
//
};
state: {
value: string;
reset: (newValue: any) => void;
@@ -20,8 +36,8 @@ interface CustomFieldProps {
}
function CustomField({ field, errors }: CustomFieldProps): React.JSX.Element {
const error = errors && errors.filter((e) => e.id === field.id)[0];
const errorMessage = error && errors.filter((e) => e.id === field.id)[0].message;
const error = errors && errors.filter((e: { id: string }) => e.id === field.id)[0];
const errorMessage = error && errors.filter((e: { id: string }) => e.id === field.id)[0].message;
return (
<>
@@ -30,7 +46,12 @@ function CustomField({ field, errors }: CustomFieldProps): React.JSX.Element {
{field.label}
{error && <p className="animate__animated animate__bounceIn">{errorMessage}</p>}
</IonLabel>
<IonInput className={styles.customInput} {...field.input.props} {...field.input.state} />
<IonInput
className={styles.customInput}
{...field.input.state}
{...field.input.props}
//
/>
</div>
</>
);

19
002_source/ionic_mobile/src/contexts/I18nProvider.tsx Normal file
View File

@@ -0,0 +1,19 @@
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import '../i18n';
export interface I18nProviderProps {
children: React.ReactNode;
language?: string;
}
export function I18nProvider({ children, language = 'en' }: I18nProviderProps): React.JSX.Element {
const { i18n } = useTranslation();
React.useEffect(() => {
//
}, [i18n, language]);
return <>{children}</>;
}

39
002_source/ionic_mobile/src/contexts/index.tsx
View File

@@ -1,6 +1,7 @@
import { PocketBaseProvider } from '../hooks/usePocketBase';
import { AppStateProvider } from './AppState';
import { UserProvider } from './auth/user-context';
import { I18nProvider } from './I18nProvider';
import { MyIonFavoriteProvider } from './MyIonFavorite';
import { MyIonMetricProvider } from './MyIonMetric';
import { MyIonQuizProvider } from './MyIonQuiz';
@@ -12,24 +13,26 @@ const queryClient = new QueryClient();
const ContextMeta = ({ children }: { children: React.ReactNode }) => {
return (
<>
<AppStateProvider>
<UserProvider>
<MyIonStoreProvider>
<MyIonFavoriteProvider>
<MyIonQuizProvider>
<MyIonMetricProvider>
<QueryClientProvider client={queryClient}>
<PocketBaseProvider>
{children}
{/* */}
</PocketBaseProvider>
</QueryClientProvider>
</MyIonMetricProvider>
</MyIonQuizProvider>
</MyIonFavoriteProvider>
</MyIonStoreProvider>
</UserProvider>
</AppStateProvider>
<I18nProvider>
<AppStateProvider>
<UserProvider>
<MyIonStoreProvider>
<MyIonFavoriteProvider>
<MyIonQuizProvider>
<MyIonMetricProvider>
<QueryClientProvider client={queryClient}>
<PocketBaseProvider>
{children}
{/* */}
</PocketBaseProvider>
</QueryClientProvider>
</MyIonMetricProvider>
</MyIonQuizProvider>
</MyIonFavoriteProvider>
</MyIonStoreProvider>
</UserProvider>
</AppStateProvider>
</I18nProvider>
</>
);
};

10
002_source/ionic_mobile/src/data/utils.tsx
View File

@@ -3,23 +3,23 @@ import { useState } from 'react';
export const useFormInput = (initialValue = '') => {
const [value, setValue] = useState(initialValue);
const handleChange = async (e) => {
const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const tempValue = await e.currentTarget.value;
setValue(tempValue);
};
return {
value,
reset: (newValue) => setValue(newValue),
reset: (newValue: string) => setValue(newValue),
onIonChange: handleChange,
onKeyUp: handleChange,
};
};
export const validateForm = (fields) => {
let errors = [];
export const validateForm = (fields: { required: boolean; id: string; input: { state: { value: string } } }[]) => {
let errors: { id: string; message: string }[] = [];
fields.forEach((field) => {
fields.forEach((field: { required: boolean; id: string; input: { state: { value: string } } }) => {
if (field.required) {
const fieldValue = field.input.state.value;

8
002_source/ionic_mobile/src/hooks/fetchMFQuestions.tsx
View File

@@ -1,5 +1,3 @@
import { QuizMFQuestion } from '../types/QuizMFQuestion';
import { usePocketBase } from './usePocketBase';
import { QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient({
@@ -10,12 +8,12 @@ const queryClient = new QueryClient({
},
});
const fetchMFQuestions = async (cat_id: string, pb: any) => {
async function fetchMFQuestions(cat_id: string, pb: any) {
const response = await queryClient.fetchQuery({
queryKey: ['fetchData'],
staleTime: 60 * 1000,
queryFn: async () => {
return await pb.collection('QuizMFQuestions').getList<QuizMFQuestion>(1, 9999, {
return await pb.collection('QuizMFQuestions').getList(1, 9999, {
filter: `cat_id = "${cat_id}"`,
$autoCancel: false,
});
@@ -23,6 +21,6 @@ const fetchMFQuestions = async (cat_id: string, pb: any) => {
});
return response;
};
}
export default fetchMFQuestions;

10
002_source/ionic_mobile/src/hooks/useGetVocabularyRoute.tsx
View File

@@ -1,9 +1,7 @@
import { usePocketBase } from './usePocketBase.tsx';
import type LessonsTypes from '../types/LessonsTypes';
import { usePocketBase } from './usePocketBase';
import { useQuery } from '@tanstack/react-query';
import Vocabularies from '../types/Vocabularies.tsx';
const useGetVocabularyRoute = (lessonType: string, catId: string) => {
function useGetVocabularyRoute(lessonType: string, catId: string) {
const { user, pb } = usePocketBase();
return useQuery({
queryKey: ['useGetVocabularyRoute', lessonType, catId, 'feeds', 'all', user?.id || ''],
@@ -14,7 +12,7 @@ const useGetVocabularyRoute = (lessonType: string, catId: string) => {
queryKey: ['useGetVocabularyRoute', string, string, 'feeds', 'all', string | null];
}) => {
console.log('calling useGetLessonCategoriesRoute');
return await pb.collection('Vocabularies').getList<Vocabularies[]>(1, 9999, {
return await pb.collection('Vocabularies').getList(1, 9999, {
// TODO: sort by field -> pos
sort: 'id',
filter: `lesson_type_id = "${lessonType}" && cat_id = "${catId}"`,
@@ -24,6 +22,6 @@ const useGetVocabularyRoute = (lessonType: string, catId: string) => {
},
// enabled: !!user?.id,
});
};
}
export default useGetVocabularyRoute;

2
002_source/ionic_mobile/src/hooks/useListAllLessonTypes.tsx
View File

@@ -1,4 +1,4 @@
import { usePocketBase } from './usePocketBase.tsx';
import { usePocketBase } from './usePocketBase';
import { useQuery } from '@tanstack/react-query';
import { LessonsType } from '../types/LessonsTypes';

4
002_source/ionic_mobile/src/hooks/useListQuizCRCategories.tsx
View File

@@ -1,7 +1,7 @@
// CR = ConnectiveRevision
import { usePocketBase } from './usePocketBase.tsx';
import { usePocketBase } from './usePocketBase';
import { useQuery } from '@tanstack/react-query';
import IListeningPracticeCategory from '../interfaces/IListeningPracticeCategory.tsx';
import IListeningPracticeCategory from '../interfaces/IListeningPracticeCategory';
const useListQuizCRCategories = () => {
const { user, pb } = usePocketBase();

4
002_source/ionic_mobile/src/hooks/useListQuizCRQuestionByCRCategoryId.tsx
View File

@@ -1,6 +1,6 @@
import { usePocketBase } from './usePocketBase.tsx';
import { usePocketBase } from './usePocketBase';
import { useQuery } from '@tanstack/react-query';
import { QuizCRQuestion } from '../types/QuizCRQuestion.ts/index.ts';
import { QuizCRQuestion } from '../types/QuizCRQuestion';
const useListQuizCRQuestionByCRCategoryId = (CRCategoryId: string) => {
const { user, pb } = usePocketBase();

2
002_source/ionic_mobile/src/hooks/useListQuizLPQuestionByLPCategoryId.tsx
View File

@@ -1,4 +1,4 @@
import { usePocketBase } from './usePocketBase.tsx';
import { usePocketBase } from './usePocketBase';
import { useQuery } from '@tanstack/react-query';
// import { QuizLPQuestion } from '../types/QuizLPQuestion';

2
002_source/ionic_mobile/src/hooks/useListQuizMFQuestionsByCategoryId.tsx
View File

@@ -1,6 +1,6 @@
import { QuizMFQuestion } from '../types/QuizMFQuestion';
import { usePocketBase } from './usePocketBase';
import { QueryClient } from '@tanstack/react-query';
import { QueryClient, useQuery } from '@tanstack/react-query';
const queryClient = new QueryClient({
defaultOptions: {

7
002_source/ionic_mobile/src/hooks/usePocketBase.tsx
View File

@@ -25,7 +25,12 @@ export const PocketBaseProvider = ({ children }: { children: any }) => {
const logout = useCallback(() => pb.authStore.clear(), [pb.authStore]);
return <PocketBaseContext.Provider value={{ pb, user, logout }}>{children}</PocketBaseContext.Provider>;
return (
<PocketBaseContext.Provider value={{ pb, user, logout }}>
{/* */}
{children}
</PocketBaseContext.Provider>
);
};
export const usePocketBase = () => {

107
002_source/ionic_mobile/src/i18n copy.ts Normal file
View File

@@ -0,0 +1,107 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// the translations
// (tip move them in a JSON file and import them)
const resources = {
en: {
translation: {
'Lesson': 'Lesson',
'Quiz': 'Quiz',
'Favorite': 'Favorite',
'Loading': 'Loading',
'menu.link-home': 'Home',
'menu.link-stats': 'Stats',
'home.title': 'Remove duplicate songs from your Spotify library.',
'home.description':
"Spotify Dedup cleans up your playlists and liked songs from your Spotify account. It's easy and fast.",
'home.review':
'Read what {{-supportersCount}} supporters think about Spotify Dedup on {{- linkOpen}}Buy Me a Coffee{{- linkClose}}',
'home.login-button': 'Log in with Spotify',
'meta.title': 'Spotify Dedup - Remove duplicate songs from your Spotify library',
'meta.description':
'Delete repeated songs from your Spotify playlists and liked songs automatically. Fix your music library. Quickly and easy.',
'features.find-remove.header': 'Find & remove',
'features.find-remove.body':
'Dedup checks your playlists and liked songs in {{- strongOpen}}your Spotify library{{- strongClose}}. Once Dedup finds duplicates you can remove them on a per-playlist basis.',
'features.safer.header': 'Safer',
'features.safer.body':
'Dedup will only remove {{- strongOpen}}duplicate songs{{- strongClose}}, leaving the rest of the playlist and liked songs untouched.',
'features.open-source.header': 'Open Source',
'features.open-source.body':
"You might want to have a look at the {{- linkGithubOpen}}source code on GitHub{{- linkGithubClose}}. This web app uses the {{- linkWebApiOpen}}Spotify Web API{{- linkWebApiClose}} to manage user's playlists and liked songs.",
'reviews.title': 'This is what users are saying',
'footer.author': 'Made with ♥ by {{- linkOpen}}JMPerez 👨‍💻{{- linkClose}}',
'footer.github': 'Check out the {{- linkOpen}}code on GitHub 📃{{- linkClose}}',
'footer.bmc': 'Support the project {{- linkOpen}}buying a coffee ☕{{- linkClose}}',
'bmc.button': 'Would you buy me a coffee?',
'result.duplicate.reason-same-id': 'Duplicate',
'result.duplicate.reason-same-data': 'Duplicate (same name, artist and duration)',
'result.duplicate.track': '<0>{{trackName}}</0> <2>by</2> <4>{{trackArtistName}}</4>',
'process.status.finding': 'Finding duplicates in your playlists and liked songs…',
'process.status.complete': 'Processing complete!',
'process.status.complete.body': 'Your playlists and liked songs have been processed!',
'process.status.complete.dups.body':
'Click on the {{- strongOpen}}Remove duplicates{{- strongClose}} button to get rid of duplicates in that playlist or liked songs collection.',
'process.status.complete.nodups.body': "Congrats! You don't have duplicates in your playlists nor liked songs.",
'process.reading-library': 'Going through your library, finding the playlists you own and your liked songs…',
'process.processing_one': 'Searching for duplicate songs, wait a sec. Still to process {{count}} playlist…',
'process.processing_other': 'Searching for duplicate songs, wait a sec. Still to process {{count}} playlists…',
'process.saved.title': 'liked songs in your library',
'process.saved.duplicates_one': 'This collection has {{count}} duplicate song',
'process.saved.duplicates_other': 'This collection has {{count}} duplicate songs',
'process.saved.remove-button': 'Remove duplicates from your liked songs',
'process.playlist.duplicates_one': 'This playlist has {{count}} duplicate song',
'process.playlist.duplicates_other': 'This playlist has {{count}} duplicate songs',
'process.playlist.remove-button': 'Remove duplicates from this playlist',
'process.items.removed': 'Duplicates removed',
'faq.section-title': 'Frequently asked questions',
'faq.question-1': 'What does this web application do?',
'faq.answer-1':
'Spotify Dedup helps you clean up your music libraries on Spotify by identifying and deleting duplicate songs across playlists and liked songs.',
'faq.question-2': 'How does it find duplicates?',
'faq.answer-2':
"Dedup finds duplicates based on the songs identifier, title, artist, and duration similarity. It identifies duplicates that Spotify's application does not catch.",
'faq.question-3': "How is Dedup better than Spotify's built-in duplicate detection?",
'faq.answer-3':
"Spotify's applications only warn about duplicates when adding a song to a playlit or liked songs with the exact same song identifier. However, the same song can have multiple identifiers on Spotify that both in the same release or in several ones. Dedup detects duplicates based on title, artist, and duration similarity.",
'faq.question-4': 'When duplicates are found, which songs are removed?',
'faq.answer-4': 'Dedup will keep the first song within a group of duplicate songs, and will remove the rest.',
'faq.question-5': 'Is my data safe with this web application?',
'faq.answer-5':
'Yes, this web application does not store any user data on its servers. It only requests the minimum set of permissions necessary to process your library.',
'faq.question-6': 'What permissions does this web application require?',
'faq.answer-6':
"This web application uses Spotify's authentication service to access your liked songs and playlists in your library.",
'faq.question-7': 'How has this tool been tested?',
'faq.answer-7':
'This tool has been battle-tested by thousands of users who have used it to identify duplicates in millions of playlists since 2014.',
'faq.question-8': 'Can this tool delete duplicates across multiple playlists?',
'faq.answer-8':
"This tool can identify and delete duplicates on all playlists in a library, but doesn't detect duplicates of a song across multiple playlists.",
'faq.question-9': 'How can I revoke the permissions granted to this web application?',
'faq.answer-9':
"You can revoke the permissions granted to this web application at any time on your Spotify account, under the 'Apps' section.",
'faq.question-10': 'Does this tool work with other music streaming services?',
'faq.answer-10': "No, this tool only works with Spotify through Spotify's Web API.",
},
},
};
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
// if you're using a language detector, do not define the lng option
lng: 'en',
fallbackLng: 'en',
// debug: true,
interpolation: {
escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
},
resources,
});
export default i18n;

97
002_source/ionic_mobile/src/i18n.ts
View File

@@ -1,92 +1,6 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// the translations
// (tip move them in a JSON file and import them)
const resources = {
en: {
translation: {
'Lesson': 'Lesson',
'Quiz': 'Quiz',
'Favorite': 'Favorite',
'Loading': 'Loading',
'menu.link-home': 'Home',
'menu.link-stats': 'Stats',
'home.title': 'Remove duplicate songs from your Spotify library.',
'home.description':
"Spotify Dedup cleans up your playlists and liked songs from your Spotify account. It's easy and fast.",
'home.review':
'Read what {{-supportersCount}} supporters think about Spotify Dedup on {{- linkOpen}}Buy Me a Coffee{{- linkClose}}',
'home.login-button': 'Log in with Spotify',
'meta.title': 'Spotify Dedup - Remove duplicate songs from your Spotify library',
'meta.description':
'Delete repeated songs from your Spotify playlists and liked songs automatically. Fix your music library. Quickly and easy.',
'features.find-remove.header': 'Find & remove',
'features.find-remove.body':
'Dedup checks your playlists and liked songs in {{- strongOpen}}your Spotify library{{- strongClose}}. Once Dedup finds duplicates you can remove them on a per-playlist basis.',
'features.safer.header': 'Safer',
'features.safer.body':
'Dedup will only remove {{- strongOpen}}duplicate songs{{- strongClose}}, leaving the rest of the playlist and liked songs untouched.',
'features.open-source.header': 'Open Source',
'features.open-source.body':
"You might want to have a look at the {{- linkGithubOpen}}source code on GitHub{{- linkGithubClose}}. This web app uses the {{- linkWebApiOpen}}Spotify Web API{{- linkWebApiClose}} to manage user's playlists and liked songs.",
'reviews.title': 'This is what users are saying',
'footer.author': 'Made with ♥ by {{- linkOpen}}JMPerez 👨‍💻{{- linkClose}}',
'footer.github': 'Check out the {{- linkOpen}}code on GitHub 📃{{- linkClose}}',
'footer.bmc': 'Support the project {{- linkOpen}}buying a coffee ☕{{- linkClose}}',
'bmc.button': 'Would you buy me a coffee?',
'result.duplicate.reason-same-id': 'Duplicate',
'result.duplicate.reason-same-data': 'Duplicate (same name, artist and duration)',
'result.duplicate.track': '<0>{{trackName}}</0> <2>by</2> <4>{{trackArtistName}}</4>',
'process.status.finding': 'Finding duplicates in your playlists and liked songs…',
'process.status.complete': 'Processing complete!',
'process.status.complete.body': 'Your playlists and liked songs have been processed!',
'process.status.complete.dups.body':
'Click on the {{- strongOpen}}Remove duplicates{{- strongClose}} button to get rid of duplicates in that playlist or liked songs collection.',
'process.status.complete.nodups.body': "Congrats! You don't have duplicates in your playlists nor liked songs.",
'process.reading-library': 'Going through your library, finding the playlists you own and your liked songs…',
'process.processing_one': 'Searching for duplicate songs, wait a sec. Still to process {{count}} playlist…',
'process.processing_other': 'Searching for duplicate songs, wait a sec. Still to process {{count}} playlists…',
'process.saved.title': 'liked songs in your library',
'process.saved.duplicates_one': 'This collection has {{count}} duplicate song',
'process.saved.duplicates_other': 'This collection has {{count}} duplicate songs',
'process.saved.remove-button': 'Remove duplicates from your liked songs',
'process.playlist.duplicates_one': 'This playlist has {{count}} duplicate song',
'process.playlist.duplicates_other': 'This playlist has {{count}} duplicate songs',
'process.playlist.remove-button': 'Remove duplicates from this playlist',
'process.items.removed': 'Duplicates removed',
'faq.section-title': 'Frequently asked questions',
'faq.question-1': 'What does this web application do?',
'faq.answer-1':
'Spotify Dedup helps you clean up your music libraries on Spotify by identifying and deleting duplicate songs across playlists and liked songs.',
'faq.question-2': 'How does it find duplicates?',
'faq.answer-2':
"Dedup finds duplicates based on the songs identifier, title, artist, and duration similarity. It identifies duplicates that Spotify's application does not catch.",
'faq.question-3': "How is Dedup better than Spotify's built-in duplicate detection?",
'faq.answer-3':
"Spotify's applications only warn about duplicates when adding a song to a playlit or liked songs with the exact same song identifier. However, the same song can have multiple identifiers on Spotify that both in the same release or in several ones. Dedup detects duplicates based on title, artist, and duration similarity.",
'faq.question-4': 'When duplicates are found, which songs are removed?',
'faq.answer-4': 'Dedup will keep the first song within a group of duplicate songs, and will remove the rest.',
'faq.question-5': 'Is my data safe with this web application?',
'faq.answer-5':
'Yes, this web application does not store any user data on its servers. It only requests the minimum set of permissions necessary to process your library.',
'faq.question-6': 'What permissions does this web application require?',
'faq.answer-6':
"This web application uses Spotify's authentication service to access your liked songs and playlists in your library.",
'faq.question-7': 'How has this tool been tested?',
'faq.answer-7':
'This tool has been battle-tested by thousands of users who have used it to identify duplicates in millions of playlists since 2014.',
'faq.question-8': 'Can this tool delete duplicates across multiple playlists?',
'faq.answer-8':
"This tool can identify and delete duplicates on all playlists in a library, but doesn't detect duplicates of a song across multiple playlists.",
'faq.question-9': 'How can I revoke the permissions granted to this web application?',
'faq.answer-9':
"You can revoke the permissions granted to this web application at any time on your Spotify account, under the 'Apps' section.",
'faq.question-10': 'Does this tool work with other music streaming services?',
'faq.answer-10': "No, this tool only works with Spotify through Spotify's Web API.",
},
},
};
import resources from './locale/resources';
i18n
.use(initReactI18next) // passes i18n down to react-i18next
@@ -94,11 +8,16 @@ i18n
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
resources,
//
// TODO: need to troubleshoot resource for building webpage
// resources,
//
// if you're using a language detector, do not define the lng option
lng: 'en',
fallbackLng: 'en',
//
// debug: true,
//
interpolation: {
escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
},

11
002_source/ionic_mobile/src/locale/en.ts Normal file
View File

@@ -0,0 +1,11 @@
// the translations
// (tip move them in a JSON file and import them)
const en = {
translation: {
hello: 'world',
Loading: 'loading',
lesson: 'lesson',
},
};
export default en;

5
002_source/ionic_mobile/src/locale/resources.ts Normal file
View File

@@ -0,0 +1,5 @@
import en from './en';
export default {
en,
};

50
002_source/ionic_mobile/src/pages/Lesson/LessonContainer/index.tsx
View File

@@ -49,32 +49,30 @@ const LessonContainer: React.FC<ContainerProps> = ({ lesson_type_id: lesson_type
}}
>
{selected_content.map((content: any, cat_idx: number) => (
<>
<IonButton
key={cat_idx}
style={{ width: '45vw', height: '45vw' }}
fill="clear"
onClick={() => {
// TODO: review the layout type `v` and `c`
router.push(`/lesson_word_page/v/${lesson_type_id}/${content.id}/0`, undefined, 'replace');
}}
>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div
style={{
width: '100px',
height: '100px',
backgroundImage: `url(${getImage(content.collectionId, content.id, content.cat_image)})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
borderRadius: '0.5rem',
margin: '.5rem',
}}
></div>
<span style={{ color: COLOR_TEXT }}>{content.cat_name}</span>
</div>
</IonButton>
</>
<IonButton
key={cat_idx}
style={{ width: '45vw', height: '45vw' }}
fill="clear"
onClick={() => {
// TODO: review the layout type `v` and `c`
router.push(`/lesson_word_page/v/${lesson_type_id}/${content.id}/0`, undefined, 'replace');
}}
>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div
style={{
width: '100px',
height: '100px',
backgroundImage: `url(${getImage(content.collectionId, content.id, content.cat_image)})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
borderRadius: '0.5rem',
margin: '.5rem',
}}
></div>
<span style={{ color: COLOR_TEXT }}>{content.cat_name}</span>
</div>
</IonButton>
))}
</div>
{/* <EndOfList /> */}

28
002_source/ionic_mobile/src/pages/Lesson/LessonWordPageByDb/AudioControls.tsx
View File

@@ -1,28 +0,0 @@
import { FunctionComponent, useEffect } from 'react';
import { useGlobalAudioPlayer } from 'react-use-audio-player';
import { useListeningPracticeTimeSpent } from '../../../contexts/MyIonMetric/ListeningPracticeTimeSpent';
export const AudioControls: FunctionComponent<{ audio_src: string }> = ({ audio_src }) => {
const { play, pause, playing, duration } = useGlobalAudioPlayer();
const { load, src: loadedSrc } = useGlobalAudioPlayer();
let { myIonMetricIncListeningPracticeTimeSpent } = useListeningPracticeTimeSpent();
useEffect(() => {
if (audio_src) {
load(audio_src);
}
}, [audio_src]);
useEffect(() => {
if (loadedSrc) {
}
}, [loadedSrc]);
useEffect(() => {
if (playing) {
myIonMetricIncListeningPracticeTimeSpent(duration);
}
}, [playing]);
return <></>;
};

319
002_source/ionic_mobile/src/pages/Lesson/LessonWordPageByDb/index.tsx
View File

@@ -1,319 +0,0 @@
import { IonButton, IonButtons, IonContent, IonIcon, IonModal, IonPage, IonToolbar, useIonRouter } from '@ionic/react';
import './style.css';
import {
arrowBackCircleOutline,
chevronBack,
chevronForward,
close,
heart,
heartOutline,
play,
volumeHighOutline,
} from 'ionicons/icons';
import { useEffect, useRef, useState } from 'react';
//
import Markdown from 'react-markdown';
import { useParams } from 'react-router';
import { useGlobalAudioPlayer } from 'react-use-audio-player';
import remarkGfm from 'remark-gfm';
import { LoadingScreen } from '../../../components/LoadingScreen';
import RemoveFavoritePrompt from '../../../components/RemoveFavoritePrompt';
import { LESSON_LINK } from '../../../constants';
import { useMyIonFavorite } from '../../../contexts/MyIonFavorite';
//
import { useMyIonStore } from '../../../contexts/MyIonStore';
import ILesson from '../../../interfaces/ILesson';
import ILessonCategory from '../../../interfaces/ILessonCategory';
import IWordCard from '../../../interfaces/IWordCard';
import { getFavLessonVocabularyLink, getLessonVocabularyLink } from '../getLessonWordLink';
import { AudioControls } from './AudioControls';
const LessonWordPageByDb: React.FC = () => {
const [loading, setLoading] = useState(true);
const router = useIonRouter();
const modal = useRef<HTMLIonModalElement>(null);
const { lesson_idx, cat_idx, word_idx } = useParams<{ lesson_idx: string; cat_idx: string; word_idx: string }>();
const [open_remove_modal, setOpenRemoveModal] = useState(false);
const [lesson_info, setLessonInfo] = useState<ILesson | undefined>(undefined);
const [cat_info, setCatInfo] = useState<ILessonCategory | undefined>(undefined);
const [word_info, setWordInfo] = useState<IWordCard | undefined>(undefined);
// const { play: play_word, playing } = useGlobalAudioPlayer();
const { myIonStoreAddFavoriteVocabulary, myIonStoreRemoveFavoriteVocabulary, myIonStoreFindInFavoriteVocabulary } =
useMyIonFavorite();
let [favorite_address, setFavoriteAddress] = useState(getFavLessonVocabularyLink(lesson_idx, cat_idx, word_idx));
useEffect(() => {
setFavoriteAddress(getFavLessonVocabularyLink(lesson_idx, cat_idx, word_idx));
// if (lesson_contents.length > 0) {
// let lesson_content: ILesson = lesson_contents[parseInt(lesson_idx)];
// let category_content: ILessonCategory = lesson_content.content[parseInt(cat_idx)];
// let word_content: IWordCard = category_content.content[parseInt(word_idx)];
// setWordInfo(word_content);
// }
}, [lesson_idx, cat_idx, word_idx]);
function dismiss() {
setOpenRemoveModal(false);
}
const [isOpen, setIsOpen] = useState(false);
let { lesson_contents } = useMyIonStore();
useEffect(() => {
// NOTES: lesson_content == [] during loading
if (lesson_contents.length > 0) {
let lesson_content: ILesson = lesson_contents[parseInt(lesson_idx)];
let category_content: ILessonCategory = lesson_content.content[parseInt(cat_idx)];
let word_content: IWordCard = category_content.content[parseInt(word_idx)];
setLessonInfo(lesson_content);
setCatInfo(category_content);
setWordInfo(word_content);
setLoading(false);
}
}, [lesson_contents]);
let [in_fav, setInFav] = useState(false);
const isInFavorite = async (string_to_search: string) => {
let result = await myIonStoreFindInFavoriteVocabulary(string_to_search);
setInFav(result);
};
const addToFavorite = async (string_to_add: string) => {
await myIonStoreAddFavoriteVocabulary(string_to_add);
await isInFavorite(string_to_add);
setInFav(!in_fav);
};
function handleUserRemoveFavorite() {
setOpenRemoveModal(true);
}
const removeFromFavorite = async (string_to_remove: string) => {
await myIonStoreRemoveFavoriteVocabulary(string_to_remove);
await isInFavorite(string_to_remove);
};
useEffect(() => {
(async () => {
await isInFavorite(getFavLessonVocabularyLink(lesson_idx, cat_idx, word_idx));
})();
}, [lesson_idx, cat_idx, word_idx]);
return <>should not see me</>;
if (lesson_info == undefined) return <LoadingScreen />;
if (!cat_info || !word_info) return <LoadingScreen />;
return (
<>
<IonPage>
<IonContent fullscreen>
<div style={{ position: 'fixed' }}>
<IonButton
size="large"
shape="round"
fill="clear"
color={'dark'}
// href={`${LESSON_LINK}/a/${lesson_info.name}`}
onClick={() => {
router.push(`${LESSON_LINK}/a/${lesson_info.name}`);
}}
>
<IonIcon size="large" icon={arrowBackCircleOutline} />
</IonButton>
</div>
<div style={{ marginTop: '3rem' }}>
<div style={{ textAlign: 'center', fontSize: '1.2rem' }}>{cat_info.cat_name}</div>
</div>
<div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
{/* <LessonContainer name='Tab 1 page' /> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<div>
<IonButton
size="large"
shape="round"
fill="clear"
color={parseInt(word_idx) === 0 ? 'medium' : 'dark'}
disabled={parseInt(word_idx) === 0}
// href={getLessonVocabularyLink(lesson_idx, cat_idx, Math.max(0, parseInt(word_idx) - 1).toString())}
onClick={() => {
router.push(
getLessonVocabularyLink(lesson_idx, cat_idx, Math.max(0, parseInt(word_idx) - 1).toString()),
);
}}
>
<IonIcon slot="icon-only" size="large" icon={chevronBack}></IonIcon>
</IonButton>
</div>
<div
style={{
width: '66vw',
height: '66vw',
backgroundImage: `url(${word_info.image_url})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
borderRadius: '0.5rem',
margin: '.5rem',
}}
></div>
<div>
<IonButton
size="large"
shape="round"
fill="clear"
color={parseInt(word_idx) === cat_info.content.length - 1 ? 'medium' : 'dark'}
disabled={parseInt(word_idx) === cat_info.content.length - 1}
// href={getLessonVocabularyLink(
// lesson_idx,
// cat_idx,
// Math.min(cat_info.content.length - 1, parseInt(word_idx) + 1).toString()
// )}
onClick={() => {
router.push(
getLessonVocabularyLink(
lesson_idx,
cat_idx,
Math.min(cat_info.content.length - 1, parseInt(word_idx) + 1).toString(),
),
);
}}
>
<IonIcon slot="icon-only" size="large" icon={chevronForward}></IonIcon>
</IonButton>
</div>
</div>
<div style={{ marginTop: '1rem' }}>
<div
style={{
width: '2rem',
height: '2rem',
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '1rem',
backgroundColor: 'black',
color: 'white',
}}
>
{parseInt(word_idx) + 1}
</div>
</div>
<div>
<div
style={{ display: 'flex', flexDirection: 'row', gap: '1rem', alignItems: 'center', marginTop: '1rem' }}
>
<div>
<AudioControls audio_src={getFile(word_info.id, word_info.sound)} />
<IonButton
size="large"
color="dark"
shape="round"
fill="clear"
disabled={playing}
onClick={() => (playing ? null : play_word())}
>
<IonIcon
size="large"
color="dark"
slot="icon-only"
icon={playing ? play : volumeHighOutline}
></IonIcon>
</IonButton>
</div>
<div style={{ fontWeight: 'bold', fontSize: '1.5rem' }}>{word_info.word}</div>
<div>
<IonButton
color="danger"
shape="round"
size="large"
fill="clear"
// id='open-modal'
onClick={() => {
in_fav ? handleUserRemoveFavorite() : addToFavorite(favorite_address);
}}
>
<IonIcon
size="large"
color="danger"
slot="icon-only"
icon={in_fav ? heart : heartOutline}
></IonIcon>
</IonButton>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '1rem' }}>
<div style={{ fontWeight: 'bold', fontSize: '1.3rem' }}>{word_info.word_c}</div>
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5rem',
alignItems: 'center',
marginTop: '2rem',
}}
>
<Markdown remarkPlugins={[remarkGfm]}>{word_info.sample_e}</Markdown>
<Markdown remarkPlugins={[remarkGfm]}>{word_info.sample_c}</Markdown>
</div>
</div>
</IonContent>
</IonPage>
{/* */}
<IonModal isOpen={open_remove_modal} id="example-modal" ref={modal}>
<IonContent>
<IonToolbar>
<IonButtons slot="end">
<IonButton onClick={() => dismiss()} shape="round" fill="clear">
<IonIcon size="large" slot="icon-only" icon={close}></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
<div style={{ marginTop: '2rem' }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div>Are you sure to remove favorite ?</div>
<div style={{ display: 'flex', flexDirection: 'row', gap: '1rem', marginTop: '1rem' }}>
<div>
<IonButton color="dark" onClick={() => dismiss()} fill="outline">
Cancel
</IonButton>
</div>
<div>
<IonButton
onClick={() => {
removeFromFavorite(getFavLessonVocabularyLink(lesson_idx, cat_idx, word_idx));
setIsOpen(true);
dismiss();
}}
fill="solid"
color="danger"
>
Remove
</IonButton>
</div>
</div>
</div>
</div>
</IonContent>
</IonModal>
<RemoveFavoritePrompt open={isOpen} setIsOpen={setIsOpen} />
</>
);
};
export default LessonWordPageByDb;

31
002_source/ionic_mobile/src/pages/Lesson/LessonWordPageByDb/style.css
View File

@@ -1,31 +0,0 @@
.bold {
font-weight: bold;
}
ion-modal#example-modal {
--height: 33%;
--width: 80%;
--border-radius: 16px;
--box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
ion-modal#example-modal::part(backdrop) {
/* background: rgba(209, 213, 219); */
opacity: 1;
}
ion-modal#example-modal ion-toolbar {
/* --background: rgb(14 116 144); */
/* --color: white; */
--color: black;
}
ion-toast.custom-toast::part(message) {
text-align: center;
font-size: 1.5rem;
color: rgba(0, 0, 0, 0.9);
}
ion-toast.custom-toast::part(container) {
bottom: 100px;
}

19
002_source/ionic_mobile/src/pages/Lesson/WordPage/index.tsx
View File

@@ -24,6 +24,7 @@ import IWordCard from '../../../interfaces/IWordCard';
import { getFavLessonVocabularyLink, getLessonVocabularyLinkString } from '../../Lesson/getLessonWordLink';
import { AudioControls } from './AudioControls';
import useGetVocabularyRoute from '../../../hooks/useGetVocabularyRoute';
import { Vocabulary } from '../../../types/Vocabularies';
const WordPage: React.FC = () => {
const [loading, setLoading] = useState<boolean>(true);
@@ -67,12 +68,11 @@ const WordPage: React.FC = () => {
let [lastWord, setLastWord] = useState<boolean>(false);
useEffect(() => {
if (tempResult) {
if (tempResult && tempResult.items.length > 0) {
let temp1 = tempResult.items[parseInt(word_idx)] as unknown as Vocabulary;
try {
setCatInfo(tempResult.items[parseInt(word_idx)].expand.cat_id as unknown as ILessonCategory);
//
setWordInfo(tempResult.items[parseInt(word_idx)] as unknown as IWordCard);
//
setCatInfo(temp1.expand.cat_id as unknown as ILessonCategory);
setWordInfo(temp1 as unknown as IWordCard);
setLastWord(parseInt(word_idx) === tempResult.items.length - 1);
} catch (error) {
console.error(error);
@@ -81,12 +81,11 @@ const WordPage: React.FC = () => {
}, [lesson_idx, cat_idx, word_idx]);
useEffect(() => {
// console.log({ lesson_idx, cat_idx, word_idx });
if (tempResult) {
if (tempResult && tempResult.items.length > 0) {
let temp1 = tempResult.items[parseInt(word_idx)] as unknown as Vocabulary;
try {
setCatInfo(tempResult.items[parseInt(word_idx)].expand.cat_id as unknown as ILessonCategory);
//
setWordInfo(tempResult.items[parseInt(word_idx)] as unknown as IWordCard);
setCatInfo(temp1.expand.cat_id as unknown as ILessonCategory);
setWordInfo(temp1 as unknown as IWordCard);
//
setLastWord(parseInt(word_idx) === tempResult.items.length - 1);
} catch (error) {

4
002_source/ionic_mobile/src/pages/Lesson/index.tsx
View File

@@ -70,7 +70,9 @@ const Lesson: React.FC = () => {
) : (
<></>
)}
<IonTitle>{t('lesson')}</IonTitle>
<IonTitle>
{t('lesson')} {t('hello')}
</IonTitle>
</IonToolbar>
</IonHeader>

9
002_source/ionic_mobile/src/types/Vocabularies.tsx
View File

@@ -1,5 +1,6 @@
// RULES: interface for handling vocabulary record
type Vocabulary = {
export type Vocabulary = {
//
id: string;
collectionId: string;
@@ -14,11 +15,7 @@ type Vocabulary = {
image: File[];
sound: File[];
//
expand?: {
expand: {
cat_id: LessonCategory;
};
};
type Vocabularies = Vocabulary[];
export default Vocabularies;

4
002_source/ionic_mobile/vite.config.ts
View File

@@ -10,6 +10,6 @@ export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.ts'
}
setupFiles: './src/setupTests.ts',
},
});