nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Begin upgrade to react-navigation 6

This commit is contained in:
Nat 2022-05-09 15:04:11 -07:00
parent 3920ddf20e
commit b305c3d847
28 changed files with 540 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
package-lock.json generated
View File

@ -7,9 +7,10 @@
"dependencies": { "dependencies": {
"@react-native-async-storage/async-storage": "^1.13.0", "@react-native-async-storage/async-storage": "^1.13.0",
"@react-native-community/masked-view": "0.1.10", "@react-native-community/masked-view": "0.1.10",
"@react-navigation/core": "5.2.3", "@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "5.1.1", "@react-navigation/core": "^6.2.1",
"@react-navigation/stack": "5.2.3", "@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"expo": "^41.0.0", "expo": "^41.0.0",
"expo-image-picker": "~10.1.4", "expo-image-picker": "~10.1.4",
"expo-linking": "~2.2.3", "expo-linking": "~2.2.3",
@ -28,7 +29,6 @@
"react-native-screens": "~3.0.0", "react-native-screens": "~3.0.0",
"react-native-tab-view": "^2.16.0", "react-native-tab-view": "^2.16.0",
"react-native-web": "~0.13.12", "react-native-web": "~0.13.12",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2" "react-navigation-stack": "^2.8.2"
}, },
"devDependencies": { "devDependencies": {
@ -3710,58 +3710,127 @@
"react-native": ">=0.57" "react-native": ">=0.57"
} }
}, },
"node_modules/@react-navigation/core": { "node_modules/@react-navigation/bottom-tabs": {
"version": "5.2.3", "version": "6.3.1",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.2.3.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.1.tgz",
"integrity": "sha512-iWSj7Eep4qWuEZ/LYSSsK9vs0AskUkIQM3+SmeZJxIqOIQw7nVQZ4sa4RbYbX/PxOBbZ/SOOKcCNuZ7zilve5A==", "integrity": "sha512-sL9F4WMhhR6I9bE7bpsPVHnK1cN9doaFHAuy5YmD+Sw6OyO0TAmNgQFx4xZWqboA5ZwSkN0tWcRCr6wGXaRRag==",
"dependencies": { "dependencies": {
"@react-navigation/routers": "^5.1.1", "@react-navigation/elements": "^1.3.3",
"escape-string-regexp": "^2.0.0", "color": "^3.1.3",
"query-string": "^6.11.1", "warn-once": "^0.1.0"
"react-is": "^16.13.0", },
"shortid": "^2.2.15", "peerDependencies": {
"use-subscription": "^1.4.0" "@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@react-navigation/core": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.1.tgz",
"integrity": "sha512-3mjS6ujwGnPA/BC11DN9c2c42gFld6B6dQBgDedxP2djceXESpY2kVTTwISDHuqFnF7WjvRjsrDu3cKBX+JosA==",
"dependencies": {
"@react-navigation/routers": "^6.1.0",
"escape-string-regexp": "^4.0.0",
"nanoid": "^3.1.23",
"query-string": "^7.0.0",
"react-is": "^16.13.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": "*" "react": "*"
} }
}, },
"node_modules/@react-navigation/native": { "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
"version": "5.1.1", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.1.1.tgz", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-AzHuO5egm5+JT+M37imyVDe6vfY3mr+HO3FpRTAvXuJabDV5flcLUTIiLuvmd3iyNRFJFR6bCbDirwwmVWMAXg==", "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@react-navigation/core/node_modules/query-string": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
"integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
"dependencies": { "dependencies": {
"@react-navigation/core": "^5.2.3" "decode-uri-component": "^0.2.0",
"filter-obj": "^1.1.0",
"split-on-first": "^1.0.0",
"strict-uri-encode": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@react-navigation/elements": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.3.tgz",
"integrity": "sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw==",
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 3.0.0"
}
},
"node_modules/@react-navigation/native": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.10.tgz",
"integrity": "sha512-H6QhLeiieGxNcAJismIDXIPZgf1myr7Og8v116tezIGmincJTOcWavTd7lPHGnMMXaZg94LlVtbaBRIx9cexqw==",
"dependencies": {
"@react-navigation/core": "^6.2.1",
"escape-string-regexp": "^4.0.0",
"fast-deep-equal": "^3.1.3",
"nanoid": "^3.1.23"
}, },
"peerDependencies": { "peerDependencies": {
"react": "*", "react": "*",
"react-native": "*" "react-native": "*"
} }
}, },
"node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@react-navigation/routers": { "node_modules/@react-navigation/routers": {
"version": "5.7.2", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.7.2.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
"integrity": "sha512-BxNSMLHpU+oS37Xok0ql6rc9U7IC8aUD4+U5ZPbjDJ0pwzZxGGh0YOEBzfV4k/Ig3cbPdvVWbc1C9HHbCVr2oQ==", "integrity": "sha512-8xJL+djIzpFdRW/sGlKojQ06fWgFk1c5jER9501HYJ12LF5DIJFr/tqBI2TJ6bk+y+QFu0nbNyeRC80OjRlmkA==",
"dependencies": { "dependencies": {
"nanoid": "^3.1.15" "nanoid": "^3.1.23"
} }
}, },
"node_modules/@react-navigation/stack": { "node_modules/@react-navigation/stack": {
"version": "5.2.3", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.2.3.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.2.1.tgz",
"integrity": "sha512-mCji6N6r03sTMF09hbVmhdCZHcuIrZCr/MY8yuiG+kzzYcFfj+72wwJ885erKw32jBKAaJV8wZNq8W0K+ZiCQQ==", "integrity": "sha512-JI7boxtPAMCBXi4VJHVEq61jLVHFW5f3npvbndS+XfOsv7Gf0f91HOVJ28DS5c2Fn4+CO4AByjUozzlN296X+A==",
"dependencies": { "dependencies": {
"color": "^3.1.2", "@react-navigation/elements": "^1.3.3",
"react-native-iphone-x-helper": "^1.2.1" "color": "^3.1.3",
"warn-once": "^0.1.0"
}, },
"peerDependencies": { "peerDependencies": {
"@react-native-community/masked-view": ">= 0.1.0", "@react-navigation/native": "^6.0.0",
"@react-navigation/native": "^5.0.5",
"react": "*", "react": "*",
"react-native": "*", "react-native": "*",
"react-native-gesture-handler": ">= 1.0.0", "react-native-gesture-handler": ">= 1.0.0",
"react-native-safe-area-context": ">= 0.6.0", "react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0" "react-native-screens": ">= 3.0.0"
} }
}, },
"node_modules/@types/hammerjs": { "node_modules/@types/hammerjs": {
@ -6182,6 +6251,11 @@
"node": ">= 0.10" "node": ">= 0.10"
} }
}, },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/fb-watchman": { "node_modules/fb-watchman": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz", "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@ -9084,6 +9158,7 @@
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"peer": true,
"dependencies": { "dependencies": {
"isarray": "0.0.1" "isarray": "0.0.1"
} }
@ -9091,7 +9166,8 @@
"node_modules/path-to-regexp/node_modules/isarray": { "node_modules/path-to-regexp/node_modules/isarray": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
"peer": true
}, },
"node_modules/phin": { "node_modules/phin": {
"version": "2.9.3", "version": "2.9.3",
@ -9462,6 +9538,7 @@
"version": "6.14.1", "version": "6.14.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz", "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
"integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==", "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
"peer": true,
"dependencies": { "dependencies": {
"decode-uri-component": "^0.2.0", "decode-uri-component": "^0.2.0",
"filter-obj": "^1.1.0", "filter-obj": "^1.1.0",
@ -9699,6 +9776,7 @@
"version": "0.14.9", "version": "0.14.9",
"resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz", "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz",
"integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==", "integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==",
"peer": true,
"dependencies": { "dependencies": {
"hoist-non-react-statics": "^2.3.1" "hoist-non-react-statics": "^2.3.1"
}, },
@ -9710,7 +9788,8 @@
"node_modules/react-native-safe-area-view/node_modules/hoist-non-react-statics": { "node_modules/react-native-safe-area-view/node_modules/hoist-non-react-statics": {
"version": "2.5.5", "version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
"peer": true
}, },
"node_modules/react-native-screens": { "node_modules/react-native-screens": {
"version": "3.0.0", "version": "3.0.0",
@ -9868,6 +9947,7 @@
"version": "4.4.4", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-4.4.4.tgz", "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-4.4.4.tgz",
"integrity": "sha512-08Nzy1aKEd73496CsuzN49vLFmxPKYF5WpKGgGvkQ10clB79IRM2BtAfVl6NgPKuUM8FXq1wCsrjo/c5ftl5og==", "integrity": "sha512-08Nzy1aKEd73496CsuzN49vLFmxPKYF5WpKGgGvkQ10clB79IRM2BtAfVl6NgPKuUM8FXq1wCsrjo/c5ftl5og==",
"peer": true,
"dependencies": { "dependencies": {
"@react-navigation/core": "^3.7.9", "@react-navigation/core": "^3.7.9",
"@react-navigation/native": "^3.8.4" "@react-navigation/native": "^3.8.4"
@ -9899,6 +9979,7 @@
"version": "3.7.9", "version": "3.7.9",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-3.7.9.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-3.7.9.tgz",
"integrity": "sha512-EknbzM8OI9A5alRxXtQRV5Awle68B+z1QAxNty5DxmlS3BNfmduWNGnim159ROyqxkuDffK9L/U/Tbd45mx+Jg==", "integrity": "sha512-EknbzM8OI9A5alRxXtQRV5Awle68B+z1QAxNty5DxmlS3BNfmduWNGnim159ROyqxkuDffK9L/U/Tbd45mx+Jg==",
"peer": true,
"dependencies": { "dependencies": {
"hoist-non-react-statics": "^3.3.2", "hoist-non-react-statics": "^3.3.2",
"path-to-regexp": "^1.8.0", "path-to-regexp": "^1.8.0",
@ -9913,6 +9994,7 @@
"version": "3.8.4", "version": "3.8.4",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-3.8.4.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-3.8.4.tgz",
"integrity": "sha512-gXSVcL7bfFDyVkvyg1FiAqTCIgZub5K1X/TZqURBs2CPqDpfX1OsCtB9D33eTF14SpbfgHW866btqrrxoCACfg==", "integrity": "sha512-gXSVcL7bfFDyVkvyg1FiAqTCIgZub5K1X/TZqURBs2CPqDpfX1OsCtB9D33eTF14SpbfgHW866btqrrxoCACfg==",
"peer": true,
"dependencies": { "dependencies": {
"hoist-non-react-statics": "^3.3.2", "hoist-non-react-statics": "^3.3.2",
"react-native-safe-area-view": "^0.14.9" "react-native-safe-area-view": "^0.14.9"
@ -10391,19 +10473,6 @@
"jsonify": "~0.0.0" "jsonify": "~0.0.0"
} }
}, },
"node_modules/shortid": {
"version": "2.2.16",
"resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
"integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
"dependencies": {
"nanoid": "^2.1.0"
}
},
"node_modules/shortid/node_modules/nanoid": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
"integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
},
"node_modules/side-channel": { "node_modules/side-channel": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@ -11426,6 +11495,11 @@
"makeerror": "1.0.x" "makeerror": "1.0.x"
} }
}, },
"node_modules/warn-once": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz",
"integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA=="
},
"node_modules/warning": { "node_modules/warning": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
@ -14506,42 +14580,86 @@
"integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==", "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==",
"requires": {} "requires": {}
}, },
"@react-navigation/core": { "@react-navigation/bottom-tabs": {
"version": "5.2.3", "version": "6.3.1",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.2.3.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.1.tgz",
"integrity": "sha512-iWSj7Eep4qWuEZ/LYSSsK9vs0AskUkIQM3+SmeZJxIqOIQw7nVQZ4sa4RbYbX/PxOBbZ/SOOKcCNuZ7zilve5A==", "integrity": "sha512-sL9F4WMhhR6I9bE7bpsPVHnK1cN9doaFHAuy5YmD+Sw6OyO0TAmNgQFx4xZWqboA5ZwSkN0tWcRCr6wGXaRRag==",
"requires": { "requires": {
"@react-navigation/routers": "^5.1.1", "@react-navigation/elements": "^1.3.3",
"escape-string-regexp": "^2.0.0", "color": "^3.1.3",
"query-string": "^6.11.1", "warn-once": "^0.1.0"
"react-is": "^16.13.0",
"shortid": "^2.2.15",
"use-subscription": "^1.4.0"
} }
}, },
"@react-navigation/native": { "@react-navigation/core": {
"version": "5.1.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.1.tgz",
"integrity": "sha512-AzHuO5egm5+JT+M37imyVDe6vfY3mr+HO3FpRTAvXuJabDV5flcLUTIiLuvmd3iyNRFJFR6bCbDirwwmVWMAXg==", "integrity": "sha512-3mjS6ujwGnPA/BC11DN9c2c42gFld6B6dQBgDedxP2djceXESpY2kVTTwISDHuqFnF7WjvRjsrDu3cKBX+JosA==",
"requires": { "requires": {
"@react-navigation/core": "^5.2.3" "@react-navigation/routers": "^6.1.0",
"escape-string-regexp": "^4.0.0",
"nanoid": "^3.1.23",
"query-string": "^7.0.0",
"react-is": "^16.13.0"
},
"dependencies": {
"escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
},
"query-string": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
"integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
"requires": {
"decode-uri-component": "^0.2.0",
"filter-obj": "^1.1.0",
"split-on-first": "^1.0.0",
"strict-uri-encode": "^2.0.0"
}
}
}
},
"@react-navigation/elements": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.3.tgz",
"integrity": "sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw==",
"requires": {}
},
"@react-navigation/native": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.10.tgz",
"integrity": "sha512-H6QhLeiieGxNcAJismIDXIPZgf1myr7Og8v116tezIGmincJTOcWavTd7lPHGnMMXaZg94LlVtbaBRIx9cexqw==",
"requires": {
"@react-navigation/core": "^6.2.1",
"escape-string-regexp": "^4.0.0",
"fast-deep-equal": "^3.1.3",
"nanoid": "^3.1.23"
},
"dependencies": {
"escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
}
} }
}, },
"@react-navigation/routers": { "@react-navigation/routers": {
"version": "5.7.2", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.7.2.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
"integrity": "sha512-BxNSMLHpU+oS37Xok0ql6rc9U7IC8aUD4+U5ZPbjDJ0pwzZxGGh0YOEBzfV4k/Ig3cbPdvVWbc1C9HHbCVr2oQ==", "integrity": "sha512-8xJL+djIzpFdRW/sGlKojQ06fWgFk1c5jER9501HYJ12LF5DIJFr/tqBI2TJ6bk+y+QFu0nbNyeRC80OjRlmkA==",
"requires": { "requires": {
"nanoid": "^3.1.15" "nanoid": "^3.1.23"
} }
}, },
"@react-navigation/stack": { "@react-navigation/stack": {
"version": "5.2.3", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.2.3.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.2.1.tgz",
"integrity": "sha512-mCji6N6r03sTMF09hbVmhdCZHcuIrZCr/MY8yuiG+kzzYcFfj+72wwJ885erKw32jBKAaJV8wZNq8W0K+ZiCQQ==", "integrity": "sha512-JI7boxtPAMCBXi4VJHVEq61jLVHFW5f3npvbndS+XfOsv7Gf0f91HOVJ28DS5c2Fn4+CO4AByjUozzlN296X+A==",
"requires": { "requires": {
"color": "^3.1.2", "@react-navigation/elements": "^1.3.3",
"react-native-iphone-x-helper": "^1.2.1" "color": "^3.1.3",
"warn-once": "^0.1.0"
} }
}, },
"@types/hammerjs": { "@types/hammerjs": {
@ -16503,6 +16621,11 @@
"time-stamp": "^1.0.0" "time-stamp": "^1.0.0"
} }
}, },
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"fb-watchman": { "fb-watchman": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz", "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@ -18845,6 +18968,7 @@
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"peer": true,
"requires": { "requires": {
"isarray": "0.0.1" "isarray": "0.0.1"
}, },
@ -18852,7 +18976,8 @@
"isarray": { "isarray": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
"peer": true
} }
} }
}, },
@ -19141,6 +19266,7 @@
"version": "6.14.1", "version": "6.14.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz", "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
"integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==", "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
"peer": true,
"requires": { "requires": {
"decode-uri-component": "^0.2.0", "decode-uri-component": "^0.2.0",
"filter-obj": "^1.1.0", "filter-obj": "^1.1.0",
@ -19410,6 +19536,7 @@
"version": "0.14.9", "version": "0.14.9",
"resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz", "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz",
"integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==", "integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==",
"peer": true,
"requires": { "requires": {
"hoist-non-react-statics": "^2.3.1" "hoist-non-react-statics": "^2.3.1"
}, },
@ -19417,7 +19544,8 @@
"hoist-non-react-statics": { "hoist-non-react-statics": {
"version": "2.5.5", "version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
"peer": true
} }
} }
}, },
@ -19475,6 +19603,7 @@
"version": "4.4.4", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-4.4.4.tgz", "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-4.4.4.tgz",
"integrity": "sha512-08Nzy1aKEd73496CsuzN49vLFmxPKYF5WpKGgGvkQ10clB79IRM2BtAfVl6NgPKuUM8FXq1wCsrjo/c5ftl5og==", "integrity": "sha512-08Nzy1aKEd73496CsuzN49vLFmxPKYF5WpKGgGvkQ10clB79IRM2BtAfVl6NgPKuUM8FXq1wCsrjo/c5ftl5og==",
"peer": true,
"requires": { "requires": {
"@react-navigation/core": "^3.7.9", "@react-navigation/core": "^3.7.9",
"@react-navigation/native": "^3.8.4" "@react-navigation/native": "^3.8.4"
@ -19484,6 +19613,7 @@
"version": "3.7.9", "version": "3.7.9",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-3.7.9.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-3.7.9.tgz",
"integrity": "sha512-EknbzM8OI9A5alRxXtQRV5Awle68B+z1QAxNty5DxmlS3BNfmduWNGnim159ROyqxkuDffK9L/U/Tbd45mx+Jg==", "integrity": "sha512-EknbzM8OI9A5alRxXtQRV5Awle68B+z1QAxNty5DxmlS3BNfmduWNGnim159ROyqxkuDffK9L/U/Tbd45mx+Jg==",
"peer": true,
"requires": { "requires": {
"hoist-non-react-statics": "^3.3.2", "hoist-non-react-statics": "^3.3.2",
"path-to-regexp": "^1.8.0", "path-to-regexp": "^1.8.0",
@ -19495,6 +19625,7 @@
"version": "3.8.4", "version": "3.8.4",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-3.8.4.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-3.8.4.tgz",
"integrity": "sha512-gXSVcL7bfFDyVkvyg1FiAqTCIgZub5K1X/TZqURBs2CPqDpfX1OsCtB9D33eTF14SpbfgHW866btqrrxoCACfg==", "integrity": "sha512-gXSVcL7bfFDyVkvyg1FiAqTCIgZub5K1X/TZqURBs2CPqDpfX1OsCtB9D33eTF14SpbfgHW866btqrrxoCACfg==",
"peer": true,
"requires": { "requires": {
"hoist-non-react-statics": "^3.3.2", "hoist-non-react-statics": "^3.3.2",
"react-native-safe-area-view": "^0.14.9" "react-native-safe-area-view": "^0.14.9"
@ -19897,21 +20028,6 @@
"jsonify": "~0.0.0" "jsonify": "~0.0.0"
} }
}, },
"shortid": {
"version": "2.2.16",
"resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
"integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
"requires": {
"nanoid": "^2.1.0"
},
"dependencies": {
"nanoid": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
"integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
}
}
},
"side-channel": { "side-channel": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@ -20710,6 +20826,11 @@
"makeerror": "1.0.x" "makeerror": "1.0.x"
} }
}, },
"warn-once": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz",
"integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA=="
},
"warning": { "warning": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",

8
package.json
View File

@ -10,9 +10,10 @@
"dependencies": { "dependencies": {
"@react-native-async-storage/async-storage": "^1.13.0", "@react-native-async-storage/async-storage": "^1.13.0",
"@react-native-community/masked-view": "0.1.10", "@react-native-community/masked-view": "0.1.10",
"@react-navigation/core": "5.2.3", "@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "5.1.1", "@react-navigation/core": "^6.2.1",
"@react-navigation/stack": "5.2.3", "@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"expo": "^41.0.0", "expo": "^41.0.0",
"expo-image-picker": "~10.1.4", "expo-image-picker": "~10.1.4",
"expo-linking": "~2.2.3", "expo-linking": "~2.2.3",
@ -31,7 +32,6 @@
"react-native-screens": "~3.0.0", "react-native-screens": "~3.0.0",
"react-native-tab-view": "^2.16.0", "react-native-tab-view": "^2.16.0",
"react-native-web": "~0.13.12", "react-native-web": "~0.13.12",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2" "react-navigation-stack": "^2.8.2"
}, },
"devDependencies": { "devDependencies": {

169
src/App.js
View File

@ -1,73 +1,142 @@
import 'react-native-gesture-handler'; import 'react-native-gesture-handler';
import React from "react"; import React from "react";
import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from "@react-navigation/stack";
import { createStackNavigator } from "react-navigation-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { MenuProvider } from "react-native-popup-menu"; import { MenuProvider } from "react-native-popup-menu";
import { Ionicons } from "@expo/vector-icons";
import { registerRootComponent } from 'expo'; import { registerRootComponent } from 'expo';
import * as Linking from "expo-linking"; import * as Linking from "expo-linking";
import ViewPostJsx from "src/components/pages/view-post"; import ViewPost from "src/components/pages/view-post";
import ViewCommentsJsx from "src/components/pages/view-comments.js"; import ViewComments from "src/components/pages/view-comments.js";
import AuthenticateJsx from "src/components/pages/authenticate"; import Authenticate from "src/components/pages/authenticate";
import FeedJsx from "src/components/pages/feed"; import Feed from "src/components/pages/feed";
import PublishJsx from "src/components/pages/publish"; import Publish from "src/components/pages/publish";
import OlderPostsJsx from "src/components/pages/feed/older-posts"; import OlderPosts from "src/components/pages/feed/older-posts";
import ProfileJsx, { ViewProfileJsx } from "src/components/pages/profile"; import Profile, { ViewProfile } from "src/components/pages/profile";
import DiscoverJsx from 'src/components/pages/discover'; import Discover from 'src/components/pages/discover';
import SearchJsx from 'src/components/pages/discover/search'; import Search from 'src/components/pages/discover/search';
import ViewHashtagJsx from 'src/components/pages/discover/view-hashtag'; import ViewHashtag from 'src/components/pages/discover/view-hashtag';
import DirectJsx from "src/components/pages/direct"; import Direct from "src/components/pages/direct";
import ConversationJsx, { ComposeJsx } from "src/components/pages/direct/conversation"; import Conversation, { Compose } from "src/components/pages/direct/conversation";
import NotificationsJsx from 'src/components/pages/profile/notifications'; import Notifications from 'src/components/pages/profile/notifications';
import UserListJsx from "src/components/pages/user-list.js"; import UserList from "src/components/pages/user-list.js";
import SettingsJsx from "src/components/pages/profile/settings.js"; import Settings from "src/components/pages/profile/settings.js";
const Stack = createStackNavigator({
Authenticate: {
screen: AuthenticateJsx,
path: "authenticate",
},
Feed: { screen: FeedJsx, },
OlderPosts: { screen: OlderPostsJsx },
Discover: { screen: DiscoverJsx },
Publish: { screen: PublishJsx },
Direct: { screen: DirectJsx },
Compose: { screen: ComposeJsx },
Conversation: { screen: ConversationJsx },
Notifications: { screen: NotificationsJsx },
Profile: { screen: ProfileJsx, },
Settings: { screen: SettingsJsx },
Search: { screen: SearchJsx },
ViewPost: { screen: ViewPostJsx },
ViewComments: { screen: ViewCommentsJsx },
ViewProfile: { screen: ViewProfileJsx },
ViewHashtag: { screen: ViewHashtagJsx },
UserList: { screen: UserListJsx }
}, {
initialRouteKey: "Authenticate",
headerMode: "none",
navigationOptions: {
headerVisible: false
}
});
const AppContainer = createAppContainer(Stack);
const prefix = Linking.makeUrl("/"); const prefix = Linking.makeUrl("/");
const Tab = createBottomTabNavigator();
const MainNavigator = () => {
// Tabbed navigator for Feed, Discover, Publish, Direct and Profile
const bottomTabIcon = name => {
return ({ size }) => <Ionicons name = { name } size = { size }/>
};
const screenOptions = {
all: {
// Options that apply to every screen in the navigator
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {
height: 60,
}
},
Feed: {
tabBarAccessibilityLabel: "Feed",
tabBarIcon: bottomTabIcon("home-outline"),
},
Discover: {
tabBarAccessibilityLabel: "Discover",
tabBarIcon: bottomTabIcon("search-outline"),
},
Publish: {
tabBarAccessibilityLabel: "Publish",
tabBarIcon: bottomTabIcon("camera-outline"),
},
Direct: {
tabBarAccessibilityLabel: "Direct messages",
tabBarIcon: bottomTabIcon("mail-outline"),
},
Profile: {
tabBarAccessibilityLabel: "Profile",
tabBarIcon: bottomTabIcon("person-outline"),
},
};
return (
<Tab.Navigator
intialRouteName = "Feed"
screenOptions = { screenOptions.all }>
<Tab.Screen name = "Feed" component = { Feed }
options = { screenOptions.Feed }/>
<Tab.Screen name = "Discover" component = { Discover }
options = { screenOptions.Discover }/>
<Tab.Screen name = "Publish" component = { Publish }
options = { screenOptions.Publish }/>
<Tab.Screen name = "Direct" component = { Direct }
options = { screenOptions.Direct }/>
<Tab.Screen name = "Profile" component = { Profile }
options = { screenOptions.Profile }/>
</Tab.Navigator>
);
};
const Stack = createStackNavigator();
const App = (props) => { const App = (props) => {
const providerStyles = { const providerStyles = {
backdrop: { backdrop: {
backgroundColor: "black", backgroundColor: "black",
opacity: 0.5 opacity: 0.5
} },
};
// This allows for the OAuth redirect
const linking = {
prefixes: [prefix],
config: {
screens: {
Authenticate: "authenticate",
},
},
};
const screenOptions = {
headerTitle: "",
}; };
return <MenuProvider customStyles = { providerStyles }> return <MenuProvider customStyles = { providerStyles }>
<AppContainer uriPrefix = { prefix }/> <NavigationContainer linking = { linking }>
<Stack.Navigator
intialRouteName = "Authenticate"
screenOptions = { screenOptions }>
<Stack.Screen
name = "Authenticate"
component = { Authenticate }
options = { { headerShown: false } }/>
<Stack.Screen
name = "Main"
component = { MainNavigator }
options = { { headerShown: false } }/>
<Stack.Screen name="OlderPosts" component={OlderPosts}/>
<Stack.Screen name="Compose" component={Compose}/>
<Stack.Screen name="Conversation" component={Conversation}/>
<Stack.Screen name="Settings" component={Settings}/>
<Stack.Screen name="Search" component={Search}
options = { { headerShown: false } }/>
<Stack.Screen name="ViewPost" component={ViewPost}/>
<Stack.Screen name="ViewComments" component={ViewComments}/>
<Stack.Screen name="ViewProfile" component={ViewProfile}/>
<Stack.Screen name="ViewHashtag" component={ViewHashtag}/>
<Stack.Screen name="Notifications" component={Notifications}/>
<Stack.Screen name="UserList" component={UserList}/>
</Stack.Navigator>
</NavigationContainer>
</MenuProvider>; </MenuProvider>;
}; };

4
src/components/context-menu.js
View File

@ -13,7 +13,7 @@ const { SlideInMenu } = renderers;
const SCREEN_WIDTH = Dimensions.get("window").width; const SCREEN_WIDTH = Dimensions.get("window").width;
const ContextMenuJsx = (props) => { const ContextMenu = (props) => {
const optionsStyles = { const optionsStyles = {
optionWrapper: { // The wrapper around a single option optionWrapper: { // The wrapper around a single option
paddingLeft: SCREEN_WIDTH / 15, paddingLeft: SCREEN_WIDTH / 15,
@ -47,4 +47,4 @@ const ContextMenuJsx = (props) => {
); );
} }
export { ContextMenuJsx as default }; export { ContextMenu as default };

4
src/components/moderate-menu.js
View File

@ -13,7 +13,7 @@ const { SlideInMenu } = renderers;
const SCREEN_WIDTH = Dimensions.get("window").width; const SCREEN_WIDTH = Dimensions.get("window").width;
const ModerateMenuJsx = (props) => { const ModerateMenu = (props) => {
const optionsStyles = { const optionsStyles = {
optionWrapper: { // The wrapper around a single option optionWrapper: { // The wrapper around a single option
paddingLeft: SCREEN_WIDTH / 15, paddingLeft: SCREEN_WIDTH / 15,
@ -50,4 +50,4 @@ const ModerateMenuJsx = (props) => {
); );
} }
export { ModerateMenuJsx as default }; export { ModerateMenu as default };

50
src/components/navigation/back-bar.js
View File

@ -1,50 +0,0 @@
import React from "react";
import { Image } from "react-native";
import { TouchableOpacity, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
const BackBarJsx = (props) => {
return (
<View style = { styles.nav }>
<TouchableOpacity
onPress = { () => props.navigation.goBack() }
style = { styles.button }>
<Ionicons
name = "chevron-back"
color = "#000"
size = { 30 }/>
</TouchableOpacity>
<View style = { styles.rest }>
{ props.children }
</View>
</View>
);
};
const styles = {
nav: {
borderBottomWidth: 1,
borderBottomColor: "#CCC",
backgroundColor: "white",
flexDirection: "row",
alignItems: "center",
paddingLeft: 10,
paddingRight: 10,
},
rest: {
flexGrow: 1,
},
chevron: {
width: 30,
height: 30,
},
button: {
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
}
export default BackBarJsx;

63
src/components/navigation/navigators.js
View File

@ -1,63 +0,0 @@
import React from "react";
import { SafeAreaView } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { StatusBarSpace } from "src/interface/rendering";
import BackBarJsx from "./back-bar";
import TrayJsx from "src/components/navigation/tray";
export const ScreenWithTrayJsx = (props) => {
return (
<SafeAreaView style = { { flex: 1 } }>
<ScrollView contentContainerStyle = { props.contentContainerStyle }>
<StatusBarSpace
color = {
props.statusBarColor
? props.statusBarColor
: "transparent"
}/>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</SafeAreaView>
);
};
export const ScreenWithBackBarJsx = (props) => {
return (
<SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
: <></>
}
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
</SafeAreaView>
);
};
export const ScreenWithFullNavigationJsx = (props) => {
return (
<SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }>
{ props.renderBackBar != undefined
? props.renderBackBar()
: <></>
}
</BackBarJsx>
<ScrollView>
{ props.children }
</ScrollView>
<TrayJsx
active = { props.active }
navigation = { props.navigation } />
</SafeAreaView>
);
};

98
src/components/navigation/tray.js
View File

@ -1,98 +0,0 @@
import React, { useState, useEffect } from "react";
import {
Image,
Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { checkUnreadNotifications } from "src/requests";
import { activeOrNot } from "src/interface/interactions"
import { TouchableWithoutFeedback, View } from "react-native";
const TrayButtonJsx = (props) => {
return (
<TouchableWithoutFeedback
onPress={ () => props.nav.navigate(props.where, {}) }>
<Ionicons
name = { props.icon }
color = { activeOrNot(props.active == props.where, {
active: "#000",
inactive: "#888",
})
}
size = { 30 } />
</TouchableWithoutFeedback>
);
}
const TrayJsx = (props) => {
const nav = props.navigation;
const [state, setState] = useState({
unreadNotifications: false
});
useEffect(() => {
checkUnreadNotifications()
.then(isUnread => {
setState({...state,
unreadNotifications: isUnread,
});
});
}, []);
return (
<View style = { styles.tray }>
<View style = { styles.iconList }>
<TrayButtonJsx
where = "Feed"
icon = { "home-outline" }
active = { props.active }
nav = { nav } />
<TrayButtonJsx
where = "Discover"
icon = { "search-outline" }
active = { props.active }
nav = { nav } />
<TrayButtonJsx
where = "Publish"
icon = { "camera-outline" }
active = { props.active }
nav = { nav } />
<TrayButtonJsx
where = "Direct"
icon = { "mail-outline" }
active = { props.active }
nav = { nav } />
<TrayButtonJsx
where = "Profile"
icon = { "person-outline" }
active = { props.active }
nav = { nav } />
</View>
</View>
);
};
const SCREEN_WIDTH = Dimensions.get("window").width;
const styles = {
tray: {
width: SCREEN_WIDTH,
paddingTop: 15,
paddingBottom: 15,
borderTopWidth: 2,
borderTopColor: "#CCC",
backgroundColor: "white"
},
iconList: {
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
margin: 0,
paddingLeft: 0,
},
};
export default TrayJsx;

8
src/components/pages/authenticate.js
View File

@ -16,7 +16,7 @@ import Constants from "expo-constants";
import * as requests from "src/requests"; import * as requests from "src/requests";
const AuthenticateJsx = ({navigation}) => { const Authenticate = ({navigation}) => {
const REDIRECT_URI = Linking.makeUrl("authenticate"); const REDIRECT_URI = Linking.makeUrl("authenticate");
const [state, setState] = useState({ const [state, setState] = useState({
instance: "", instance: "",
@ -83,7 +83,7 @@ const AuthenticateJsx = ({navigation}) => {
); );
// Since nothing went wrong, navigate to the feed. // Since nothing went wrong, navigate to the feed.
navigation.navigate("Feed"); navigation.replace("Main");
}; };
const _handleUrl = async ({ url }) => { const _handleUrl = async ({ url }) => {
@ -136,7 +136,7 @@ const AuthenticateJsx = ({navigation}) => {
], ],
]); ]);
navigation.navigate("Feed"); navigation.replace("Main");
}; };
useEffect(() => { useEffect(() => {
@ -265,4 +265,4 @@ const styles = {
}, },
}; };
export { AuthenticateJsx as default }; export { Authenticate as default };

15
src/components/pages/direct.js
View File

@ -14,8 +14,7 @@ import * as requests from "src/requests";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { ScreenWithTrayJsx } from "src/components/navigation/navigators"; import ModerateMenu from "src/components/moderate-menu.js";
import ModerateMenuJsx from "src/components/moderate-menu.js";
const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg"; const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg"; const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
@ -37,7 +36,7 @@ function filterConversations(convs, query) {
}); });
} }
const DirectJsx = ({ navigation }) => { const Direct = ({ navigation }) => {
const FETCH_LIMIT = 1; const FETCH_LIMIT = 1;
const [state, setState] = useState({ const [state, setState] = useState({
@ -133,7 +132,7 @@ const DirectJsx = ({ navigation }) => {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style = { styles.conv.context }> <View style = { styles.conv.context }>
<ModerateMenuJsx <ModerateMenu
triggerStyle = { styles.menu.trigger } /> triggerStyle = { styles.menu.trigger } />
</View> </View>
</View> </View>
@ -141,9 +140,7 @@ const DirectJsx = ({ navigation }) => {
}; };
return ( return (
<ScreenWithTrayJsx <>
navigation = { navigation }
originTab = "Direct">
{ state.loaded { state.loaded
? <> ? <>
<View style = { [ styles.row, styles.form.container ] }> <View style = { [ styles.row, styles.form.container ] }>
@ -188,7 +185,7 @@ const DirectJsx = ({ navigation }) => {
</> </>
: <></> : <></>
} }
</ScreenWithTrayJsx> </>
); );
}; };
@ -259,4 +256,4 @@ const styles = {
bold: { fontWeight: "bold" }, bold: { fontWeight: "bold" },
}; };
export { DirectJsx as default }; export { Direct as default };

19
src/components/pages/direct/conversation.js
View File

@ -24,7 +24,6 @@ import {
const { SlideInMenu } = renderers; const { SlideInMenu } = renderers;
import BackBarJsx from "src/components/navigation/back-bar";
import { timeToAge, StatusBarSpace } from "src/interface/rendering"; import { timeToAge, StatusBarSpace } from "src/interface/rendering";
const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg"; const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
@ -46,12 +45,12 @@ const TEST_MESSAGES = [
{ ...TEST_STATUS, id: 5 }, { ...TEST_STATUS, id: 5 },
]; ];
const ConversationContainerJsx = (props) => ( const ConversationContainer = (props) => (
<SafeAreaView style = { { flex: 1 } }> <SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/> <StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }> <BackBar navigation = { props.navigation }>
{ props.renderBackBar() } { props.renderBackBar() }
</BackBarJsx> </BackBar>
<ScrollView> <ScrollView>
{ props.children } { props.children }
</ScrollView> </ScrollView>
@ -80,7 +79,7 @@ const ConversationContainerJsx = (props) => (
</SafeAreaView> </SafeAreaView>
); );
const ComposeJsx = ({ navigation }) => { const Compose = ({ navigation }) => {
const [state, setState] = useState({ const [state, setState] = useState({
accts: [], accts: [],
newMessage: "", newMessage: "",
@ -98,7 +97,7 @@ const ComposeJsx = ({ navigation }) => {
}/> }/>
); );
return <ConversationContainerJsx return <ConversationContainer
renderBackBar = { renderBackBar } renderBackBar = { renderBackBar }
navigation = { navigation } navigation = { navigation }
state = { state } state = { state }
@ -110,7 +109,7 @@ const ComposeJsx = ({ navigation }) => {
}/>; }/>;
}; };
const ConversationJsx = ({ navigation }) => { const Conversation = ({ navigation }) => {
const conversation = navigation.getParam("conversation", {}); const conversation = navigation.getParam("conversation", {});
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false, loaded: false,
@ -227,7 +226,7 @@ const ConversationJsx = ({ navigation }) => {
}; };
return ( return (
<ConversationContainerJsx <ConversationContainer
renderBackBar = { renderBackBar } renderBackBar = { renderBackBar }
navigation = { navigation } navigation = { navigation }
state = { state } state = { state }
@ -236,7 +235,7 @@ const ConversationJsx = ({ navigation }) => {
? state.messages.map(renderMessage) ? state.messages.map(renderMessage)
: <></> : <></>
} }
</ConversationContainerJsx> </ConversationContainer>
); );
}; };
@ -327,4 +326,4 @@ const styles = {
}, },
}; };
export { ConversationJsx as default, ComposeJsx, }; export { Conversation as default, Compose, };

18
src/components/pages/discover.js
View File

@ -8,12 +8,11 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests"; import * as requests from "src/requests";
import PagedGridJsx from "src/components/posts/paged-grid"; import PagedGrid from "src/components/posts/paged-grid";
import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
import { TouchableWithoutFeedback } from "react-native-gesture-handler"; import { TouchableWithoutFeedback } from "react-native-gesture-handler";
const DiscoverJsx = (props) => { const Discover = (props) => {
const POST_FETCH_PARAMS = { const POST_FETCH_PARAMS = {
only_media: true, only_media: true,
limit: 18, limit: 18,
@ -103,7 +102,7 @@ const DiscoverJsx = (props) => {
}; };
const LocalTimeline = () => ( const LocalTimeline = () => (
<PagedGridJsx <PagedGrid
navigation = { props.navigation } navigation = { props.navigation }
posts = { state.localPosts } posts = { state.localPosts }
onShowMore = { _handleLocalTabUpdate } onShowMore = { _handleLocalTabUpdate }
@ -111,7 +110,7 @@ const DiscoverJsx = (props) => {
); );
const FederatedTimeline = () => ( const FederatedTimeline = () => (
<PagedGridJsx <PagedGrid
navigation = { props.navigation } navigation = { props.navigation }
posts = { state.federatedPosts } posts = { state.federatedPosts }
onShowMore = { _handleFederatedTabUpdate } onShowMore = { _handleFederatedTabUpdate }
@ -143,10 +142,7 @@ const DiscoverJsx = (props) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithTrayJsx ? <>
active = "Discover"
navigation = { props.navigation }
statusBarColor = "white">
<TouchableWithoutFeedback <TouchableWithoutFeedback
onPress = { () => props.navigation.navigate("Search") }> onPress = { () => props.navigation.navigate("Search") }>
<View style = { styles.form }> <View style = { styles.form }>
@ -163,7 +159,7 @@ const DiscoverJsx = (props) => {
renderTabBar = { renderTabBar } renderTabBar = { renderTabBar }
onIndexChange = { setIndex } onIndexChange = { setIndex }
initialLayout = { { width: SCREEN_WIDTH } } /> initialLayout = { { width: SCREEN_WIDTH } } />
</ScreenWithTrayJsx> </>
: <></> : <></>
} }
</> </>
@ -191,4 +187,4 @@ const styles = {
}, },
}; };
export default DiscoverJsx; export default Discover;

42
src/components/pages/discover/search.js
View File

@ -12,7 +12,6 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests"; import * as requests from "src/requests";
import { StatusBarSpace } from "src/interface/rendering"; import { StatusBarSpace } from "src/interface/rendering";
import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
@ -22,7 +21,7 @@ function navCallbackFactory(navigation, route) {
} }
} }
const SearchJsx = ({navigation}) => { const Search = ({navigation}) => {
// The number of additional items to fetch each time // The number of additional items to fetch each time
const FETCH_LIMIT = 5; const FETCH_LIMIT = 5;
@ -122,7 +121,7 @@ const SearchJsx = ({navigation}) => {
]); ]);
const AccountRenderer = () => ( const AccountRenderer = () => (
<AccountListJsx <AccountList
callback = { navCallbackFactory(navigation, "ViewProfile") } callback = { navCallbackFactory(navigation, "ViewProfile") }
onShowMore = { _handleShowMoreAccounts } onShowMore = { _handleShowMoreAccounts }
results = { state.results.accounts } results = { state.results.accounts }
@ -130,7 +129,7 @@ const SearchJsx = ({navigation}) => {
); );
const HashtagRenderer = () => ( const HashtagRenderer = () => (
<HashtagListJsx <HashtagList
callback = { navCallbackFactory(navigation, "ViewHashtag") } callback = { navCallbackFactory(navigation, "ViewHashtag") }
onShowMore = { _handleShowMoreHashtags } onShowMore = { _handleShowMoreHashtags }
results = { state.results.hashtags } results = { state.results.hashtags }
@ -162,10 +161,7 @@ const SearchJsx = ({navigation}) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithTrayJsx ? <>
active = "Discover"
statusBarColor = "white"
navigation = { navigation }>
<View style = { styles.form.container }> <View style = { styles.form.container }>
<TextInput <TextInput
style = { styles.form.input } style = { styles.form.input }
@ -198,14 +194,14 @@ const SearchJsx = ({navigation}) => {
initialLayout = { { width: SCREEN_WIDTH } } /> initialLayout = { { width: SCREEN_WIDTH } } />
: <></> : <></>
} }
</ScreenWithTrayJsx> </>
: <></> : <></>
} }
</> </>
); );
}; };
const SearchItemJsx = (props) => { const SearchItem = (props) => {
return ( return (
<TouchableOpacity <TouchableOpacity
onPress = { () => props.callback(props.navParams) }> onPress = { () => props.callback(props.navParams) }>
@ -222,22 +218,22 @@ const SearchItemJsx = (props) => {
}; };
// Display message noting when no results turned up. This component wraps // Display message noting when no results turned up. This component wraps
// AccountListJsx and HashtagListJsx. // AccountList and HashtagList.
const SearchListContainerJsx = ({ results, children }) => results.length == 0 const SearchListContainer = ({ results, children }) => results.length == 0
? <View style = { styles.noResultsContainer }> ? <View style = { styles.noResultsContainer }>
<Text>No results!</Text> <Text>No results!</Text>
</View> </View>
: children; : children;
const AccountListJsx = (props) => { const AccountList = (props) => {
return ( return (
<SearchListContainerJsx results = { props.results }> <SearchListContainer results = { props.results }>
<View style = { styles.searchList }> <View style = { styles.searchList }>
<> <>
{ {
props.results.map(item => { props.results.map(item => {
return ( return (
<SearchItemJsx <SearchItem
key = { item.id } key = { item.id }
thumbnail = { { uri: item.avatar } } thumbnail = { { uri: item.avatar } }
callback = { props.callback } callback = { props.callback }
@ -248,7 +244,7 @@ const AccountListJsx = (props) => {
<Text style = { styles.displayName }> <Text style = { styles.displayName }>
{ item.display_name } { item.display_name }
</Text> </Text>
</SearchItemJsx> </SearchItem>
); );
}) })
} }
@ -267,19 +263,19 @@ const AccountListJsx = (props) => {
} }
</> </>
</View> </View>
</SearchListContainerJsx> </SearchListContainer>
); );
}; };
const HashtagListJsx = (props) => { const HashtagList = (props) => {
return ( return (
<SearchListContainerJsx results = { props.results }> <SearchListContainer results = { props.results }>
<View style = { styles.searchList }> <View style = { styles.searchList }>
<> <>
{ {
props.results.map((item, i) => { props.results.map((item, i) => {
return ( return (
<SearchItemJsx <SearchItem
key = { i } key = { i }
thumbnail = { require("assets/hashtag.png") } thumbnail = { require("assets/hashtag.png") }
callback = { props.callback } callback = { props.callback }
@ -287,7 +283,7 @@ const HashtagListJsx = (props) => {
<Text style = { styles.username }> <Text style = { styles.username }>
#{ item.name } #{ item.name }
</Text> </Text>
</SearchItemJsx> </SearchItem>
); );
}) })
} }
@ -306,7 +302,7 @@ const HashtagListJsx = (props) => {
} }
</> </>
</View> </View>
</SearchListContainerJsx> </SearchListContainer>
); );
} }
@ -388,4 +384,4 @@ const styles = {
}, },
} }
export default SearchJsx; export default Search;

