Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
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 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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 React, { useRef, useState } from 'react';
  20. import { StyleSheet, View } from 'react-native';
  21. import {
  22. Button,
  23. List,
  24. Subheading,
  25. TextInput,
  26. Title,
  27. useTheme,
  28. } from 'react-native-paper';
  29. import { Modalize } from 'react-native-modalize';
  30. import CustomModal from '../../components/Overrides/CustomModal';
  31. import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
  32. import { usePreferences } from '../../context/preferencesContext';
  33. import {
  34. defaultPreferences,
  35. GeneralPreferenceKeys,
  36. isValidGeneralPreferenceKey,
  37. } from '../../utils/asyncStorage';
  38. type PreferenceItemType = {
  39. key: string;
  40. default: string;
  41. current: string;
  42. };
  43. const styles = StyleSheet.create({
  44. container: {
  45. flex: 1,
  46. padding: 20,
  47. },
  48. buttonContainer: {
  49. flexDirection: 'row',
  50. marginTop: 10,
  51. },
  52. });
  53. /**
  54. * Class defining the Debug screen.
  55. * This screen allows the user to get and modify information on the app/device.
  56. */
  57. function DebugScreen() {
  58. const theme = useTheme();
  59. const { preferences, updatePreferences } = usePreferences();
  60. const modalRef = useRef<Modalize>(null);
  61. const [modalInputValue, setModalInputValue] = useState<string>('');
  62. const [modalCurrentDisplayItem, setModalCurrentDisplayItem] =
  63. useState<PreferenceItemType | null>(null);
  64. const currentPreferences: Array<PreferenceItemType> = [];
  65. Object.values(GeneralPreferenceKeys).forEach((key) => {
  66. const newObject: PreferenceItemType = {
  67. key: key,
  68. current: preferences[key],
  69. default: defaultPreferences[key],
  70. };
  71. currentPreferences.push(newObject);
  72. });
  73. const getModalContent = () => {
  74. let key = '';
  75. let defaultValue = '';
  76. let current = '';
  77. if (modalCurrentDisplayItem) {
  78. key = modalCurrentDisplayItem.key;
  79. defaultValue = modalCurrentDisplayItem.default;
  80. current = modalCurrentDisplayItem.current;
  81. }
  82. return (
  83. <View style={styles.container}>
  84. <Title>{key}</Title>
  85. <Subheading>Default: {defaultValue}</Subheading>
  86. <Subheading>Current: {current}</Subheading>
  87. <TextInput label={'New Value'} onChangeText={setModalInputValue} />
  88. <View style={styles.buttonContainer}>
  89. <Button
  90. mode="contained"
  91. dark
  92. color={theme.colors.success}
  93. onPress={() => {
  94. saveNewPrefs(key, modalInputValue);
  95. }}
  96. >
  97. Save new value
  98. </Button>
  99. <Button
  100. mode="contained"
  101. dark
  102. color={theme.colors.danger}
  103. onPress={() => {
  104. saveNewPrefs(key, defaultValue);
  105. }}
  106. >
  107. Reset to default
  108. </Button>
  109. </View>
  110. </View>
  111. );
  112. };
  113. const getRenderItem = ({ item }: { item: PreferenceItemType }) => {
  114. return (
  115. <List.Item
  116. title={item.key}
  117. description="Click to edit"
  118. onPress={() => {
  119. showEditModal(item);
  120. }}
  121. />
  122. );
  123. };
  124. const showEditModal = (item: PreferenceItemType) => {
  125. setModalCurrentDisplayItem(item);
  126. if (modalRef.current) {
  127. modalRef.current.open();
  128. }
  129. };
  130. const saveNewPrefs = (key: string, value: string) => {
  131. if (isValidGeneralPreferenceKey(key)) {
  132. updatePreferences(key, value);
  133. }
  134. if (modalRef.current) {
  135. modalRef.current.close();
  136. }
  137. };
  138. return (
  139. <View>
  140. <CustomModal ref={modalRef}>{getModalContent()}</CustomModal>
  141. <CollapsibleFlatList
  142. data={currentPreferences}
  143. extraData={currentPreferences}
  144. renderItem={getRenderItem}
  145. />
  146. </View>
  147. );
  148. }
  149. export default DebugScreen;