Add icons

zio/stable
Paul Frazee 2022-07-19 16:04:45 -05:00
parent dc55f58004
commit e78143b3dc
10 changed files with 218 additions and 57 deletions

View File

@ -29,7 +29,7 @@ Uses:
- Web: `yarn web`
- Tips
- `npx react-native info` Checks what has been installed.
- On M1 macs, you need to exclude "arm64" from the target architectures
- On M1 macs, [you need to exclude "arm64" from the target architectures](https://stackoverflow.com/a/65399525)
- Annoyingly this must be re-set via XCode after every pod install
- The android simulator won't be able to access localhost services unless you run `adb reverse tcp:{PORT} tcp:{PORT}`
- For instance, the localhosted dev-wallet will need `adb reverse tcp:3001 tcp:3001`

View File

@ -296,6 +296,8 @@ PODS:
- RNScreens (3.13.1):
- React-Core
- React-RCTImage
- RNSVG (12.4.0):
- React-Core
- Yoga (1.14.0)
DEPENDENCIES:
@ -335,6 +337,7 @@ DEPENDENCIES:
- "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
- RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
- RNScreens (from `../node_modules/react-native-screens`)
- RNSVG (from `../node_modules/react-native-svg`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
SPEC REPOS:
@ -410,6 +413,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-inappbrowser-reborn"
RNScreens:
:path: "../node_modules/react-native-screens"
RNSVG:
:path: "../node_modules/react-native-svg"
Yoga:
:path: "../node_modules/react-native/ReactCommon/yoga"
@ -449,6 +454,7 @@ SPEC CHECKSUMS:
RNCAsyncStorage: 466b9df1a14bccda91da86e0b7d9a345d78e1673
RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357
RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
RNSVG: 3dd44d99d1c18e1342aee4bfa53ab3f6a8c4865f
Yoga: 99652481fcd320aefa4a7ef90095b95acd181952
PODFILE CHECKSUM: cf94853ebcb0d8e0d027dca9ab7a4ede886a8f20

View File

@ -463,6 +463,7 @@
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = A6GRZHF6BV;
ENABLE_BITCODE = NO;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
INFOPLIST_FILE = app/Info.plist;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
@ -490,6 +491,7 @@
CODE_SIGN_ENTITLEMENTS = app/app.entitlements;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = A6GRZHF6BV;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
INFOPLIST_FILE = app/Info.plist;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
@ -540,7 +542,7 @@
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
@ -611,7 +613,7 @@
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

View File

@ -16,6 +16,10 @@
"@adxp/auth": "*",
"@adxp/common": "*",
"@adxp/mock-api": "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#74a1f810a342aa4b58a54724e21c57d2faa5e72e",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-native-fontawesome": "^0.3.0",
"@react-native-async-storage/async-storage": "^1.17.6",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.10",
@ -32,6 +36,7 @@
"react-native-inappbrowser-reborn": "^3.6.3",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.13.1",
"react-native-svg": "^12.4.0",
"react-native-url-polyfill": "^1.3.0",
"react-native-web": "^0.17.7",
"ucans": "0.9.1"

View File

@ -1,31 +1,10 @@
import 'react-native-url-polyfill/auto'
import React, {useState, useEffect} from 'react'
import moment from 'moment'
import {whenWebCrypto} from './platform/polyfills.native'
import * as view from './view/index'
import {RootStoreModel, setupState, RootStoreProvider} from './state'
import * as Routes from './view/routes'
moment.updateLocale('en', {
relativeTime: {
future: 'in %s',
past: '%s ago',
s: 'a few seconds',
ss: '%ds',
m: 'a minute',
mm: '%dm',
h: 'an hour',
hh: '%dh',
d: 'a day',
dd: '%dd',
w: 'a week',
ww: '%dw',
M: 'a month',
MM: '%dmo',
y: 'a year',
yy: '%dy',
},
})
function App() {
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
undefined,
@ -33,7 +12,12 @@ function App() {
// init
useEffect(() => {
whenWebCrypto.then(() => setupState()).then(setRootStore)
whenWebCrypto
.then(() => {
view.setup()
return setupState()
})
.then(setRootStore)
}, [])
// show nothing prior to init

View File

@ -1,29 +1,8 @@
import React, {useState, useEffect} from 'react'
import moment from 'moment'
import * as view from './view/index'
import {RootStoreModel, setupState, RootStoreProvider} from './state'
import * as Routes from './view/routes'
moment.updateLocale('en', {
relativeTime: {
future: 'in %s',
past: '%s ago',
s: 'a few seconds',
ss: '%ds',
m: 'a minute',
mm: '%dm',
h: 'an hour',
hh: '%dh',
d: 'a day',
dd: '%dd',
w: 'a week',
ww: '%dw',
M: 'a month',
MM: '%dmo',
y: 'a year',
yy: '%dy',
},
})
function App() {
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
undefined,
@ -31,6 +10,7 @@ function App() {
// init
useEffect(() => {
view.setup()
setupState().then(setRootStore)
}, [])

View File

@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite'
import {Text, Image, ImageSourcePropType, StyleSheet, View} from 'react-native'
import {bsky} from '@adxp/mock-api'
import moment from 'moment'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FeedViewItemModel} from '../../state/models/feed-view'
const IMAGES: Record<string, ImageSourcePropType> = {
@ -20,9 +21,12 @@ export const FeedItem = observer(function FeedItem({
return (
<View style={styles.outer}>
{item.repostedBy && (
<Text style={styles.repostedBy}>
Reposted by {item.repostedBy.displayName}
</Text>
<View style={styles.repostedBy}>
<FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
<Text style={styles.repostedByText}>
Reposted by {item.repostedBy.displayName}
</Text>
</View>
)}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
@ -44,6 +48,36 @@ export const FeedItem = observer(function FeedItem({
</Text>
</View>
<Text style={styles.postText}>{record.text}</Text>
<View style={styles.ctrls}>
<View style={styles.ctrl}>
<FontAwesomeIcon
style={styles.ctrlReplyIcon}
icon={['far', 'comment']}
/>
<Text>{item.replyCount}</Text>
</View>
<View style={styles.ctrl}>
<FontAwesomeIcon
style={styles.ctrlRepostIcon}
icon="retweet"
size={22}
/>
<Text>{item.repostCount}</Text>
</View>
<View style={styles.ctrl}>
<FontAwesomeIcon
style={styles.ctrlLikeIcon}
icon={['far', 'heart']}
/>
<Text>{item.likeCount}</Text>
</View>
<View style={styles.ctrl}>
<FontAwesomeIcon
style={styles.ctrlShareIcon}
icon="share-from-square"
/>
</View>
</View>
</View>
</View>
</View>
@ -58,7 +92,14 @@ const styles = StyleSheet.create({
padding: 10,
},
repostedBy: {
flexDirection: 'row',
paddingLeft: 70,
},
repostedByIcon: {
marginRight: 2,
color: 'gray',
},
repostedByText: {
color: 'gray',
fontWeight: 'bold',
fontSize: 13,
@ -100,5 +141,32 @@ const styles = StyleSheet.create({
},
postText: {
fontSize: 15,
paddingBottom: 5,
},
ctrls: {
flexDirection: 'row',
},
ctrl: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
paddingLeft: 4,
paddingRight: 4,
},
ctrlReplyIcon: {
marginRight: 5,
color: 'gray',
},
ctrlRepostIcon: {
marginRight: 5,
color: 'gray',
},
ctrlLikeIcon: {
marginRight: 5,
color: 'gray',
},
ctrlShareIcon: {
marginRight: 5,
color: 'gray',
},
})

31
src/view/index.ts 100644
View File

@ -0,0 +1,31 @@
import moment from 'moment'
import {library} from '@fortawesome/fontawesome-svg-core'
import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
export function setup() {
moment.updateLocale('en', {
relativeTime: {
future: 'in %s',
past: '%s ago',
s: 'a few seconds',
ss: '%ds',
m: 'a minute',
mm: '%dm',
h: 'an hour',
hh: '%dh',
d: 'a day',
dd: '%dd',
w: 'a week',
ww: '%dw',
M: 'a month',
MM: '%dmo',
y: 'a year',
yy: '%dy',
},
})
library.add(faComment, faHeart, faRetweet, faShareFromSquare)
}

View File

@ -14,9 +14,6 @@ export function Home(/*{navigation}: RootTabsScreenProps<'Home'>*/) {
return (
<Shell>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>
Hello, {store.me.displayName} ({store.me.name})
</Text>
<Feed feed={store.homeFeed} />
</View>
</Shell>

View File

@ -1356,6 +1356,40 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
"@fortawesome/fontawesome-common-types@6.1.1":
version "6.1.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
integrity sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==
"@fortawesome/fontawesome-svg-core@^6.1.1":
version "6.1.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz#3424ec6182515951816be9b11665d67efdce5b5f"
integrity sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.1.1"
"@fortawesome/free-regular-svg-icons@^6.1.1":
version "6.1.1"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz#3f2f58262a839edf0643cbacee7a8a8230061c98"
integrity sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.1.1"
"@fortawesome/free-solid-svg-icons@^6.1.1":
version "6.1.1"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz#3369e673f8fe8be2fba30b1ec274d47490a830a6"
integrity sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.1.1"
"@fortawesome/react-native-fontawesome@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@fortawesome/react-native-fontawesome/-/react-native-fontawesome-0.3.0.tgz#b59c45cdae2451d15f826f937d6e1a6e9dca0c74"
integrity sha512-wSfetdK4+b/pvPbM2v+bZ5hfNlwtk9l3QuJo59sbMrxJalfX7BuF2WsSIWMSxfWwSsbOtY4+TUs6uw/rE59NJA==
dependencies:
humps "^2.0.1"
prop-types "^15.7.2"
"@hapi/hoek@^9.0.0":
version "9.3.0"
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@ -4812,6 +4846,17 @@ css-select@^4.1.3:
domutils "^2.8.0"
nth-check "^2.0.1"
css-select@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
dependencies:
boolbase "^1.0.0"
css-what "^6.1.0"
domhandler "^5.0.2"
domutils "^3.0.1"
nth-check "^2.0.1"
css-tree@1.0.0-alpha.37:
version "1.0.0-alpha.37"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@ -4833,7 +4878,7 @@ css-what@^3.2.1:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
css-what@^6.0.1:
css-what@^6.0.1, css-what@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
@ -5229,12 +5274,21 @@ dom-serializer@^1.0.1:
domhandler "^4.2.0"
entities "^2.0.0"
dom-serializer@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
dependencies:
domelementtype "^2.3.0"
domhandler "^5.0.2"
entities "^4.2.0"
domelementtype@1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
domelementtype@^2.0.1, domelementtype@^2.2.0:
domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@ -5253,6 +5307,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
dependencies:
domelementtype "^2.2.0"
domhandler@^5.0.1, domhandler@^5.0.2:
version "5.0.3"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
dependencies:
domelementtype "^2.3.0"
domutils@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@ -5270,6 +5331,15 @@ domutils@^2.5.2, domutils@^2.8.0:
domelementtype "^2.2.0"
domhandler "^4.2.0"
domutils@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
dependencies:
dom-serializer "^2.0.0"
domelementtype "^2.3.0"
domhandler "^5.0.1"
dot-case@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@ -5429,6 +5499,11 @@ entities@^2.0.0:
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
entities@^4.2.0:
version "4.3.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==
envinfo@^7.7.2:
version "7.8.1"
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
@ -6908,6 +6983,11 @@ human-signals@^2.1.0:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
humps@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
integrity sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==
hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
@ -10831,7 +10911,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@*, prop-types@^15.6.0, prop-types@^15.8.1:
prop-types@*, prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -11062,6 +11142,14 @@ react-native-screens@^3.13.1:
react-freeze "^1.0.0"
warn-once "^0.1.0"
react-native-svg@^12.4.0:
version "12.4.0"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.4.0.tgz#934a89d3da7936aa76361b748e4ba58a1bcb9bf5"
integrity sha512-m2Hn5FMC7wF/BSwxrbZFVElOMAJZXLJl2bBMDXvs/fFy2v4oLBfcw8MwaBTlaIyk0p24WRC9lWv51kSA/Plj5w==
dependencies:
css-select "^5.1.0"
css-tree "^1.1.3"
react-native-url-polyfill@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-1.3.0.tgz#c1763de0f2a8c22cc3e959b654c8790622b6ef6a"