diff --git a/android/app/build.gradle b/android/app/build.gradle index f0d8646..9593adb 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -79,7 +79,7 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 - versionName "0.0.3" + versionName "0.0.4" } signingConfigs { debug { diff --git a/package-lock.json b/package-lock.json index e8f3ec2..3241385 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@karaolidis/terminally-online", - "version": "0.0.3", + "version": "0.0.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@karaolidis/terminally-online", - "version": "0.0.3", + "version": "0.0.4", "hasInstallScript": true, "dependencies": { "@bankify/redux-persist-realm": "^0.1.3", diff --git a/package.json b/package.json index bf894a1..ae3b2ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@karaolidis/terminally-online", - "version": "0.0.3", + "version": "0.0.4", "private": true, "scripts": { "postinstall": "patch-package", diff --git a/src/components/memes/memesHeader.tsx b/src/components/memes/memesHeader.tsx index 87c3af9..e709cd2 100644 --- a/src/components/memes/memesHeader.tsx +++ b/src/components/memes/memesHeader.tsx @@ -41,10 +41,12 @@ const memesHeaderStyles = StyleSheet.create({ const MemesHeader = ({ search, setSearch, + autoFocus, ...props }: { search: string; setSearch: (search: string) => void; + autoFocus: boolean; } & ComponentProps) => { const { colors } = useTheme(); const sort = useSelector((state: RootState) => state.memes.sort); @@ -86,6 +88,7 @@ const MemesHeader = ({ placeholder="Search Memes" value={search} onChangeText={setSearch} + autoFocus={autoFocus} /> diff --git a/src/components/tags/tagsHeader.tsx b/src/components/tags/tagsHeader.tsx index 918cca7..2fc25f9 100644 --- a/src/components/tags/tagsHeader.tsx +++ b/src/components/tags/tagsHeader.tsx @@ -25,10 +25,12 @@ const tagsHeaderStyles = StyleSheet.create({ const TagsHeader = ({ search, setSearch, + autoFocus, ...props }: { search: string; setSearch: (search: string) => void; + autoFocus: boolean; } & ComponentProps) => { const sort = useSelector((state: RootState) => state.tags.sort); const sortDirection = useSelector( @@ -60,6 +62,7 @@ const TagsHeader = ({ onChangeText={(value: string) => { setSearch(value); }} + autoFocus={autoFocus} /> { const navVisisble = useSelector( (state: RootState) => state.navigation.navVisible, ); + const autoFocus = useSelector( + (state: RootState) => state.settings.autoFocusMemesSearch, + ); const dispatch = useDispatch(); const [flashListPadding, setFlashListPadding] = useState(0); @@ -141,6 +144,7 @@ const Memes = () => { { setFlashListPadding( event.nativeEvent.layout.height + diff --git a/src/screens/settings.tsx b/src/screens/settings.tsx index 0487257..89e7daf 100644 --- a/src/screens/settings.tsx +++ b/src/screens/settings.tsx @@ -13,6 +13,8 @@ import { useDispatch, useSelector } from 'react-redux'; import type {} from 'redux-thunk/extend-redux'; import { RootState, + setAutofocusMemesSearch, + setAutofocusTagsSearch, setGridColumns, setMasonryColumns, setNoMedia, @@ -34,6 +36,12 @@ const settingsStyles = StyleSheet.create({ marginBottom: 15, paddingHorizontal: '2%', }, + autoFocusSwitch: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingHorizontal: '2%', + marginBottom: 15, + }, hideMediaSwitch: { flexDirection: 'row', justifyContent: 'space-between', @@ -44,6 +52,12 @@ const settingsStyles = StyleSheet.create({ const Settings = () => { const { colors } = useTheme(); const noMedia = useSelector((state: RootState) => state.settings.noMedia); + const autoFocusMemesSearch = useSelector( + (state: RootState) => state.settings.autoFocusMemesSearch, + ); + const autoFocusTagsSearch = useSelector( + (state: RootState) => state.settings.autoFocusTagsSearch, + ); const masonryColumns = useSelector( (state: RootState) => state.settings.masonryColumns, ); @@ -89,6 +103,24 @@ const Settings = () => { ]}> Views + + Autofocus Memes Searchbar + { + void dispatch(setAutofocusMemesSearch(value)); + }} + /> + + + Autofocus Tags Searchbar + { + void dispatch(setAutofocusTagsSearch(value)); + }} + /> + Masonry Columns diff --git a/src/screens/tags.tsx b/src/screens/tags.tsx index e14be26..46aa9b9 100644 --- a/src/screens/tags.tsx +++ b/src/screens/tags.tsx @@ -44,6 +44,9 @@ const Tags = () => { const navVisisble = useSelector( (state: RootState) => state.navigation.navVisible, ); + const autoFocus = useSelector( + (state: RootState) => state.settings.autoFocusTagsSearch, + ); const dispatch = useDispatch(); const [flashListPadding, setFlashListPadding] = useState(0); @@ -114,6 +117,7 @@ const Tags = () => { { setFlashListPadding(event.nativeEvent.layout.height); }} diff --git a/src/state/index.ts b/src/state/index.ts index 89dc8c2..2e8cf06 100644 --- a/src/state/index.ts +++ b/src/state/index.ts @@ -54,6 +54,8 @@ export { type SettingsState, setStorageUri, setNoMedia, + setAutofocusMemesSearch, + setAutofocusTagsSearch, setMasonryColumns, setGridColumns, validateSettings, diff --git a/src/state/settings.ts b/src/state/settings.ts index 699acaf..687cf6a 100644 --- a/src/state/settings.ts +++ b/src/state/settings.ts @@ -11,6 +11,8 @@ import { RootState } from '.'; interface SettingsState { storageUri: string | undefined; noMedia: boolean; + autoFocusMemesSearch: boolean; + autoFocusTagsSearch: boolean; masonryColumns: 1 | 2 | 3 | 4; gridColumns: 1 | 2 | 3 | 4; } @@ -18,6 +20,8 @@ interface SettingsState { const initialState: SettingsState = { storageUri: undefined, noMedia: false, + autoFocusMemesSearch: false, + autoFocusTagsSearch: false, masonryColumns: 2, gridColumns: 3, }; @@ -32,6 +36,12 @@ const settingsSlice = createSlice({ setNoMedia: (state, action: PayloadAction) => { state.noMedia = action.payload; }, + setAutofocusMemesSearch: (state, action: PayloadAction) => { + state.autoFocusMemesSearch = action.payload; + }, + setAutofocusTagsSearch: (state, action: PayloadAction) => { + state.autoFocusTagsSearch = action.payload; + }, setMasonryColumns: (state, action: PayloadAction<1 | 2 | 3 | 4>) => { state.masonryColumns = action.payload; }, @@ -41,8 +51,14 @@ const settingsSlice = createSlice({ }, }); -const { setStorageUri, setNoMedia, setMasonryColumns, setGridColumns } = - settingsSlice.actions; +const { + setStorageUri, + setNoMedia, + setAutofocusMemesSearch, + setAutofocusTagsSearch, + setMasonryColumns, + setGridColumns, +} = settingsSlice.actions; const updateStorageUri = createAsyncThunk( 'settings/updateStorageUri', @@ -122,6 +138,8 @@ export { type SettingsState, updateStorageUri as setStorageUri, updateNoMedia as setNoMedia, + setAutofocusMemesSearch, + setAutofocusTagsSearch, setMasonryColumns, setGridColumns, validateSettings,