99import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism" ;
1010
1111import { highlighterStyles } from "@consts/highlighter-styles" ;
12+ import { useLanguages } from "@hooks/useLanguages" ;
1213import {
1314 AppState ,
1415 HighlighterStyleType ,
@@ -30,7 +31,7 @@ const defaultHighlighterStyle: HighlighterStyleType = {
3031// TODO: add custom loading and error handling
3132const defaultState : AppState = {
3233 language : defaultLanguage ,
33- setLanguage : ( ) => { } ,
34+ toggleLanguage : ( ) => { } ,
3435 category : "" ,
3536 setCategory : ( ) => { } ,
3637 snippet : null ,
@@ -46,6 +47,8 @@ const AppContext = createContext<AppState>(defaultState);
4647export const AppProvider : FC < { children : React . ReactNode } > = ( {
4748 children,
4849} ) => {
50+ const { fetchedLanguages } = useLanguages ( ) ;
51+ 4952 const [ language , setLanguage ] = useState < LanguageType > ( defaultLanguage ) ;
5053 const [ category , setCategory ] = useState < string > ( "" ) ;
5154 const [ snippet , setSnippet ] = useState < SnippetType | null > ( null ) ;
@@ -65,6 +68,11 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
6568 : defaultHighlighterStyle
6669 ) ;
6770
71+ const toggleLanguage = ( newLanguage : LanguageType ) => {
72+ setLanguage ( newLanguage ) ;
73+ localStorage . setItem ( "languageName" , newLanguage . lang ) ;
74+ } ;
75+ 6876 const toggleTheme = useCallback ( ( ) => {
6977 const newTheme = theme === "dark" ? "light" : "dark" ;
7078 setTheme ( newTheme ) ;
@@ -79,6 +87,29 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
7987 localStorage . setItem ( "highlighterStyleName" , newHighlighterStyle . name ) ;
8088 } ;
8189
90+ /**
91+ * check if the language is saved in local storage
92+ */
93+ useEffect ( ( ) => {
94+ if ( fetchedLanguages . length === 0 ) {
95+ return ;
96+ }
97+ 98+ const languageName = localStorage . getItem ( "languageName" ) ;
99+ if ( ! languageName ) {
100+ return ;
101+ }
102+ 103+ const selected = fetchedLanguages . find (
104+ ( lang ) => lang . lang === languageName
105+ ) ;
106+ if ( ! selected ) {
107+ return ;
108+ }
109+ 110+ setLanguage ( selected ) ;
111+ } , [ fetchedLanguages ] ) ;
112+ 82113 /**
83114 * set the theme on initial load
84115 */
@@ -91,7 +122,7 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
91122 < AppContext . Provider
92123 value = { {
93124 language,
94- setLanguage ,
125+ toggleLanguage ,
95126 category,
96127 setCategory,
97128 snippet,
0 commit comments