13
src/components/pages/discover/view-hashtag.js
View File

@ -1,12 +1,11 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { View, Image, Dimensions, Text } from "react-native"; import { View, Image, Dimensions, Text } from "react-native";
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators"; import PagedGrid from "src/components/posts/paged-grid";
import PagedGridJsx from "src/components/posts/paged-grid";
import * as requests from "src/requests"; import * as requests from "src/requests";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
const ViewHashtagJsx = ({navigation}) => { const ViewHashtag = ({navigation}) => {
const FETCH_LIMIT = 18; const FETCH_LIMIT = 18;
let [state, setState] = useState({ let [state, setState] = useState({
tag: navigation.getParam("tag", null), tag: navigation.getParam("tag", null),
@ -70,7 +69,7 @@ const ViewHashtagJsx = ({navigation}) => {
const latest = state.tag.history[0]; const latest = state.tag.history[0];
return ( return (
<ScreenWithBackBarJsx navigation = { navigation }> <>
<View> <View>
<View style = { styles.headerContainer }> <View style = { styles.headerContainer }>
<View> <View>
@ -106,7 +105,7 @@ const ViewHashtagJsx = ({navigation}) => {
</View> </View>
<> <>
{ state.loaded && state.posts.length > 0 { state.loaded && state.posts.length > 0
? <PagedGridJsx ? <PagedGrid
navigation = { navigation } navigation = { navigation }
posts = { state.posts } posts = { state.posts }
onShowMore = { _handleShowMore } /> onShowMore = { _handleShowMore } />
@ -116,7 +115,7 @@ const ViewHashtagJsx = ({navigation}) => {
} }
</> </>
</View> </View>
</ScreenWithBackBarJsx> </>
); );
}; };
@ -149,4 +148,4 @@ const styles = {
}, },
} }
export default ViewHashtagJsx; export default ViewHashtag;

41
src/components/pages/feed.js
View File

@ -1,16 +1,16 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Dimensions, View, Image, Text } from "react-native"; import { ScrollView, Dimensions, View, Image, Text } from "react-native";
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import TimelineViewJsx from "src/components/posts/timeline-view"; import TimelineView from "src/components/posts/timeline-view";
import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
import { TouchableWithoutFeedback } from "react-native-gesture-handler"; import { TouchableWithoutFeedback } from "react-native-gesture-handler";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests"; import * as requests from "src/requests";
import { StatusBarSpace } from "src/interface/rendering";
const FeedJsx = (props) => { const Feed = (props) => {
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false, loaded: false,
postsRendered: false, postsRendered: false,
@ -69,13 +69,13 @@ const FeedJsx = (props) => {
}); });
let endOfTimelineMessage = <></>; let endOfTimelineMessage = <></>;
if (state.postsRendered) { if (state.postsRendered || state.loaded && state.posts.length == 0) {
// Only render the timeline interruption if all of the posts have been // Only render the timeline interruption if all of the posts have been
// rendered in the feed. // rendered in the feed.
endOfTimelineMessage = <> endOfTimelineMessage = <>
<View style = { <View style = {
state.posts.length == 0 state.posts.length == 0
? {} ? styles.ifCaughtUp
: styles.interruption.topBorder : styles.interruption.topBorder
}> }>
<View style = { styles.interruption.inner }> <View style = { styles.interruption.inner }>
@ -88,7 +88,7 @@ const FeedJsx = (props) => {
You're all caught up. You're all caught up.
</Text> </Text>
<Text> Wow, it sure is a lovely day outside 🌳 </Text> <Text> Wow, it sure is a lovely day outside 🌳 </Text>
<TouchableWithoutFeedback <TouchableWithoutFeedback
style = { styles.interruption.button } style = { styles.interruption.button }
onPress = { onPress = {
@ -103,22 +103,17 @@ const FeedJsx = (props) => {
return ( return (
<> <>
<StatusBarSpace />
{ state.loaded { state.loaded
? <ScreenWithTrayJsx ? state.posts.length > 0
active = "Feed" ? <ScrollView>
contentContainerStyle = { <TimelineView
state.posts.length == 0 navigation = { props.navigation }
? styles.ifCaughtUp posts = { state.posts }
: {} onTimelineLoaded = { _handleTimelineLoaded }/>
} { endOfTimelineMessage }
navigation = { props.navigation }> </ScrollView>
: endOfTimelineMessage
<TimelineViewJsx
navigation = { props.navigation }
posts = { state.posts }
onTimelineLoaded = { _handleTimelineLoaded }/>
{ endOfTimelineMessage }
</ScreenWithTrayJsx>
: <></> : <></>
} }
</> </>
@ -161,4 +156,4 @@ const styles = {
}, },
}; };
export default FeedJsx; export default Feed;

13
src/components/pages/feed/older-posts.js
View File

@ -2,13 +2,12 @@ import React, { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests"; import * as requests from "src/requests";
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators"; import PagedGrid from "src/components/posts/paged-grid";
import PagedGridJsx from "src/components/posts/paged-grid";
// The number of posts to fetch at a time // The number of posts to fetch at a time
const POST_FETCH_LIMIT = 18; const POST_FETCH_LIMIT = 18;
const OlderPostsJsx = (props) => { const OlderPosts = (props) => {
const [ state, setState ] = useState({ const [ state, setState ] = useState({
loaded: false, loaded: false,
}); });
@ -59,16 +58,16 @@ const OlderPostsJsx = (props) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithBackBarJsx navigation = { props.navigation }> ? <>
<PagedGridJsx <PagedGrid
posts = { state.posts } posts = { state.posts }
onShowMore = { _handleShowMore } onShowMore = { _handleShowMore }
navigation = { props.navigation }/> navigation = { props.navigation }/>
</ScreenWithBackBarJsx> </>
: <></> : <></>
} }
</> </>
); );
}; };
export default OlderPostsJsx; export default OlderPosts;

37
src/components/pages/profile.js
View File

@ -16,14 +16,10 @@ import HTML from "react-native-render-html";
import { withLeadingAcct, withoutHTML, pluralize } from "src/interface/rendering"; import { withLeadingAcct, withoutHTML, pluralize } from "src/interface/rendering";
import * as requests from "src/requests"; import * as requests from "src/requests";
import GridViewJsx from "src/components/posts/grid-view"; import GridView from "src/components/posts/grid-view";
import {
ScreenWithTrayJsx,
ScreenWithBackBarJsx,
} from "src/components/navigation/navigators";
import { MenuOption } from "react-native-popup-menu"; import { MenuOption } from "react-native-popup-menu";
import ContextMenuJsx from "src/components/context-menu.js"; import ContextMenu from "src/components/context-menu.js";
function getMutuals(yourFollowing, theirFollowers) { function getMutuals(yourFollowing, theirFollowers) {
// Where yours and theirs are arrays of followers, as returned by the API // Where yours and theirs are arrays of followers, as returned by the API
@ -60,7 +56,7 @@ const HTMLLink = ({link}) => {
} }
} }
const ViewProfileJsx = ({navigation}) => { const ViewProfile = ({navigation}) => {
// As rendered when opened from somewhere other than the tab bar // As rendered when opened from somewhere other than the tab bar
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false, loaded: false,
@ -163,10 +159,10 @@ const ViewProfileJsx = ({navigation}) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithBackBarJsx ? <>
active = { navigation.getParam("originTab") } active = { navigation.getParam("originTab") }
navigation = { navigation }> navigation = { navigation }>
<RawProfileJsx <RawProfile
navigation = { navigation } navigation = { navigation }
onFollow = { _handleFollow } onFollow = { _handleFollow }
onHide = { _handleHide } onHide = { _handleHide }
@ -176,14 +172,14 @@ const ViewProfileJsx = ({navigation}) => {
listedUsers = { state.listedUsers } listedUsers = { state.listedUsers }
followed = { state.followed } followed = { state.followed }
posts = { state.posts }/> posts = { state.posts }/>
</ScreenWithBackBarJsx> </>
: <></> : <></>
} }
</> </>
); );
} }
const ProfileJsx = ({ navigation }) => { const Profile = ({ navigation }) => {
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false, loaded: false,
}); });
@ -230,25 +226,22 @@ const ProfileJsx = ({ navigation }) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithTrayJsx ? <>
active = "Profile" <RawProfile
navigation = { navigation }
active = "Profile">
<RawProfileJsx
navigation = { navigation } navigation = { navigation }
own = { true } own = { true }
profile = { state.profile } profile = { state.profile }
posts = { state.posts } posts = { state.posts }
listedUsers = { state.listedUsers } listedUsers = { state.listedUsers }
notifs = { state.notifs }/> notifs = { state.notifs }/>
</ScreenWithTrayJsx> </>
: <></> : <></>
} }
</> </>
) )
}; };
const RawProfileJsx = (props) => { const RawProfile = (props) => {
let profileButton; let profileButton;
/* Some profiles won't have a note, and react-native-render-html will /* Some profiles won't have a note, and react-native-render-html will
@ -317,7 +310,7 @@ const RawProfileJsx = (props) => {
</View> </View>
{ {
!props.own !props.own
? <ContextMenuJsx ? <ContextMenu
containerStyle = { containerStyle = {
styles.profileContextContainer styles.profileContextContainer
}> }>
@ -330,7 +323,7 @@ const RawProfileJsx = (props) => {
<MenuOption <MenuOption
onSelect = { props.onBlock } onSelect = { props.onBlock }
text = "Block" /> text = "Block" />
</ContextMenuJsx> </ContextMenu>
: <></> : <></>
} }
</View> </View>
@ -389,7 +382,7 @@ const RawProfileJsx = (props) => {
{profileButton} {profileButton}
</View> </View>
<GridViewJsx <GridView
posts = { props.posts } posts = { props.posts }
navigation = { props.navigation }/> navigation = { props.navigation }/>
</View> </View>
@ -470,4 +463,4 @@ const styles = {
}, },
}; };
export { ViewProfileJsx, ProfileJsx as default }; export { ViewProfile, Profile as default };

74
src/components/pages/profile/notifications.js
View File

@ -11,8 +11,6 @@ import { FontAwesome } from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators";
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg"; const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
const TEST_NOTIFICATIONS = [ const TEST_NOTIFICATIONS = [
{ {
@ -139,32 +137,32 @@ function navigatePostFactory(nav, id) {
function renderNotification(notif, navigation) { function renderNotification(notif, navigation) {
switch(notif.type) { switch(notif.type) {
case "follow": case "follow":
return <FollowJsx return <Follow
data = { notif } data = { notif }
key = { notif.id } key = { notif.id }
navigation = { navigation } /> navigation = { navigation } />
case "follow_request": case "follow_request":
return <FollowRequestJsx return <FollowRequest
data = { notif } data = { notif }
key = { notif.id } key = { notif.id }
navigation = { navigation } /> navigation = { navigation } />
case "mention": case "mention":
return <MentionJsx return <Mention
data = { notif } data = { notif }
key = { notif.id } key = { notif.id }
navigation = { navigation } /> navigation = { navigation } />
case "reblog": case "reblog":
return <ReblogJsx return <Reblog
data = { notif } data = { notif }
key = { notif.id } key = { notif.id }
navigation = { navigation } /> navigation = { navigation } />
case "favourite": case "favourite":
return <FavouriteJsx return <Favourite
data = { notif } data = { notif }
key = { notif.id } key = { notif.id }
navigation = { navigation } /> navigation = { navigation } />
case "status": case "status":
return <StatusJsx return <Status
data = { notif } data = { notif }
key = { notif.id } key = { notif.id }
navigation = { navigation } /> navigation = { navigation } />
@ -174,7 +172,7 @@ function renderNotification(notif, navigation) {
} }
} }
const UserTextJsx = (props) => { const UserText = (props) => {
return ( return (
<Text <Text
style = { styles.bold } style = { styles.bold }
@ -190,7 +188,7 @@ const UserTextJsx = (props) => {
); );
}; };
const NotificationJsx = (props) => { const Notification = (props) => {
return ( return (
<View style = { styles.notif.container }> <View style = { styles.notif.container }>
<View style = { styles.notif.thumbnailContainer }> <View style = { styles.notif.thumbnailContainer }>
@ -223,25 +221,25 @@ const NotificationJsx = (props) => {
); );
}; };
const FollowJsx = (props) => { const Follow = (props) => {
return ( return (
<NotificationJsx <Notification
thumbnail = { props.data.account.avatar } thumbnail = { props.data.account.avatar }
thumbnailStyles = { styles.notif.circularThumbnail } thumbnailStyles = { styles.notif.circularThumbnail }
thumbnailPressCallback = { thumbnailPressCallback = {
navigateProfileFactory(props.navigation, props.data.account.acct) navigateProfileFactory(props.navigation, props.data.account.acct)
}> }>
<Text style = { styles.notif.content }> <Text style = { styles.notif.content }>
<UserTextJsx acct = { props.data.account.acct } /> <UserText acct = { props.data.account.acct } />
has followed you. has followed you.
</Text> </Text>
</NotificationJsx> </Notification>
); );
}; };
const FollowRequestJsx = (props) => { const FollowRequest = (props) => {
return ( return (
<NotificationJsx <Notification
thumbnail = { props.data.account.avatar } thumbnail = { props.data.account.avatar }
thumbnailStyles = { styles.notif.circularThumbnail } thumbnailStyles = { styles.notif.circularThumbnail }
thumbnailPressCallback = { thumbnailPressCallback = {
@ -251,14 +249,14 @@ const FollowRequestJsx = (props) => {
buttonLabel = { "Accept" } buttonLabel = { "Accept" }
buttonCallback = { () => console.log("Request accepted") }> buttonCallback = { () => console.log("Request accepted") }>
<Text style = { styles.notif.content }> <Text style = { styles.notif.content }>
<UserTextJsx acct = { props.data.account.acct } /> <UserText acct = { props.data.account.acct } />
has requested to follow you. has requested to follow you.
</Text> </Text>
</NotificationJsx> </Notification>
); );
}; };
const MentionJsx = (props) => { const Mention = (props) => {
let uri; let uri;
let imageStyle; let imageStyle;
let thumbnailCallback; let thumbnailCallback;
@ -282,24 +280,24 @@ const MentionJsx = (props) => {
} }
return ( return (
<NotificationJsx <Notification
thumbnail = { uri } thumbnail = { uri }
thumbnailStyles = { imageStyle }i thumbnailStyles = { imageStyle }i
thumbnailPressCallback = { thumbnailCallback }> thumbnailPressCallback = { thumbnailCallback }>
<Text style = { styles.notif.content }> <Text style = { styles.notif.content }>
<UserTextJsx acct = { props.data.account.acct } /> <UserText acct = { props.data.account.acct } />
mentioned you: mentioned you:
<Text style = { styles.notif.status }> <Text style = { styles.notif.status }>
"{ props.data.status.content }" "{ props.data.status.content }"
</Text> </Text>
</Text> </Text>
</NotificationJsx> </Notification>
); );
}; };
const ReblogJsx = (props) => { const Reblog = (props) => {
return ( return (
<NotificationJsx <Notification
thumbnail = { props.data.status.media_attachments[0].url } thumbnail = { props.data.status.media_attachments[0].url }
thumbnailPressCallback = { thumbnailPressCallback = {
navigatePostFactory(props.navigation, props.data.status.id) navigatePostFactory(props.navigation, props.data.status.id)
@ -310,16 +308,16 @@ const ReblogJsx = (props) => {
size = { 20 } size = { 20 }
style = { styles.notif.inlineIcon }/> style = { styles.notif.inlineIcon }/>
<Text style = { styles.notif.content }> <Text style = { styles.notif.content }>
<UserTextJsx acct = { props.data.account.acct } /> <UserText acct = { props.data.account.acct } />
shared your post. shared your post.
</Text> </Text>
</NotificationJsx> </Notification>
); );
}; };
const FavouriteJsx = (props) => { const Favourite = (props) => {
return ( return (
<NotificationJsx <Notification
thumbnail = { props.data.status.media_attachments[0].url } thumbnail = { props.data.status.media_attachments[0].url }
thumbnailPressCallback = { thumbnailPressCallback = {
navigatePostFactory(props.navigation, props.data.status.id) navigatePostFactory(props.navigation, props.data.status.id)
@ -330,29 +328,29 @@ const FavouriteJsx = (props) => {
color = "black" color = "black"
style = { styles.notif.inlineIcon }/> style = { styles.notif.inlineIcon }/>
<Text style = { styles.notif.content }> <Text style = { styles.notif.content }>
<UserTextJsx acct = { props.data.account.acct } /> <UserText acct = { props.data.account.acct } />
liked your post. liked your post.
</Text> </Text>
</NotificationJsx> </Notification>
); );
}; };
const StatusJsx = (props) => { const Status = (props) => {
return ( return (
<NotificationJsx <Notification
thumbnail = { props.data.status.media_attachments[0].url } thumbnail = { props.data.status.media_attachments[0].url }
thumbnailPressCallback = { thumbnailPressCallback = {
navigatePostFactory(props.navigation, props.data.status.id) navigatePostFactory(props.navigation, props.data.status.id)
}> }>
<Text style = { styles.notif.content }> <Text style = { styles.notif.content }>
<UserTextJsx acct = { props.data.account.acct } /> <UserText acct = { props.data.account.acct } />
just posted. just posted.
</Text> </Text>
</NotificationJsx> </Notification>
); );
}; };
const NotificationsJsx = ({navigation}) => { const Notifications = ({navigation}) => {
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false, loaded: false,
}); });
@ -378,7 +376,7 @@ const NotificationsJsx = ({navigation}) => {
}, []); }, []);
return ( return (
<ScreenWithBackBarJsx <>
navigation = { navigation }> navigation = { navigation }>
{ state.loaded ? { state.loaded ?
<View> <View>
@ -390,7 +388,7 @@ const NotificationsJsx = ({navigation}) => {
</View> </View>
: <></> : <></>
} }
</ScreenWithBackBarJsx> </>
); );
} }
@ -439,4 +437,4 @@ const styles = {
bold: { fontWeight: "bold" }, bold: { fontWeight: "bold" },
}; };
export default NotificationsJsx; export default Notifications;

10
src/components/pages/profile/settings.js
View File

@ -19,9 +19,7 @@ import * as ImagePicker from 'expo-image-picker';
import { withoutHTML } from "src/interface/rendering"; import { withoutHTML } from "src/interface/rendering";
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators"; const Settings = (props) => {
const SettingsJsx = (props) => {
const [state, setState] = useState({ const [state, setState] = useState({
loaded: false, loaded: false,
}); });
@ -136,7 +134,7 @@ const SettingsJsx = (props) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithBackBarJsx navigation = { props.navigation }> ? <>
<View style = { styles.avatar.container }> <View style = { styles.avatar.container }>
<Image <Image
source = { { uri: state.newAvatar.uri } } source = { { uri: state.newAvatar.uri } }
@ -217,7 +215,7 @@ const SettingsJsx = (props) => {
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScreenWithBackBarJsx> </>
: <></> : <></>
} }
</> </>
@ -289,4 +287,4 @@ const styles = {
}, },
}; };
export default SettingsJsx; export default Settings;

11
src/components/pages/publish.js
View File

@ -9,7 +9,6 @@ import {
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { getAutoHeight } from "src/interface/rendering"; import { getAutoHeight } from "src/interface/rendering";
import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import mime from "mime"; import mime from "mime";
@ -18,7 +17,7 @@ import * as Permissions from "expo-permissions";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests"; import * as requests from "src/requests";
const PublishJsx = ({ navigation }) => { const Publish = ({ navigation }) => {
const [ state, setState ] = useState({ const [ state, setState ] = useState({
loaded: false, loaded: false,
}); });
@ -131,9 +130,7 @@ const PublishJsx = ({ navigation }) => {
return ( return (
<> <>
{ state.loaded { state.loaded
? <ScreenWithTrayJsx ? <>
active = "Publish"
navigation = { navigation } >
<View style = { styles.preview.container }> <View style = { styles.preview.container }>
<Image <Image
style = {[ style = {[
@ -181,7 +178,7 @@ const PublishJsx = ({ navigation }) => {
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScreenWithTrayJsx> </>
: <></> : <></>
} }
</> </>
@ -243,4 +240,4 @@ const styles = {
}, },
}; };
export { PublishJsx as default }; export { Publish as default };

13
src/components/pages/user-list.js
View File

@ -8,15 +8,14 @@ import {
TouchableOpacity, TouchableOpacity,
} from "react-native"; } from "react-native";
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators.js"; import ModerateMenu from "src/components/moderate-menu.js";
import ModerateMenuJsx from "src/components/moderate-menu.js";
const UserListJsx = ({navigation}) => { const UserList = ({navigation}) => {
const data = navigation.getParam("data", []) const data = navigation.getParam("data", [])
const context = navigation.getParam("context", ""); const context = navigation.getParam("context", "");
return ( return (
<ScreenWithBackBarJsx navigation = { navigation }> <>
{ {
context ? context ?
<Text style = { styles.context }> <Text style = { styles.context }>
@ -50,13 +49,13 @@ const UserListJsx = ({navigation}) => {
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<ModerateMenuJsx <ModerateMenu
containerStyle = { styles.moderateMenu } containerStyle = { styles.moderateMenu }
triggerStyle = { styles.ellipsis } /> triggerStyle = { styles.ellipsis } />
</View> </View>
) )
} }
</ScreenWithBackBarJsx> </>
); );
}; };
@ -100,4 +99,4 @@ const styles = {
}, },
}; };
export { UserListJsx as default }; export { UserList as default };

38
src/components/pages/view-comments.js
View File

@ -19,8 +19,7 @@ import {
} from "src/interface/rendering"; } from "src/interface/rendering";
import { activeOrNot } from "src/interface/interactions"; import { activeOrNot } from "src/interface/interactions";
import TimelineViewJsx from "src/components/posts/timeline-view"; import TimelineView from "src/components/posts/timeline-view";
import BackBarJsx from "src/components/navigation/back-bar";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import * as requests from "src/requests"; import * as requests from "src/requests";
@ -124,7 +123,7 @@ function threadify(descendants) {
return sorted; return sorted;
} }
const CommentJsx = (props) => { const Comment = (props) => {
const menuOptionsStyles = { const menuOptionsStyles = {
optionWrapper: { // The wrapper around a single option optionWrapper: { // The wrapper around a single option
paddingLeft: SCREEN_WIDTH / 15, paddingLeft: SCREEN_WIDTH / 15,
@ -234,13 +233,14 @@ const CommentJsx = (props) => {
); );
} }
const ViewCommentsJsx = (props) => { const ViewComments = (props) => {
let [state, setState] = useState({ let [state, setState] = useState({
postData: props.navigation.getParam("postData", null),
loaded: false, loaded: false,
reply: "", reply: "",
}); });
const postData = props.route.params.postData;
useEffect(() => { useEffect(() => {
let profile, instance, accessToken; let profile, instance, accessToken;
AsyncStorage AsyncStorage
@ -254,7 +254,7 @@ const ViewCommentsJsx = (props) => {
accessToken = JSON.parse(tokenPair[1]).access_token; accessToken = JSON.parse(tokenPair[1]).access_token;
return requests return requests
.fetchStatusContext(instance, state.postData.id, accessToken) .fetchStatusContext(instance, postData.id, accessToken)
}) })
.then(context => { .then(context => {
setState({...state, setState({...state,
@ -263,8 +263,8 @@ const ViewCommentsJsx = (props) => {
instance, instance,
accessToken, accessToken,
inReplyTo: { inReplyTo: {
acct: state.postData.account.acct, acct: postData.account.acct,
id: state.postData.id, id: postData.id,
}, },
loaded: true, loaded: true,
}); });
@ -275,7 +275,7 @@ const ViewCommentsJsx = (props) => {
// Fetch an updated context to rerender the page // Fetch an updated context to rerender the page
const { descendants } = await requests.fetchStatusContext( const { descendants } = await requests.fetchStatusContext(
state.instance, state.instance,
state.postData.id, postData.id,
state.accessToken, state.accessToken,
); );
@ -291,7 +291,7 @@ const ViewCommentsJsx = (props) => {
* Returns a new collection of threads without the comment with the * Returns a new collection of threads without the comment with the
* given id * given id
*/ */
return state.descendants.map(thread => return state.descendants.map(thread =>
thread.filter(comment => comment.id != id) thread.filter(comment => comment.id != id)
).filter(thread => thread.length > 0); ).filter(thread => thread.length > 0);
@ -351,8 +351,8 @@ const ViewCommentsJsx = (props) => {
const _handleCancelSubReply = () => { const _handleCancelSubReply = () => {
setState({...state, setState({...state,
inReplyTo: { inReplyTo: {
acct: state.postData.account.acct, acct: postData.account.acct,
id: state.postData.id, id: postData.id,
}, },
}); });
}; };
@ -371,8 +371,8 @@ const ViewCommentsJsx = (props) => {
setState({...state, setState({...state,
// Reset the comment form // Reset the comment form
inReplyTo: { inReplyTo: {
acct: state.postData.account.acct, acct: postData.account.acct,
id: state.postData.id, id: postData.id,
}, },
reply: "", reply: "",
@ -383,7 +383,7 @@ const ViewCommentsJsx = (props) => {
}; };
const PartialComment = (props) => ( const PartialComment = (props) => (
<CommentJsx <Comment
{ ...props } { ...props }
profile = { state.profile } profile = { state.profile }
onFavouriteFactory = { onFavouriteFactory } onFavouriteFactory = { onFavouriteFactory }
@ -397,14 +397,12 @@ const ViewCommentsJsx = (props) => {
<> <>
{ state.loaded ? { state.loaded ?
<SafeAreaView style = { { flex: 1 } }> <SafeAreaView style = { { flex: 1 } }>
<StatusBarSpace color = "white"/>
<BackBarJsx navigation = { props.navigation }/>
<ScrollView> <ScrollView>
{ state.loaded { state.loaded
? <View> ? <View>
<View style = { styles.parentPost }> <View style = { styles.parentPost }>
<PartialComment <PartialComment
data = { state.postData } /> data = { postData } />
</View> </View>
<View> <View>
{ state.descendants.length != 0 { state.descendants.length != 0
@ -443,7 +441,7 @@ const ViewCommentsJsx = (props) => {
</ScrollView> </ScrollView>
<View style = { styles.form.container }> <View style = { styles.form.container }>
<> <>
{ state.inReplyTo.id != state.postData.id { state.inReplyTo.id != postData.id
? <TouchableOpacity onPress = { _handleCancelSubReply }> ? <TouchableOpacity onPress = { _handleCancelSubReply }>
<View style = { styles.form.inReplyTo.container }> <View style = { styles.form.inReplyTo.container }>
<Ionicons name="close" size={24} color="#666" /> <Ionicons name="close" size={24} color="#666" />
@ -582,4 +580,4 @@ const styles = {
}, },
}; };
export default ViewCommentsJsx; export default ViewComments;

46
src/components/pages/view-post.js
View File

@ -1,32 +1,20 @@
import React, { useState, useEffect } from "react"; import React from "react";
import { ScrollView } from "react-native";
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators"; import { PostByData } from "src/components/posts/post";
import { PostByDataJsx } from "src/components/posts/post";
const ViewPostJsx = ({navigation}) => { const ViewPost = ({ navigation, route }) => (
const [state, setState] = useState({ <ScrollView>
post: navigation.getParam("post", null), <PostByData
loaded: false, navigation = { navigation }
}); afterDelete = {
() => navigation.goBack()
}
afterModerate = {
() => navigation.goBack()
}
data = { route.params.post } />
</ScrollView>
)
if (state.post == null) { export default ViewPost;
throw Error("Post not given when navigating to ViewPost!");
}
return (
<ScreenWithBackBarJsx
navigation = { navigation }>
<PostByDataJsx
navigation = { navigation }
afterDelete = {
() => navigation.goBack()
}
afterModerate = {
() => navigation.goBack()
}
data = { state.post } />
</ScreenWithBackBarJsx>
);
}
export default ViewPostJsx;

8
src/components/posts/grid-view.js
View File

@ -16,7 +16,7 @@ function partition(arr, size) {
return newArray return newArray
} }
const GridPostJsx = (props) => { const GridPost = (props) => {
return ( return (
<TouchableOpacity <TouchableOpacity
onPress={ () => { onPress={ () => {
@ -33,7 +33,7 @@ const GridPostJsx = (props) => {
) )
} }
const GridViewJsx = (props) => { const GridView = (props) => {
// Ensure only posts with media get into the grid // Ensure only posts with media get into the grid
const postsWithMedia = props.posts.filter( const postsWithMedia = props.posts.filter(
p => p.media_attachments != null p => p.media_attachments != null
@ -52,7 +52,7 @@ const GridViewJsx = (props) => {
row.map((post) => { row.map((post) => {
return ( return (
<View key = { post.id }> <View key = { post.id }>
<GridPostJsx <GridPost
navigation = { props.navigation } navigation = { props.navigation }
data = { post } /> data = { post } />
</View> </View>
@ -80,4 +80,4 @@ const styles = {
}, },
}; };
export default GridViewJsx; export default GridView;

4
src/components/posts/paged-grid.js
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { View, TouchableOpacity, Text } from "react-native"; import { View, TouchableOpacity, Text } from "react-native";
import GridViewJsx from "src/components/posts/grid-view"; import GridView from "src/components/posts/grid-view";
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg"; const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
const TEST_POSTS = [ const TEST_POSTS = [
@ -34,7 +34,7 @@ const TEST_POSTS = [
const PagedGridJSX = (props) => { const PagedGridJSX = (props) => {
return ( return (
<View> <View>
<GridViewJsx <GridView
posts = { props.posts } posts = { props.posts }
navigation = { props.navigation } navigation = { props.navigation }
openPostCallback = { openPostCallback = {

12
src/components/posts/post-action-bar.js
View File

@ -9,7 +9,7 @@ import {
import { FontAwesome } from "@expo/vector-icons"; import { FontAwesome } from "@expo/vector-icons";
import { activeOrNot } from "src/interface/interactions"; import { activeOrNot } from "src/interface/interactions";
const PostActionJsx = (props) => { const PostAction = (props) => {
return ( return (
<TouchableOpacity <TouchableOpacity
onPress = { props.onPress }> onPress = { props.onPress }>
@ -28,7 +28,7 @@ const PostActionJsx = (props) => {
) )
} }
const PostActionBarJsx = (props) => { const PostActionBar = (props) => {
const icons = { const icons = {
heart: { heart: {
active: "heart", active: "heart",
@ -45,17 +45,17 @@ const PostActionBarJsx = (props) => {
} }
return ( return (
<View style = { styles.flexContainer }> <View style = { styles.flexContainer }>
<PostActionJsx <PostAction
pack = { icons.heart } pack = { icons.heart }
active = { props.favourited } active = { props.favourited }
onPress = { props.onFavourite } /> onPress = { props.onFavourite } />
<PostActionJsx <PostAction
pack = { icons.reblog } pack = { icons.reblog }
active = { props.reblogged } active = { props.reblogged }
onPress = { props.onReblog }/> onPress = { props.onReblog }/>
<PostActionJsx <PostAction
pack = { icons.bookmark } pack = { icons.bookmark }
active = { props.bookmarked } active = { props.bookmarked }
onPress = { props.onBookmark } /> onPress = { props.onBookmark } />
@ -71,4 +71,4 @@ const styles = {
}, },
} }
export default PostActionBarJsx; export default PostActionBar;

30
src/components/posts/post.js
View File

@ -20,13 +20,12 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests"; import * as requests from "src/requests";
import { withLeadingAcct } from "src/interface/rendering"; import { withLeadingAcct } from "src/interface/rendering";
import PostActionBarJsx from "src/components/posts/post-action-bar"; import PostActionBar from "src/components/posts/post-action-bar";
import { MenuOption } from "react-native-popup-menu"; import { MenuOption } from "react-native-popup-menu";
import ContextMenuJsx from "src/components/context-menu.js"; import ContextMenu from "src/components/context-menu.js";
const SCREEN_WIDTH = Dimensions.get("window").width; const SCREEN_WIDTH = Dimensions.get("window").width;
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
function getDimensionsPromises(uris) { function getDimensionsPromises(uris) {
return uris.map(attachment => new Promise(resolve => { return uris.map(attachment => new Promise(resolve => {
@ -52,19 +51,18 @@ function handleFavouriteFactory(state, setState) {
}; };
} }
const PostImageJsx = (props) => { const PostImage = (props) => {
return <Image return <Image
source = { { uri: props.uri } } source = { { uri: props.uri } }
style = { style = {
{ {
flex: 1,
width: SCREEN_WIDTH, width: SCREEN_WIDTH,
height: getAutoHeight(props.width, props.height, SCREEN_WIDTH), height: getAutoHeight(props.width, props.height, SCREEN_WIDTH),
} }
} /> } />
}; };
export const RawPostJsx = (props) => { export const RawPost = (props) => {
const repliesCount = props.data.replies_count; const repliesCount = props.data.replies_count;
let commentsText; let commentsText;
@ -95,7 +93,7 @@ export const RawPostJsx = (props) => {
{ props.data.account.acct } { props.data.account.acct }
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<ContextMenuJsx <ContextMenu
containerStyle = { styles.menu } containerStyle = { styles.menu }
colour = "#666"> colour = "#666">
{ props.own { props.own
@ -116,7 +114,7 @@ export const RawPostJsx = (props) => {
text = "Block" /> text = "Block" />
</> </>
} }
</ContextMenuJsx> </ContextMenu>
</View> </View>
{ {
props.data.media_attachments.length > 1 ? props.data.media_attachments.length > 1 ?
@ -129,7 +127,7 @@ export const RawPostJsx = (props) => {
{ {
props.data.media_attachments props.data.media_attachments
.map((attachment, i) => { .map((attachment, i) => {
return (<PostImageJsx return (<PostImage
key = { i } key = { i }
uri = { attachment.url } uri = { attachment.url }
width = { props.dimensions[i][0] } width = { props.dimensions[i][0] }
@ -137,12 +135,12 @@ export const RawPostJsx = (props) => {
}) })
} }
</ScrollView> </ScrollView>
: <PostImageJsx : <PostImage
uri = { props.data.media_attachments[0].url } uri = { props.data.media_attachments[0].url }
width = { props.dimensions[0][0] } width = { props.dimensions[0][0] }
height = { props.dimensions[0][1] } /> height = { props.dimensions[0][1] } />
} }
<PostActionBarJsx <PostActionBar
favourited = { props.data.favourited } favourited = { props.data.favourited }
reblogged = { props.data.reblogged } reblogged = { props.data.reblogged }
bookmarked = { props.data.bookmarked } bookmarked = { props.data.bookmarked }
@ -161,7 +159,6 @@ export const RawPostJsx = (props) => {
<TouchableOpacity <TouchableOpacity
onPress = { onPress = {
() => props.navigation.navigate("ViewComments", { () => props.navigation.navigate("ViewComments", {
originTab: props.navigation.getParam("originTab"),
postData: props.data postData: props.data
}) })
}> }>
@ -178,7 +175,7 @@ export const RawPostJsx = (props) => {
); );
} }
export const PostByDataJsx = (props) => { export const PostByData = (props) => {
/* /*
* Renders a post where the data is supplied directly to the element through * Renders a post where the data is supplied directly to the element through
* its properties, as it is in a timeline. * its properties, as it is in a timeline.
@ -211,7 +208,7 @@ export const PostByDataJsx = (props) => {
) )
.then(dimensions => { .then(dimensions => {
setState({...state, setState({...state,
dimensions: dimensions, dimensions,
instance, instance,
accessToken, accessToken,
own, own,
@ -284,7 +281,6 @@ export const PostByDataJsx = (props) => {
state.accessToken state.accessToken
); );
} }
console.warn(newStatus.bookmarked);
setState({...state, setState({...state,
data: newStatus, data: newStatus,
@ -350,7 +346,7 @@ export const PostByDataJsx = (props) => {
return ( return (
<View> <View>
{ state.loaded && !state.deleted ? { state.loaded && !state.deleted ?
<RawPostJsx <RawPost
data = { state.data } data = { state.data }
dimensions = { state.dimensions } dimensions = { state.dimensions }
onFavourite = { _handleFavourite } onFavourite = { _handleFavourite }
@ -362,7 +358,7 @@ export const PostByDataJsx = (props) => {
onBlock = { _handleBlock } onBlock = { _handleBlock }
own = { state.own } own = { state.own }
navigation = { props.navigation }/> navigation = { props.navigation }/>
: <View></View> } : <></> }
</View> </View>
); );
} }

8
src/components/posts/timeline-view.js
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { View } from "react-native"; import { View } from "react-native";
import { PostByDataJsx } from "src/components/posts/post"; import { PostByData } from "src/components/posts/post";
const TimelineViewJsx = (props) => { const TimelineView = (props) => {
// Count the number of posts that have already loaded // Count the number of posts that have already loaded
const [postsLoaded, setPostsLoaded] = useState(0); const [postsLoaded, setPostsLoaded] = useState(0);
@ -30,7 +30,7 @@ const TimelineViewJsx = (props) => {
{ props.posts.map((post, i) => { { props.posts.map((post, i) => {
return ( return (
<View key = { i } > <View key = { i } >
<PostByDataJsx <PostByData
navigation = { props.navigation } navigation = { props.navigation }
data = { post } data = { post }
onPostLoaded = { _handlePostLoaded }/> onPostLoaded = { _handlePostLoaded }/>
@ -41,4 +41,4 @@ const TimelineViewJsx = (props) => {
); );
}; };
export default TimelineViewJsx; export default TimelineView;