Application Android et IOS pour l'amicale des élèves
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

DebugScreen.tsx 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import {View} from 'react-native';
  21. import {
  22. Button,
  23. List,
  24. Subheading,
  25. TextInput,
  26. Title,
  27. withTheme,
  28. } from 'react-native-paper';
  29. import {Modalize} from 'react-native-modalize';
  30. import CustomModal from '../../components/Overrides/CustomModal';
  31. import AsyncStorageManager from '../../managers/AsyncStorageManager';
  32. import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
  33. type PreferenceItemType = {
  34. key: string;
  35. default: string;
  36. current: string;
  37. };
  38. type PropsType = {
  39. theme: ReactNativePaper.Theme;
  40. };
  41. type StateType = {
  42. modalCurrentDisplayItem: PreferenceItemType | null;
  43. currentPreferences: Array<PreferenceItemType>;
  44. };
  45. /**
  46. * Class defining the Debug screen.
  47. * This screen allows the user to get and modify information on the app/device.
  48. */
  49. class DebugScreen extends React.Component<PropsType, StateType> {
  50. modalRef: Modalize | null;
  51. modalInputValue: string;
  52. /**
  53. * Copies user preferences to state for easier manipulation
  54. *
  55. * @param props
  56. */
  57. constructor(props: PropsType) {
  58. super(props);
  59. this.modalRef = null;
  60. this.modalInputValue = '';
  61. const currentPreferences: Array<PreferenceItemType> = [];
  62. Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => {
  63. const newObject: PreferenceItemType = {...object};
  64. newObject.current = AsyncStorageManager.getString(newObject.key);
  65. currentPreferences.push(newObject);
  66. });
  67. this.state = {
  68. modalCurrentDisplayItem: null,
  69. currentPreferences,
  70. };
  71. }
  72. /**
  73. * Gets the edit modal content
  74. *
  75. * @return {*}
  76. */
  77. getModalContent() {
  78. const {props, state} = this;
  79. let key = '';
  80. let defaultValue = '';
  81. let current = '';
  82. if (state.modalCurrentDisplayItem) {
  83. key = state.modalCurrentDisplayItem.key;
  84. defaultValue = state.modalCurrentDisplayItem.default;
  85. defaultValue = state.modalCurrentDisplayItem.default;
  86. current = state.modalCurrentDisplayItem.current;
  87. }
  88. return (
  89. <View
  90. style={{
  91. flex: 1,
  92. padding: 20,
  93. }}>
  94. <Title>{key}</Title>
  95. <Subheading>Default: {defaultValue}</Subheading>
  96. <Subheading>Current: {current}</Subheading>
  97. <TextInput
  98. label="New Value"
  99. onChangeText={(text: string) => {
  100. this.modalInputValue = text;
  101. }}
  102. />
  103. <View
  104. style={{
  105. flexDirection: 'row',
  106. marginTop: 10,
  107. }}>
  108. <Button
  109. mode="contained"
  110. dark
  111. color={props.theme.colors.success}
  112. onPress={() => {
  113. this.saveNewPrefs(key, this.modalInputValue);
  114. }}>
  115. Save new value
  116. </Button>
  117. <Button
  118. mode="contained"
  119. dark
  120. color={props.theme.colors.danger}
  121. onPress={() => {
  122. this.saveNewPrefs(key, defaultValue);
  123. }}>
  124. Reset to default
  125. </Button>
  126. </View>
  127. </View>
  128. );
  129. }
  130. getRenderItem = ({item}: {item: PreferenceItemType}) => {
  131. return (
  132. <List.Item
  133. title={item.key}
  134. description="Click to edit"
  135. onPress={() => {
  136. this.showEditModal(item);
  137. }}
  138. />
  139. );
  140. };
  141. /**
  142. * Callback used when receiving the modal ref
  143. *
  144. * @param ref
  145. */
  146. onModalRef = (ref: Modalize) => {
  147. this.modalRef = ref;
  148. };
  149. /**
  150. * Shows the edit modal
  151. *
  152. * @param item
  153. */
  154. showEditModal(item: PreferenceItemType) {
  155. this.setState({
  156. modalCurrentDisplayItem: item,
  157. });
  158. if (this.modalRef) {
  159. this.modalRef.open();
  160. }
  161. }
  162. /**
  163. * Finds the index of the given key in the preferences array
  164. *
  165. * @param key THe key to find the index of
  166. * @returns {number}
  167. */
  168. findIndexOfKey(key: string): number {
  169. const {currentPreferences} = this.state;
  170. let index = -1;
  171. for (let i = 0; i < currentPreferences.length; i += 1) {
  172. if (currentPreferences[i].key === key) {
  173. index = i;
  174. break;
  175. }
  176. }
  177. return index;
  178. }
  179. /**
  180. * Saves the new value of the given preference
  181. *
  182. * @param key The pref key
  183. * @param value The pref value
  184. */
  185. saveNewPrefs(key: string, value: string) {
  186. this.setState((prevState: StateType): {
  187. currentPreferences: Array<PreferenceItemType>;
  188. } => {
  189. const currentPreferences = [...prevState.currentPreferences];
  190. currentPreferences[this.findIndexOfKey(key)].current = value;
  191. return {currentPreferences};
  192. });
  193. AsyncStorageManager.set(key, value);
  194. if (this.modalRef) {
  195. this.modalRef.close();
  196. }
  197. }
  198. render() {
  199. const {state} = this;
  200. return (
  201. <View>
  202. <CustomModal onRef={this.onModalRef}>
  203. {this.getModalContent()}
  204. </CustomModal>
  205. <CollapsibleFlatList
  206. data={state.currentPreferences}
  207. extraData={state.currentPreferences}
  208. renderItem={this.getRenderItem}
  209. />
  210. </View>
  211. );
  212. }
  213. }
  214. export default withTheme(DebugScreen);