From 6cfac2be982f192280649ba8f51ee09bd9ba7aa4 Mon Sep 17 00:00:00 2001 From: natjms Date: Sun, 28 Feb 2021 11:21:35 -0400 Subject: [PATCH 1/7] Replace the download button with a bookmark --- .../post-actions/bookmark-active.png | Bin 0 -> 8764 bytes .../post-actions/bookmark-inactive.png | Bin 0 -> 10128 bytes src/components/posts/post-action-bar.js | 33 +++++++++++------- 3 files changed, 20 insertions(+), 13 deletions(-) create mode 100644 assets/eva-icons/post-actions/bookmark-active.png create mode 100644 assets/eva-icons/post-actions/bookmark-inactive.png diff --git a/assets/eva-icons/post-actions/bookmark-active.png b/assets/eva-icons/post-actions/bookmark-active.png new file mode 100644 index 0000000000000000000000000000000000000000..123d321117c0750693903e28149246b8dbc6a755 GIT binary patch literal 8764 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 BNKOC% literal 0 HcmV?d00001 diff --git a/assets/eva-icons/post-actions/bookmark-inactive.png b/assets/eva-icons/post-actions/bookmark-inactive.png new file mode 100644 index 0000000000000000000000000000000000000000..142f644e007cb58b81ee664476754bcb4b8d502e GIT binary patch literal 10128 zcmeHtc|6qJ+y7XKBt<0=jgjnTFt)K|4cW;~j9C~N!x%edONuO!B0~0EWM8sV*2t1Q zyX;$(?KgBU-M{DleV^a`dOgp7_sna?=UnG~y|3$B=eo{u&TAfNX(*kcVx$590B2N` z6?BMyy^lWUP7=Q(a;pLX02%}L+lB-kxC_u8k3(Z@Q9y#5Jqn0&#h?KI*TLRslPCli zjpE^D#j_;mI==vXi`-92?Ttg@lCU4;_Brb~u~>Hx8J7 zD0+71@ho`j)8x47M(0>*d~MpU+u`W*ox|rF%ad|bk@k`OWYbQEyPi7?tt zl#e54D<>NatfE3EH9H^f)qn5zUM}D1X)BOMAK;}=+`nhqvFjBg;?i+XUsR_yWx6PR zTW49+E|!{o`%PWedWUD;cCVW-h5IE|gLivVMRI3p&Evy-186k{woB{k8ZNkGUqP6X zf9Md-c+<>2N}Gtxv$uT4&;4YFuZ}17$<<Qb++DrstVqU+Hk?|FsGw99!(EwP7~fuKz7dpluGVv8*l>JxX0BCy~>hJR`+Q2&%A*$rV~2((}-(viPxCdz|F@fLSkq)t%ySh|jGd(kIj zlO-o8CSzLP7~5VndNb4v*gUM7SG6_TY|&lY;+IAt8Z0mw8I690>idk2N07un)4zl2 z?H&Gl*ZQ`$t6Y#icF<`t-=|wcVx?fgu42W(doVmgLwfpCkH(EjHk(>0_-DwPnqrO6L$W*XWBFFDBrMS ze6toBv$>$OU2%4Aj7Gtew?$E@Luj+gVbPjmv5o%igNWwH7mTqc1-Z-sKWKp!tes=~ z^V`KL0-tL#hj@;H8Jynps`GjxSUGlbZp(H)W}7QxzV9YGH(h!8Wan20gZvWJSd(2N z)DO8Xm$B=DhTf zwK!W4aw%zjnCC)KVL{7CK6|@v?C1MGa-9?7An1H;N2#8y6tQztA2QY15GxYiPpZM= z4!jJ=6SoJK&IVpb$XQpk%kvXFHQ(UW-*3Rb-ra_-_>N~Nn6V3izL)VC(CJSv1=P)O zxpz;uJ-t1?#upg}sW>%q!iiLD!-A$qA#FX)6CNhY7JHd_|OxnGXqi@YPo8 zO=*wOnW`3`*;C{(s5bH1j6?z9futr0!!flo4V{NKkdQt~wm74WY=229R?X~P(^W~J)~Zbx z<4IgyJilZA?T*Q$xTVo2rXLBMiIILFs;HULq(uwG=c<$fCTsE=zN+7a%Z?g@Ng1`y3@zIAYY0Yr#7a$SUKgEETq>Kz=IeeH zGAi&7@!-u*@gpopkY~T-=D=#Q#K)MyCtNuJTJug)^G3;8on+6YCp4)sRw#zNDI>(%R@UPa=l0#-toTTc}RlpBBGhO~3; zE_QF^%2Y;7Q;gCI+PEZiJ?xXtd!K0~UgoCBE;RDJsmT^&dlNpK9Y)Tp*x-U(kr$8HJ3>_gxQiK2%J1)TJrT1W_4&zHOsh4Ju8e+hd%>nKc(H0ml>9yI z8`_yG=a6Dfpk!%y&X0KjNm4PHQ3*$V4oTS}WXpvoXOr}yfW|^1!iJrGC;yB5RFB3? zU4W~Hr*h5O7tinc6Y>%Z>H5QPr?s`Dai!bbTPiuOW=zxdO)DotcSEdh*eX1@_lB02 zvB(l(KD%b=YcWE5So&u2CQI~FFh{%GvgwW26TD*e9gIGsVq?>>2Bo4A6=RQG1OzPB zmT$M+rSX3Z`s84$Vg2-*f7#8MyQAY4S}nbTp_UI@$Con$7y<*sYtLvMd!cx=nG%o|5^8q=Df{9Ok8Q)fKYg;lqhR1-lqT;1$>5@Iff;^j?W^I%)pg`y7htuig$5Fx|@lh1{E%tUu= z%;^tbB6O!6Y$Q~RjoeuR?dwx78HX(M3W_DD`9gDn>;s1wyD|_C z$T%W%B|SvWuO!`GevZ!I?PA-wHBC%y%T*gmmZ4GB4^p)uw=;%c2j}OXP4lG|UOV61 zcC*t2<>x_nD(*?z?lWT%HuW$*q;lx(QnGBq$7U?dGf{i`P@+C`6DR>uP^>MaV#*dv z$r;pXjM-N7cIlKIGv$mou)O%ly-aC@$wzJ0JFmWHu0yB%rJr-u^~jYXdfHEwm*{Ni)s}c(1W~_# zr3SpnjY(LzP!2Wj9h#sY&S>|xrO>QQCu1Q1&*0GM1KQCO}P-!}lsj;Ul zY38|Vx)U6uA|!(UdS2==hwew3>T%KKTa3YXT2nGftf|L77At`jhF@k|!{&-PA0aCl z^rU342bOUk4^K`mKRmCeJbcqc$=o;xFMZ3RWQ+gArZUBuG0?dx3$IjycjG5`*_Pfq zd1>EUow4`!GO_{B6_zq7KzvOk@8>M4oW)rZkoM%bZgn}#IV};{Zp|s}l=S$IjeRHM zYz^C7(6mE{au7`eD4VfzfCG|u(zLyg+R!ZcbFIS@q zJ#TV1wRbW2eK;&k#F!ea`_YvthH-h!6-M(b&_!4qq==J z+4Oyu1&o_ktUM(x+EdHsvgXCaG4K16jBoFaOu`~gw2C&U#PU3McZt&|Cz7g3iTK%kH_TPgoFIyM46_zm^vf) zvrmhng{FNYk7CEqzD!Q%q7FRoLe3`e;z@o3`BnX_!5=D8nr^deW3b@w`HpW7Laz9#yuNug#J5 z`TG_WP1x3amWUhG=c0;iSLVJL7G34hG9kR$ROzB-&}E)~`i)CD{GLjMZF$o5(ARPc zFE+j3D7SP;{>X=j#mz^t62V5@T~Am0nRs~*9t_WWvCkimSEt0Y5u0$$f`PAj{k)J+X?h4JK7 z#=J2bl>@QsmwuF}2MorMv^(7D7r`(kL^1mN3i3iJA zuW%{ldYLPY=DI10+{}x>ZdQ4x0!U{9E+p~u=DW|E-C4d*0}1;>-4OegoeiF4IL`aqf%mE zXy~04Y=0kMy^Bw}b!)y205}_jAs+b+)zx4K9F`xB#95;FU9tAWD**sN@`kHD9B~&# z09vA~Fm_U)m5O&DAO&c$BWY#%+ZAU4%FibVHg-(iKJ|z@i9n zpexqa&JpG+1v=)15ucC5U=Z*aLbxjhGE~<3u~%LF4{bZg-=av2C)gEk4;J8ufU(%WXgCrSo&U7=w;GPOi8n7` z9h4)^36DT2I-~3eY`+?{w{>#-)uxjp>PU3#w=EJ4COUO&`Bxn!6?LsYbdJJkg~8e% zYaF3}MIsS@;Ow37w#OJG0*tanVTq175}5`5f+t|me@@U}#&gv3UmPKt`-A^4=-=aY z?8|XnVG1~e(~(gX1u4*xzc3^YfkDEKA4M%u!U%D31fRI5s30FyTug}1Qbb6MPXrEy zLJ>$&aU>k^3zdqUBLQxQKpjyL$@wuv9;lEw0xp8KCBSWe_3DTUNu&}XdSWSTDaqH6iARC@~1@07EVCp@K`C38ph7a_0Nvm7%WPc06z+vfQSH8Sde%- z0~Hq$77+UB+A*I#3hziv@*_?G2*04tg9pYN&NWi

h{0CAp)rFA^dK+far{g!V3 zix!B~{~Gy6@%=Yk|Ay-yMc^NS|IMy{!}X6M@Q=X%X4n5%xTyX-VWaGb|LD08&(Atx zjB>=Y_eo1tB?Z9Y(L13kErKXHWv^`H2mqWufAk>%#KbZXg%ku8bw!G4(ko}Fc)7$4 zeTk9?6$RPbu7gX%9$Jz8mz&pSujrF-iJo~Z;$5M}FJjZvFsDYBc8X5uD>PMu>CBtx zJ9W8_lNtgF$hmBQMv7b)Daw-BVi-=n(e8N^ay?wFTkCFS1O^*SOF#7*a?QGdl(k~_ z+gTe4Y!3$F-C8}?d4DB;aoJ;ZW3R)p148@}!Qa2`Cozy7&J1A2tX3#BqL>SmoI_tC zE3ZGC?i%>K9^zmcqL|iV-iZCAD3PKr9TB8`aU%R9-34u)kAf}$$)jyM| z9(T4{w)`2V`6?B2;`MZcX{_RHRpwXybbAAFIOyS5!iZEp3I*~ zI+Ekz6e^i1HJDX}ub|I)`;>vt_-zZPUIw?`^!-qS))!Ht#u_5o1I0E&CPSInp=eq1 z8gE`z=gLWI_x;BA@B54wR5z|76i8Jkmrt6=ch?H1+~@L0ww>`crv;$FJ7P*@lPx4t z;_ZVNsqbOW=>#sN^~@7s&p-gRrfGbcDSv$eIS|xc`VMYfzfIHljD^QU%Xw&zp47YU z;VI$IFMVH5XgWO$=5s5!hB8)27|Tmt^|}8D9C|2Ojj<^;S{5BA17ghwyWei=(yC$e zEnYwX6CDlePlBqJgi@io5B9yK1`gtUA*2@mM)WfSivuQGq`C~|50~CztFUXj29(~k zXnaU7BFCgMl8gF<>uCV>2mJ)GqU%L>M?HL;&FNW|YE1bnD(CTu+evp^aM+byDTitf zFU_5(Ew4F=MX$zPo4npjQw!@`o5L$6)@>qBbK3;DJzsi0crNdSZF<<${5+&3E}*yc zd(Xq*D=HDa%thSshoJhi(6iP7jpqJneu{?4Ds#VmC5fEeH&J%0rn@4ehwo80004ia{vG(06-1^ zkPR(G&`XtVK*;^`of3;UL~{A}%)0egu>hfz}Rt3_C?^G_e% zXnYmIe10M5V7j;S%~f@5fo5gJ3l15;I4pOwuNmuz9kbq~-ku!_;iyKM?2mp(q+!WF z;TfG23JQHrhcG_=wZ99j;ih>+)vLwIw)|VEkAmBMlfT{c!@U`Dt zl{dc#+wuX~_i-fwuGLQ$1e=?t^#oemLGAD^TbRI&dI-NZ-$O<9A45 zm{`uy%+xgZNcJ>qY>RFaGny{bY!A#{+S%PG zesGONo%h4bR-@J$^2IycS=?FB1vgDQBw{M1Mbo!0dfJD^Ni}}t)l!G_EcWae?H%T7 zrBG3mTJpim3N_Av(ObAjC7&v8ba5n0WJ@>39kx}}3kz&;ObxA{_q}e<(0tkZK1I!m z6{Eb}( z`=L@F_crI-!bfe)_Yam|xIe7e`D}M9gvP>fhtccmj>f+FBV}mL{+7W(;p4gWzQqIm zwrIW%(OA8XD)UbYae+3$nT5kjTyy}x4=~T2ZUQ^Vt<)^(} zsAq8+0%fjoX6qbq&8Q!%Hkb|Wz&RW5j!s?JZ}kgvNF-y3rAcVDhQ!=>f=Idg*+=G~ z423 { @@ -41,7 +39,12 @@ const PostActionJsx = (props) => { source = { activeOrNot(props.state[props.field], props.pack) } - style = { styles.icon } /> + style = { + [ + styles.icon, + props.last ? styles.lastIcon : {} + ] + } /> ) } @@ -51,7 +54,7 @@ const PostActionBarJsx = (props) => { favourited: props.favourited, commenting: false, reblogged: props.reblogged, - downloaded: false + bookmarked: false }); const icons = { @@ -67,9 +70,9 @@ const PostActionBarJsx = (props) => { active: require("assets/eva-icons/post-actions/reblog-active.png"), inactive: require("assets/eva-icons/post-actions/reblog-inactive.png") }, - download: { - active: require("assets/eva-icons/post-actions/download-active.png"), - inactive: require("assets/eva-icons/post-actions/download-inactive.png") + bookmark: { + active: require("assets/eva-icons/post-actions/bookmark-active.png"), + inactive: require("assets/eva-icons/post-actions/bookmark-inactive.png") } } return ( @@ -93,10 +96,11 @@ const PostActionBarJsx = (props) => { callback = { () => reblogCallback(state, setState) } /> downloadCallback(state, setState) } /> + callback = { () => bookmarkCallback(state, setState) } /> ) } @@ -111,7 +115,10 @@ const styles = { width: 30, height: 30, marginRight: Dimensions.get("window").width / 20 + }, + lastIcon: { + marginLeft: "auto" } } -export default PostActionBarJsx; \ No newline at end of file +export default PostActionBarJsx; From 0dd2094cbe6cc6cfa8be0ac9805682636f5013a7 Mon Sep 17 00:00:00 2001 From: natjms Date: Sun, 28 Feb 2021 11:31:46 -0400 Subject: [PATCH 2/7] Update gitignore to include Vim swap files --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 0ba4ecc..0a98f3d 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,6 @@ web-build/ # macOS .DS_Store + +# Vim +*.sw[klmnop] From 37a6f1f84b527172f1d07de839dfbe7f469b3e09 Mon Sep 17 00:00:00 2001 From: natjms Date: Mon, 1 Mar 2021 10:24:20 -0400 Subject: [PATCH 3/7] Add a context menu for posts Curiously, the context menu doesn't seem to open when tested in FireFox while live reloading is active; it only works when the page loading has been interrupted. Presumably this won't be an issue when run on a device but something to look into nonetheless as it does kind of throw off debugging --- package-lock.json | 5 ++ package.json | 7 ++- src/components/navigation/navigators.js | 72 +++++++++++++++------- src/components/posts/post.js | 79 +++++++++++++++++++++---- 4 files changed, 126 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index df5c627..3739d97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6129,6 +6129,11 @@ "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz", "integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==" }, + "react-native-popup-menu": { + "version": "0.15.10", + "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz", + "integrity": "sha512-w7MaicsfpclK7g/omjMchNaXwhMi0apt/DC734AbHuJTWCfv5mF3JgL1UzRW19ncFMBRfQeYapPy/zUyJCGgEQ==" + }, "react-native-reanimated": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz", diff --git a/package.json b/package.json index b48ad8a..bb34cfb 100644 --- a/package.json +++ b/package.json @@ -9,21 +9,22 @@ }, "dependencies": { "@react-native-community/masked-view": "0.1.10", + "@react-navigation/core": "5.2.3", "@react-navigation/native": "5.1.1", + "@react-navigation/stack": "5.2.3", "expo": "^38.0.9", "expo-status-bar": "^1.0.2", "react": "~16.11.0", "react-dom": "~16.11.0", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", "react-native-gesture-handler": "~1.6.0", + "react-native-popup-menu": "^0.15.10", "react-native-reanimated": "~1.9.0", "react-native-safe-area-context": "~3.0.7", "react-native-screens": "~2.9.0", "react-native-web": "~0.11.7", "react-navigation": "^4.4.0", - "react-navigation-stack": "^2.8.2", - "@react-navigation/stack": "5.2.3", - "@react-navigation/core": "5.2.3" + "react-navigation-stack": "^2.8.2" }, "devDependencies": { "@babel/core": "^7.8.6", diff --git a/src/components/navigation/navigators.js b/src/components/navigation/navigators.js index b7ba237..f1629d2 100644 --- a/src/components/navigation/navigators.js +++ b/src/components/navigation/navigators.js @@ -1,43 +1,69 @@ import React from "react"; import { View } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; + +import { MenuProvider } from "react-native-popup-menu"; + import BackBarJsx from "./back-bar"; import TrayJsx from "src/components/navigation/tray"; +// Provider for context menus +// Allows for establishing global styling of context menus +const ContextJsx = (props) => { + return ( + + { props.children } + + ); +}; + export const ScreenWithTrayJsx = (props) => { return ( - - - { props.children } + + + + { props.children } - - ) + active = { props.active } + navigation = { props.navigation } /> + + + ); }; export const ScreenWithBackBarJsx = (props) => { return ( - - - - { props.children } - - + + + + + { props.children } + + + ); }; export const ScreenWithFullNavigationJsx = (props) => { return ( - - - - { props.children } - - - + + + + + { props.children } + + + + ); -} \ No newline at end of file +}; + +const providerStyles = { + backdrop: { + backgroundColor: "black", + opacity: 0.5 + } +} diff --git a/src/components/posts/post.js b/src/components/posts/post.js index 1b27f64..c08cd65 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -1,11 +1,23 @@ import React, { useEffect, useState } from "react"; -import { Image, View, Text, Dimensions } from "react-native"; +import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native"; + +import { + Menu, + MenuOptions, + MenuOption, + MenuTrigger, + renderers +} from "react-native-popup-menu"; import PostActionBarJsx from "src/components/posts/post-action-bar"; const SCREEN_WIDTH = Dimensions.get("window").width; const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg"; +// Extract the SlideInMenu function from `renderers` +// This will be used in RawPostJsx +const { SlideInMenu } = renderers; + function getAutoHeight(w1, h1, w2) { /* Given the original dimensions and the new width, calculate what would @@ -60,21 +72,35 @@ export const RawPostJsx = (props) => { return ( - - { props.data.username } + +

+ + + + + + + + + + { /* TODO: support for more than one image per post */ } - @@ -108,7 +134,7 @@ export const PostByDataJsx = (props) => { setState({ width: SCREEN_WIDTH, height: newHeight, - loaded: true + loaded: true }); }); }); @@ -145,7 +171,7 @@ export const PostByIdJsx = (props) => { ((/* This would be the data retrieved */) => { Image.getSize(TEST_IMAGE, (width, height) => { const newHeight = getAutoHeight(width, height, SCREEN_WIDTH) - + setState({ avatar: TEST_IMAGE, username: "njms", @@ -156,7 +182,7 @@ export const PostByIdJsx = (props) => { timestamp: 1596745156000, width: SCREEN_WIDTH, height: newHeight, - loaded: true + loaded: true }); }); })(); @@ -164,8 +190,8 @@ export const PostByIdJsx = (props) => { return ( - { state.loaded ? - @@ -190,12 +216,20 @@ const styles = { fontWeight: "bold", marginTop: -2 }, + menu: { + marginLeft: "auto", + marginRight: SCREEN_WIDTH / 30 + }, pfp: { width: SCREEN_WIDTH / 10, height: SCREEN_WIDTH / 10, marginRight: SCREEN_WIDTH / 28, borderRadius: "100%" }, + ellipsis: { + width: SCREEN_WIDTH / 15, + height: SCREEN_WIDTH / 15 + }, photo: { flex: 1, }, @@ -208,4 +242,27 @@ const styles = { color: "#666", paddingTop: 10 } -}; \ No newline at end of file +}; + +// customStyles for react-native-popup-menu should be defined in particular +// objects to be interpreted correctly. + +//const menuStyles = { +// menuProviderWrapper +//} + +const optionsStyles = { + optionWrapper: { // The wrapper around a single option + paddingLeft: SCREEN_WIDTH / 15, + paddingTop: SCREEN_WIDTH / 30, + paddingBottom: SCREEN_WIDTH / 30 + }, + optionsWrapper: { // The wrapper around all options + marginTop: SCREEN_WIDTH / 20, + marginBottom: SCREEN_WIDTH / 20, + }, + optionsContainer: { // The Animated.View + borderTopLeftRadius: 10, + borderTopRightRadius: 10 + } +} From c4ba6e9075eb037a79a013541f3d95df4948eb6c Mon Sep 17 00:00:00 2001 From: natjms Date: Tue, 2 Mar 2021 09:56:50 -0400 Subject: [PATCH 4/7] Add ellipsis icon missed in last commit --- assets/eva-icons/ellipsis.png | Bin 0 -> 7758 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 assets/eva-icons/ellipsis.png diff --git a/assets/eva-icons/ellipsis.png b/assets/eva-icons/ellipsis.png new file mode 100644 index 0000000000000000000000000000000000000000..7bce4cfb6101120c92e411660d93c7d57d9e95a3 GIT binary patch literal 7758 zcmeHMc{r5o`=635C8ShD(~u%#7VAuw?B-~)BwMyI3xiqA41*L|LfVK@_9#R`)`)Cb zN=eAU$yQmjq|!pZ?~G2z`F+pte1Bcn@B80*=bGhtp3nWc@8|Q}_wzpQHBsh=jfDgy z1VJE>5XQv768H}0yhYXnpO^CQM}k27=L4*4S(Z39n9iV)$X-M+%b!jJ6aB~}5Xi6h zZGvO$>wTNT2kaUZYrzLyQNiHrZ1|&8;epgAk6S0kqH?aJWKUL=!XE04nHXE1{xGBC z`)S**3d>Cu*c@%juXG)`(`d?>%kzt<~4x zRY&XWSYCUkv&qk8@GfHV>zB8Fip~#H*Va>ph4()Syt7E|UmQQ`d^WK9cxCwg7kIXo z%^~~L!~n|cYW(nnSBx5KR2*%{X(q$l)+Jfs)yXzb`r{tgwU?!s?|VkhPgXzCus~$R z$9euDmi8ne>gMH}4r}7xp@t7DU>!CV%gqXAjNdk`dO=xWC`)WOP9UA(k8avphgv!_ zk`?k%TWQw_k#;QI27NeEg0F%}5)W=zdY8eF{Nxk3w9|oi-6IMKAG#zVESk}fMU&Er zm2}6s4tTVyLPKB8s8n#zi-lVBhJ3qmVCn|r{c1GZnyqPN5i|~ zw{Lm$7AM-4x^{Ic+TML>Db`$A+*@qtd7CZ%)?~Wsx2x@6P4tbViJj^7Mv^CnwUwVD zCp*cw(qFYIG&G00y4n&Kwr=hbXlr{B>Jdmz$ic|K(kQ&dQ~^g8+&3tp-CCaLb!w2N;E>yu(S5jE(i8F|XZ z2@x+f(6bcPzqeoS$+8%AJlsK}eM#^YfZW@>6xpYq{W-nTA5$)h#`&EM5EyF8OgXE= z=oqLuz5FqJAmrqRFA;+F@!9<`vyRw~Sp>5$9#kUL^vk7KPZi5Xhr@PTN1X_ZV{3-x zO*8aRHoZB`PDbYWd4y*9dpF*T$^_b~j>_kr;}!DJ>sE^yzumhBpJ6c*uW>riI;+&( z=~%Bwi-b&{UYe8MO;|>1>-(|A@m`sk3$~%Y*|%w3R#~(jeT4><+*#lLJt?x!z$VtF zMUr7ry?s8@k1iO=SX}m~sk^V76X09gqa^#9=dye~uJ*CCvA3Pv{`BiMrWH>Lk)c(Y zg?q|c9O13vZH4LCL67uRFRa_!)Gab3+jzdZXAkw-Y1=I>`CFl#U5Id-JmCSE{=S5i z-tDEG9SK%g(Y4a;uWe%vjcB#yxE({5-4qgq&Aci}K4w<`CbBQjWp}9!d!djN{lb5Z z^e(3B$+BX{QkL}AiM;p`O(U3Ac+GniM3cXXa6s6#4a3Lwt53-WYn2s*OK5qDRAEVL zK3eua>YbN8m*PnAtNVO@X!v7TXwv$O*$BaNA!1irjUSaM6pZb2xt;x`y6#qqVU}Hin);WSnIa>M^WY=(M!UuDO5#{ zf+fV1ZBu>az>e9S`9KeoOf&77is`1M8XP~n$;xU_if_zbY`TF|@>o8x8N87del}eC z^`c?Hkh)R4*5;#pC7(^s!4EYQ|P< z>WWlt+Tv;4h{0{+={C4uXzR}3RT#i-+>({!50QvUpXG{LgT0WMi({0%0!J{^~5y`9_kFS{PNYHSd&)b!8I$zFw7Fr0Z;I+IsBqOwQAm$sLXfHw1Vw4BvB z$LEviE3SEY-=(#8>VgfQ#;Qb6Mv5YI-joPA$Ll?Pv3HT-Dyujw(p4O<>)BHMrFV%Z zMkUEzcJpbX7uNV!kGY34Yb4JL%zf3|xINNzzZ4|=n>;%wsYOz3^BS!LNzFz9Qg%?m zFSP;!io*)2aHCr z0!=231tvmPg}Elr&zd&h4AV|oCsQ)NEE<5C8q-;5$ecz&_Mp&TKhXNA|-lfwN<5ALFf$}e49U${Qi-L8O)dA=|I(&SJYZ&t~rdnZ0z z_3j*#eKsX6T=7uS4mNmKZlji7WyX5pJrS?87t&STx8z%H7QW3>dvKkJO!3ZBb`Rp6 zX8JtViRm7PZ+pzR213q|`Hgb<2&Q{^%;|C7_6|jmPX3d`x|fGzaGsXuc5d|-5I&Rq zX7I9U+T#P~(LDV1pCnt;_6$D8z-4wM%JQZwdRp>PE{n!y?iV?b&a}i=ortZ9kj%7$ zc4+SoR{6k-jg`0QaVy!(mm?nDTRR@z%MOSY3%%;X zht|2lcY1rM$GZ0H%6w#+(6D$ra>seb_@Yea^y#Y$B|W|=vJ9zV;aaCT@8Hl0PY>Pw zzhb;D^t-5Bz zr@THf{SBENj`Va2P02g>zE za$06P<-|=L^H_-ek_vNMyjAXa#K8!TPna)<^Q#{!kzsftxLu9z{oAuRtw9Fg_J9tezOSqfHr;mJ z%coBA&)y0~$B z5lAo~D6Z$#HpUpN`41b8jBaEKoom5CuSOE^KX7y(h8Gt@z{7}ML<$fH6JSRC3C|*v z{#c+t&4)AcZ-D^re(?VZ{kvY=Sh%{P4QO~Dj#G?*7K9Tonn1&o325$5RSjhvNd-rO zsv__xsERsL4XQy^*kP?;@!5KtmQ z1<#>CLQw=2IFy7?g=^plL^y)Dn!=1h1}XvPwK^&e6#<|kXy9a#M)T5wa3TY9D7hsC*8E;9=tDF-*N_V) z5;*ntz2fw6ZZK|B6ZUuDe`7l0PGeL5Z#;iMf3WB>SZo@@(~M!}>OsV_{+{Qrz(1HQ zfxV8&V)$eJ!=(NPPIDz)O#oXO!+(|kBSi0&*2;$DMdnHc26Hz7G!DNaKNIImByg7i z&~ar5?~bFo5rN(Id#U~2PyUNERz(uvYB(YhiX^DHLRC05fx`m{t$|cVYM@lqlu?A0 zO#8vkq>)%`9D}Iq2IK&+&Om8#*BQKzn|<hIIj z zrv9z_zW}Z<93tb1R3`23LSGG8k!96=2Z(v454fKJw@28I`{Vbt;8f0k@%o-_|3wb~ z^*>I2O5cCv`bVyxQsAe+|76!ca{ZJ7KL!3LyZ+zg68z%{n@9x?dTikN`E@{1Kk)3m z-qqCD0JO|`rQOfE1oQ~dP3)K;&;~KidkyGX(srPekA=Y+^1WWWQ&>hyGrj2u2((TT zW1wpV{KeDn=x*(^lW!Kgac%08k#{%hI>t#m?mL)#)^iQ>v)HFZQ=}Ovc%0eI|9R>? ze|W@QvW3+fL5r%GX2~ob*crhM%*~=0walgQ zu$Okv^0MUvsKeeogAyASRNi`_D`wLN4;5yWFSOgd2+TNJbPC=9&V61IbLeeiXW8(x z10(TmPgTs87u|Tkcp(YO8e!9+o`R1JQ!arbys*xorJw;=#l@FdI+^HfXiP>E<3N+P4JpYk_HCP1SR?RK74AE|B#^6exUAnePi++n*j6E6GoK9 z{R=g!k)f&|vb+{|zxlc}n?kp6yR?R0a`40Y+z>+_Nu=^c?G2K3C5~CV=u{qM%`Hm8 zFMK`_j5=mf06!5(5$I?-%pKi#?-u2fbG-qpAPa<2d{21ArOTuf$%)-puEZb9-DEul+OB@1AnoGE7mCAe^o@GPk_G;#J^-zXR5OsW`1;E2C}i)F{Vu8Vy>c)c0Uj5t9h%8k z=03D_%k#L{7JaE%XsK_xf>~(6+u50QUwFMKZzl2adm6PPW|8&It9v3YzRGP{0GxyI z-Mfo@KQ{hDL-a6@x94v>YvZ1-k=79}YwVl2Nst?8B-p&OcoCff%I_{19hn(1n{eJb zwtKzDpzX9!We}|+uBs2Ud(x-%7oCxZpCUdz|H3Y^+*ZSP@%g!Bvmw)=1o}i&@1zf! zMjvUq)3`Ku_3E~F*074!7Et--S>bEGs>$}Y8}CJrp4laRk1#Tj5S;s5gpWWOpqwy+ zO+}}AIQ^#iHhRu(Y4P(C_Q6c6#pnC;>@B?;@EfkkCEb1xcK*QJl=MV$e0MTub&pqE zDLHjf2@_-%eg9I%*9@%1NJEOk&sQ4= Date: Tue, 2 Mar 2021 09:58:39 -0400 Subject: [PATCH 5/7] Add "View N comments" button below posts This replaces the old comment button that was in the post action bar --- .../eva-icons/post-actions/comment-active.png | Bin 1103 -> 0 bytes .../eva-icons/post-actions/comment-full.png | Bin 986 -> 0 bytes .../post-actions/comment-inactive.png | Bin 814 -> 0 bytes assets/eva-icons/post-actions/comment.png | Bin 2772 -> 0 bytes src/components/pages/feed.js | 8 +++-- src/components/posts/post-action-bar.js | 17 +++------- src/components/posts/post.js | 31 ++++++++++++++++-- 7 files changed, 38 insertions(+), 18 deletions(-) delete mode 100644 assets/eva-icons/post-actions/comment-active.png delete mode 100644 assets/eva-icons/post-actions/comment-full.png delete mode 100644 assets/eva-icons/post-actions/comment-inactive.png delete mode 100644 assets/eva-icons/post-actions/comment.png diff --git a/assets/eva-icons/post-actions/comment-active.png b/assets/eva-icons/post-actions/comment-active.png deleted file mode 100644 index c9a5a10631d9b4615ee550ef35a57c36f0891be4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1103 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H3?#oinD~={fhjt`C&X1*USSlCh5*$=0GP}! z3f-Oyq!>$r{DK)Ap4~_Tagw~Fdh= zgoB-ngX&2Rf%LBcscR;~Bdo@oR>P23nJ z;u`p6?V(`5_kmnBldi{}Zm6xiE6SnpdC%v-kjHf3t9FAqQ;Ig<0k@yC8MaIhvUa$~dVL>n{j<`V!uBV7ZIuFQcZoCZ zuwJUL`)VKS1cnXV4Bwd!Y-Bk7_C7y@vBN=mzW;d)Aq+bI_A>a?InH!?y~oVp-(iNY z0%4o~R+c@wFP~AZWP9kH>QaaM#iuGAHcDjbxVgTb=w-F()>O?_r}!uP&wS%*c*^?X zhC{mX-L&6xdtK&c+}Bh+dpTcB%HuP){~wL6MK4y`H!hBnbE(xS0>%Y{r>mdKI;Vst E00CVWoB#j- diff --git a/assets/eva-icons/post-actions/comment-full.png b/assets/eva-icons/post-actions/comment-full.png deleted file mode 100644 index 00951c8909dd1eeda42eef8f183b4e7199df5dbe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 986 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H3?#oinD~={fhjJ)C&X1*USSlCh5#)>0GQGu zT-`Z=6k|z{UoeBivm0q3PLj8~3quF1tOt<8S>O>_%)r1c48n{Iv*t(u1=&kHeO=j~ zaIlGT$V}1?_zD#I>gnPbQgQ3;El0j)0|DoYJO7{kw|3Y1kg078?G3)M{t+<~h?%P5 zIq8n+p5t%+t!~OMyuIGEz$WjvD2rIqcXOeL{=4@TAEdnbx0$7Y^#Rub(FSdXaE5gZ zF^oHy3Ro4ma~O6oO<*+x@=q{HGi*A*)}SN7&k$+A+;CU^KsqBMivl-?LIVSn1dBpH zkp9LJ!ceJwjnR~K!^h{9XBl#8Jwt^VX2)NBwyW+BIj9*P}{Dk*y`t7~$J=+Q6YxiW|pFeU;_3I(St-dFx%Y|N^wg35s eNkFeSS2DIAlQ)#KfBha901Te4elF{r5}E)~N7(29 diff --git a/assets/eva-icons/post-actions/comment-inactive.png b/assets/eva-icons/post-actions/comment-inactive.png deleted file mode 100644 index 6a44b471e96f031b0c6061095bab6f6e335b6b19..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 814 zcmV+}1JV46P)QIy>b8m0=r2> zK~#9!?cGam8!-@s;pu@6tt05x$tr;1MG{$jG`qilZOCF(vDou~eO&+m000000O}K! z7x#L-etr5G&*w7)po!TXLlI2x9fn|f?=S@8dj}zy-a81v_})PX=JyUlFur#Xg898e z5RC5~g6L-czeL~hy>Hy3VbESY4*03c2qlMdjhRz7W>NOp?YcgI> zpSr#{Nt_dIt)8~lAV}VIuUK;sq4)YD>*A}tb(1{=!Td9VFiVqQe(w<6nFOl-25$Ms z!Jj0&y7^gk3g-6?!S*AdqxqTE9Xr$9)%;A_1@n7{;3j`>!tU?g0?QkK`MGq7m5F73 zK3&ZK%~=)zyFaH+KMFwi_xY;~kjomt?$4{28K8L!+^c>Onht^LKeujj&O12jJW z1pw~{z%fv#{xv}J`WJxayZ^@la16K)fJD3BpNdue>l?t+!Lx@y4Pf_w7660Y`MX~O zG~fNp0$^SkZ~iDvH9*syF8~Ldzx_Xl8USmUuK}9Y{?Y�LPg>LrV?N*!=6dt_N%K zSAMF$5@rCbrIjNfx%snasHsOl#{qEUu3w?w<1`VohH7-(uUhBhG~vGf{O&N!I^$Qa zYwEjw-xo4-C|W66m32%Hz)nUBxnk`*8m;Bqy?+yW#~ODYWnS+t)>P91!2Ft*$!-NV zHU1Co1U5Eb12i^X0Gb;w0L_h08G!#0E&J8TX%E1*-3J&URF*KD{M2(v09FXJIt*1F sb;oG2vj}tAb9n#&00000001WO8${8mg%mhW`~Uy|07*qoM6N<$f)T}Hwg3PC diff --git a/assets/eva-icons/post-actions/comment.png b/assets/eva-icons/post-actions/comment.png deleted file mode 100644 index 87eb20547e26fdf817beaa7e521e3c8545dca8d5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2772 zcmeHIS5T9S68;ki5OU~<2-15GMU3<+p+`D+DFH$VRRSE47Fr-uL=X@}s#2t@NJsDh ziijZ9hzA4&X;-C&63UH__u)R?w==W5-|Wu!&Cc%Z%-%s+nXoYPF#`a=Vv01fp<(=Q zXQHFUy@l)}8qj0)E%gE5Sr+UB4WZ@2UPv2D0Em*L@sa`H_&0wI0K(w_u;Bp!8U+Aw z@z$fx8(IJW_C{IQ8Pf=2Lc;&pKO6WzZGd)QlvArX8VrZoSlQCw) ziR$G1aua_Td@3AYW%0`NMLl(aw}-wjTwgpwQKHiO7SWF5k>2!%_UCj~t39dEesb^P z;NO(zK`#U5c2>9FH}LuD{xnHyT~0G=S2H(SD!0rc9ScN$8Yrht1@bgEF#<>s0VFM9 z3^TPfW?ZHN!^EIi651R97(z{r^z9;Nf83-Ra@%v4#5Q*`GV?S;WSB)s`^HG=9TaCi z)&L19SjtIZt7x$tHjwii6rSuWQ+wIw{VM`TDe0BvNzgtRE!K?i8QqzT(;bajrH;D& z+#NB_sUV4_NmsyOMRSW8A%kxQrNkvA-pg$UTATL#_>-vT(y1vn*(&nbJu8gPeNrW-`t_rdOZJZr1HY z+2P}&>^gO^z9pP8gr4n6Teb!TNB6bFGGQD})33VhIOgL0wHNgRSJEttwDUS{*4Fx~ z__YO1exG(OED)TqnRB!L&|$po&lkhDe0}oF(xT^kzC-5V*rK1;b*+F20;6GFPtw)kLORS?p0g%CEE-pp&Z|zo z+R$O=-7P~fHN#1UGthtIdk1%~Fg-u2dZMmUN38Hx`9kmGNb)c#|8(8`iDpHKU86{DeK@CzE|Q{vs4(Tu{%rTf=F|mF{6J^bAdmlPx^4>>-G<_BRwYE|irp)jWr-#y{Zs zCy<#$6qrRXR;mbWog_8R6`$AWNX~Tx4H8TAv`~c1IhYBkl23zN6;rmP9{;VN`uOIJ(_#%xh_IW2AS%7COTpHDK$a%%r_I_Kyn}i^SVB} z*2}|0IKO)g!b<$*;g;RKi5kdpwKKH)^`#mvbEQ_uw1bh$>y`YHGPMOL+DIwEbms!1 zJ^-rA5-~fz)vth-4X>&P9oIQQyP-@|B_f(9-$!-~5gjSfONCp8wURb0hr#O-dRI8) z$qKrANvZD{5&V(uN!(AtO?PSaz_%zD;3R|$Q>lj)XX**XW3sdyz_$isQtF1fCz`rUmx^JonNI0ATqaSH(Z*bYcJA`eAi{h!@!)2kXybIF%jgg#198K37t2}3c+8#{ zn~(q;^kYX;tCT=m4-RG=7Q*e4tgqOTpzN6ElB^*}Li0oYt9z?)<~nSVg5C6_tdByw z1-D8MpbrTm>F$I{H0y7^Hmtn2EOZZym4P1)-;L_&|4u`uDuD> zCJixdT2{IhQ$^L%_-Y}PjnM>jUeC@7q)m)Fei|U*h{P22)fJ86Iy>{OB zXZJE6Cg+WD+RiGuPZXd!O~50h_yrLuCeK$l+I=_0<#<~?KfN2~;#`rDfV}_NnfD{^L{si4G-O>N@lx7%Rdig&S-4LshMSrRI_fzajWxn5oi47 zviq9HyMElSq3E9Y9)6YQjEn+}S?lsQpI1%}cy3Iy*HQP|W{7h!5v$?K)K>oQGx%u< z6lQ8ST249hLTA%@hkGyXtW~1s+|blisP*V__PKo8?{DD5al%FrB)Q7O zHCoU|e@N05#xCR`aSa!knzXXB7 z-Z-Dz|68zo+OS9y@c!-)`X^Q+3>OxF0Rl0hp=c~d!3&4?3c!r?Ji^jAfT^*SQKNxJ G;(q{zKP#yK diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js index 74a3a55..b2ee92d 100644 --- a/src/components/pages/feed.js +++ b/src/components/pages/feed.js @@ -12,6 +12,7 @@ const TEST_POSTS = [ id: 1, avatar: TEST_IMAGE, username: "njms", + replies_count: 3, favourited: false, reblogged: false, content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", @@ -26,6 +27,7 @@ const TEST_POSTS = [ username: "njms", favourited: false, reblogged: false, + replies_count: 0, content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, media_attachments: [ @@ -47,7 +49,7 @@ const FeedJsx = (props) => { - + You're all caught up. @@ -61,7 +63,7 @@ const FeedJsx = (props) => { - + ); }; @@ -98,4 +100,4 @@ const styles = { } }; -export default FeedJsx; \ No newline at end of file +export default FeedJsx; diff --git a/src/components/posts/post-action-bar.js b/src/components/posts/post-action-bar.js index 2712911..458cc9d 100644 --- a/src/components/posts/post-action-bar.js +++ b/src/components/posts/post-action-bar.js @@ -62,10 +62,6 @@ const PostActionBarJsx = (props) => { active: require("assets/eva-icons/post-actions/heart-active.png"), inactive: require("assets/eva-icons/post-actions/heart-inactive.png") }, - comment: { - active: require("assets/eva-icons/post-actions/comment-active.png"), - inactive: require("assets/eva-icons/post-actions/comment-inactive.png") - }, reblog: { active: require("assets/eva-icons/post-actions/reblog-active.png"), inactive: require("assets/eva-icons/post-actions/reblog-inactive.png") @@ -82,13 +78,7 @@ const PostActionBarJsx = (props) => { pack = { icons.heart } state = { state } callback = { () => favouritedCallback(state, setState) } /> - - commentCallback(state, setState) } /> - + { ) } +const SCREEN_WIDTH = Dimensions.get("window").width; const styles = { flexContainer: { display: "flex", flexDirection: "row", - padding: Dimensions.get("window").width / 40 + padding: SCREEN_WIDTH / 40 }, icon: { width: 30, height: 30, - marginRight: Dimensions.get("window").width / 20 + marginRight: SCREEN_WIDTH / 20 }, lastIcon: { marginLeft: "auto" diff --git a/src/components/posts/post.js b/src/components/posts/post.js index c08cd65..5fc6e48 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -18,6 +18,14 @@ const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthum // This will be used in RawPostJsx const { SlideInMenu } = renderers; +function pluralize(n, singular, plural) { + if (n < 2) { + return singular; + } else { + return plural; + } +} + function getAutoHeight(w1, h1, w2) { /* Given the original dimensions and the new width, calculate what would @@ -44,7 +52,6 @@ function timeToAge(time1, time2) { */ const between = (n, lower, upper) => n >= lower && n < upper; - const pluralize = (n, singular, plural) => n < 2 ? singular : plural; const diff = time1 - time2; @@ -69,6 +76,17 @@ function timeToAge(time1, time2) { } export const RawPostJsx = (props) => { + const repliesCount = props.data.replies_count; + + let commentsText; + if (repliesCount == 0) { + commentsText = "View comments"; + } else { + commentsText = "View " + + repliesCount + + pluralize(repliesCount, " comment", " comments"); + } + return ( @@ -107,6 +125,12 @@ export const RawPostJsx = (props) => { { props.data.username } { props.data.content } + + + { commentsText } + + + { timeToAge((new Date()).getTime(), props.data.timestamp) } @@ -237,10 +261,13 @@ const styles = { caption: { padding: SCREEN_WIDTH / 24, }, + comments: { + paddingTop: SCREEN_WIDTH / 50, + color: "#666", + }, captionDate: { fontSize: "0.8em", color: "#666", - paddingTop: 10 } }; From 4d458734ca2f14bbf08b85152953d6292dd991b7 Mon Sep 17 00:00:00 2001 From: natjms Date: Sat, 13 Mar 2021 07:24:51 -0400 Subject: [PATCH 6/7] Create ViewComments page to display post context --- assets/eva-icons/paper-plane.png | Bin 0 -> 10138 bytes src/App.js | 7 +- src/components/navigation/navigators.js | 2 +- src/components/pages/feed.js | 4 +- src/components/pages/view-comments.js | 361 ++++++++++++++++++++++++ src/components/pages/view-post.js | 6 +- src/components/posts/paged-grid.js | 2 +- src/components/posts/post.js | 56 +--- src/components/posts/timeline-view.js | 6 +- src/interface/rendering.js | 37 +++ 10 files changed, 430 insertions(+), 51 deletions(-) create mode 100644 assets/eva-icons/paper-plane.png create mode 100644 src/components/pages/view-comments.js create mode 100644 src/interface/rendering.js diff --git a/assets/eva-icons/paper-plane.png b/assets/eva-icons/paper-plane.png new file mode 100644 index 0000000000000000000000000000000000000000..1432e161d8252a67bd37d8b9b81c089d120433ab GIT binary patch literal 10138 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 literal 0 HcmV?d00001 diff --git a/src/App.js b/src/App.js index 5a25377..9b7d6db 100644 --- a/src/App.js +++ b/src/App.js @@ -6,9 +6,11 @@ import { createStackNavigator } from "react-navigation-stack"; import { registerRootComponent } from 'expo'; +import ViewPostJsx from "src/components/pages/view-post"; +import ViewCommentsJsx from "src/components/pages/view-comments.js"; + import FeedJsx from "src/components/pages/feed"; import ProfileJsx, { ViewProfileJsx } from "src/components/pages/profile"; -import ViewPostJsx from "src/components/pages/view-post"; import DiscoverJsx from 'src/components/pages/discover'; import SearchJsx from 'src/components/pages/discover/search'; import ViewHashtagJsx from 'src/components/pages/discover/view-hashtag'; @@ -21,9 +23,10 @@ const Stack = createStackNavigator({ Profile: { screen: ProfileJsx, }, Search: { screen: SearchJsx }, ViewPost: { screen: ViewPostJsx }, + ViewComments: { screen: ViewCommentsJsx }, ViewProfile: { screen: ViewProfileJsx }, ViewHashtag: { screen: ViewHashtagJsx } -}, { +}, { initialRouteKey: "Feed", headerMode: "none", navigationOptions: { diff --git a/src/components/navigation/navigators.js b/src/components/navigation/navigators.js index f1629d2..d3776c1 100644 --- a/src/components/navigation/navigators.js +++ b/src/components/navigation/navigators.js @@ -9,7 +9,7 @@ import TrayJsx from "src/components/navigation/tray"; // Provider for context menus // Allows for establishing global styling of context menus -const ContextJsx = (props) => { +export const ContextJsx = (props) => { return ( { props.children } diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js index b2ee92d..ac9b3e0 100644 --- a/src/components/pages/feed.js +++ b/src/components/pages/feed.js @@ -43,7 +43,9 @@ const FeedJsx = (props) => { - +
chunkWhile([1,1,1,2,2], (a, b) => a == b) + * [[1,1,1], [2,2]] + */ + + let parts; + + if (arr == []) { + return [] + } else { + parts = [[arr[0]]]; + } + + let tail = arr.slice(1); + + if (tail == []) { + return parts; + } + + for (let i = 0; i < tail.length; i++) { + let lastPart = parts[parts.length - 1]; + if (fun(tail[i], lastPart[lastPart.length - 1])) { + // If fun returns something truthy, push tail[i] to the end of the + // partition at the end of the new array. + parts[parts.length - 1].push(tail[i]) + } else { + // Create a new partition starting with tail[i] + parts.push([tail[i]]) + } + } + + return parts; +} + +function threadify(descendants, parentID) { + /* + * Take a list of descendants and sort them into a 2D matrix. + * The first item is the direct descendant of parentID post and the rest + * are all the descendants of the direct descendant in order of id, the + * way Instagram displays conversations in comments. + * i.e. [[first level comment, ...descendants]] + */ + + if (descendants == []) { + return []; + } + + // Sort comments in order of increasing reply id + const comments = descendants.sort((first, second) => { + return first.in_reply_to_id - second.in_reply_to_id; + }); + + // Return partitions of comments based on their reply id + const byReply = chunkWhile(comments, (a, b) => { + return a.in_reply_to_id == b.in_reply_to_id; + }); + + // Start with just the first level comments. + // All these elements should be in singleton arrays so they can be + // appended to. + let sorted = byReply[0].map(x => [x]); + + let sub = byReply.slice(1); // All sub-comments + + // Repeate the procedure until sub is empty (i.e all comments have been + // sorted) + while (sub.length > 0) { + sorted.forEach((thread, threadIndex) => { + for (let i = 0; i < thread.length; i++) { + const id = thread[i].id; + + // Search for comment groups with that id + for(let subIndex = 0; subIndex < sub.length; subIndex++) { + // All items in each partition should have the same reply id + if(id == sub[subIndex][0].in_reply_to_id) { + // Move the newly found thread contents to thread in + // sorted + sorted[threadIndex] = sorted[threadIndex].concat(sub[subIndex]); + sub.splice(subIndex, 1); + } + } + } + }); +} + +return sorted; +} + +const CommentJsx = (props) => { + const packs = { + favourited: { + active: require("assets/eva-icons/post-actions/heart-active.png"), + inactive: require("assets/eva-icons/post-actions/heart-inactive.png") + } + }; + + return ( + + + + + { props.data.username }  + { props.data.content } + + + + + { timeToAge((new Date()).getTime(), props.data.created_at) } + + + + + + Reply + + + + + + + + + + ); +} + +const ViewCommentsJsx = (props) => { + let [state, setState] = useState({ + postData: undefined, + loaded: false, + reply: "" + }); + + useEffect(() => { + (() => { // Some magical function that will get all the data needed + setState({ ...state, + descendants: threadify(TEST_CONTEXT.descendants), + postData: props.navigation.getParam("postData"), + loaded: true, + }); + })(); + }, []); + + return ( + + + + + { state.loaded ? + + + + + + { + state.descendants.map((thread, i) => { + const comment = thread[0]; + const subs = thread.slice(1); + + return ( + + + { + subs.map((sub, j) => { + return ( + + + + ) + }) + } + + ); + }) + } + + + : + } + + + + setState({...state, reply: c }) }/> + + + + + + + + + ); +} + +const SCREEN_WIDTH = Dimensions.get("window").width; + +const styles = { + bold: { + fontWeight: "bold", + }, + container: { + display: "flex", + flexDirection: "row", + flexShrink: 1, + marginTop: 10, + marginBottom: 10, + marginRight: 20, + }, + avatar: { + marginLeft: 20, + marginRight: 20, + width: 50, + height: 50, + borderRadius: "100%" + }, + contentContainer: { + flexShrink: 1 + }, + parentPost: { + borderBottomWidth: 1, + borderBottomColor: "#CCC", + marginBottom: 10 + }, + sub: { + marginLeft: SCREEN_WIDTH / 8 + }, + commentActions: { + display: "flex", + flexDirection: "row", + alignItems: "center", + }, + actionText: { + fontSize: 13, + color: "#666", + paddingRight: 10 + }, + heart: { + width: 15, + height: 15 + }, + + commentForm: { + flexDirection: "row", + alignItems: "center", + backgroundColor: "white", + + borderTopWidth: 1, + borderTopColor: "#CCC", + + paddingTop: 10, + paddingBottom: 10 + }, + commentInput: { + borderWidth: 0, + padding: 10, + flexGrow: 3, + marginRight: 20 + }, + submitContainer: { + marginLeft: "auto", + marginRight: 20 + }, + commentSubmit: { + width: 30, + height: 30, + } +}; + +export default ViewCommentsJsx; diff --git a/src/components/pages/view-post.js b/src/components/pages/view-post.js index 106fcd7..5cc87ce 100644 --- a/src/components/pages/view-post.js +++ b/src/components/pages/view-post.js @@ -8,9 +8,11 @@ const ViewPostJsx = (props) => { - + ); } -export default ViewPostJsx; \ No newline at end of file +export default ViewPostJsx; diff --git a/src/components/posts/paged-grid.js b/src/components/posts/paged-grid.js index 25a0542..50e964c 100644 --- a/src/components/posts/paged-grid.js +++ b/src/components/posts/paged-grid.js @@ -89,4 +89,4 @@ const styles = { } } -export default PagedGridJSX; \ No newline at end of file +export default PagedGridJSX; diff --git a/src/components/posts/post.js b/src/components/posts/post.js index 5fc6e48..2a9905f 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -9,6 +9,8 @@ import { renderers } from "react-native-popup-menu"; +import { pluralize, timeToAge } from "src/interface/rendering" + import PostActionBarJsx from "src/components/posts/post-action-bar"; const SCREEN_WIDTH = Dimensions.get("window").width; @@ -18,14 +20,6 @@ const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthum // This will be used in RawPostJsx const { SlideInMenu } = renderers; -function pluralize(n, singular, plural) { - if (n < 2) { - return singular; - } else { - return plural; - } -} - function getAutoHeight(w1, h1, w2) { /* Given the original dimensions and the new width, calculate what would @@ -45,36 +39,6 @@ function getAutoHeight(w1, h1, w2) { return w2 * (h1 / w1) } -function timeToAge(time1, time2) { - /* - Output a friendly string to describe the age of a post, where `time1` and - `time2` are in milliseconds - */ - - const between = (n, lower, upper) => n >= lower && n < upper; - - const diff = time1 - time2; - - if (diff < 60000) { - return "Seconds ago" - } else if (between(diff, 60000, 3600000)) { - const nMin = Math.floor(diff / 60000); - return nMin + " " + pluralize(nMin, "minute", "minutes") + " ago"; - } else if (between(diff, 3600000, 86400000)) { - const nHours = Math.floor(diff / 3600000); - return nHours + " " + pluralize(nHours, "hour", "hours") + " ago"; - } else if (between(diff, 86400000, 2629800000)) { - const nDays = Math.floor(diff / 86400000); - return nDays + " " + pluralize(nDays, "day", "days") + " ago"; - } else if (between(diff, 2629800000, 31557600000)) { - const nMonths = Math.floor(diff / 2629800000); - return nMonths + " " + pluralize(nMonths, "month", "months") + " ago"; - } else { - const nYears = Math.floor(diff / 31557600000); - return nYears + " " + pluralize(nYears, "year", "years") + " ago"; - } -} - export const RawPostJsx = (props) => { const repliesCount = props.data.replies_count; @@ -125,7 +89,13 @@ export const RawPostJsx = (props) => { { props.data.username } { props.data.content } - + props.navigation.navigate("ViewComments", { + originTab: props.navigation.getParam("originTab"), + postData: props.data + }) + }> { commentsText } @@ -169,7 +139,8 @@ export const PostByDataJsx = (props) => { + height = { state.height } + navigation = { props.navigation }/> : } ); @@ -210,7 +181,7 @@ export const PostByIdJsx = (props) => { }); }); })(); - }); + }, []); return ( @@ -218,7 +189,8 @@ export const PostByIdJsx = (props) => { + height = { state.height } + navigation = { props.navigation }/> : } diff --git a/src/components/posts/timeline-view.js b/src/components/posts/timeline-view.js index a66736b..70a158f 100644 --- a/src/components/posts/timeline-view.js +++ b/src/components/posts/timeline-view.js @@ -9,7 +9,9 @@ const TimelineViewJsx = (props) => { { props.posts.map((post, i) => { return ( - + ); }) } @@ -17,4 +19,4 @@ const TimelineViewJsx = (props) => { ); }; -export default TimelineViewJsx; \ No newline at end of file +export default TimelineViewJsx; diff --git a/src/interface/rendering.js b/src/interface/rendering.js new file mode 100644 index 0000000..6dee69e --- /dev/null +++ b/src/interface/rendering.js @@ -0,0 +1,37 @@ +export function pluralize(n, singular, plural) { + if (n < 2) { + return singular; + } else { + return plural; + } +} + +export function timeToAge(time1, time2) { + /* + Output a friendly string to describe the age of a post, where `time1` and + `time2` are in milliseconds + */ + + const between = (n, lower, upper) => n >= lower && n < upper; + + const diff = time1 - time2; + + if (diff < 60000) { + return "Seconds ago" + } else if (between(diff, 60000, 3600000)) { + const nMin = Math.floor(diff / 60000); + return nMin + " " + pluralize(nMin, "minute", "minutes") + " ago"; + } else if (between(diff, 3600000, 86400000)) { + const nHours = Math.floor(diff / 3600000); + return nHours + " " + pluralize(nHours, "hour", "hours") + " ago"; + } else if (between(diff, 86400000, 2629800000)) { + const nDays = Math.floor(diff / 86400000); + return nDays + " " + pluralize(nDays, "day", "days") + " ago"; + } else if (between(diff, 2629800000, 31557600000)) { + const nMonths = Math.floor(diff / 2629800000); + return nMonths + " " + pluralize(nMonths, "month", "months") + " ago"; + } else { + const nYears = Math.floor(diff / 31557600000); + return nYears + " " + pluralize(nYears, "year", "years") + " ago"; + } +} From 39d15067c2dfcaa60e69c4083718c678bcdc3197 Mon Sep 17 00:00:00 2001 From: natjms Date: Sat, 13 Mar 2021 13:17:54 -0400 Subject: [PATCH 7/7] Add support for more than one media_attachment element --- src/components/pages/feed.js | 6 +- src/components/posts/post.js | 113 +++++++++++++++++++++++++---------- 2 files changed, 85 insertions(+), 34 deletions(-) diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js index ac9b3e0..db6941c 100644 --- a/src/components/pages/feed.js +++ b/src/components/pages/feed.js @@ -18,7 +18,7 @@ const TEST_POSTS = [ content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, media_attachments: [ - {preview_url: TEST_IMAGE} + {url: TEST_IMAGE} ] }, { @@ -31,7 +31,9 @@ const TEST_POSTS = [ content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, media_attachments: [ - {preview_url: TEST_IMAGE} + { url: "https://college.mayo.edu/media/mccms/content-assets/campus-amp-community/arizona/mayo-clinic-phoenix-arizona-is453080663-hero-mobile.jpg" }, + { url: TEST_IMAGE }, + { url: TEST_IMAGE } ] } ]; diff --git a/src/components/posts/post.js b/src/components/posts/post.js index 2a9905f..5767612 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -1,5 +1,12 @@ import React, { useEffect, useState } from "react"; -import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native"; +import { + Image, + View, + Text, + Dimensions, + TouchableWithoutFeedback, + ScrollView +} from "react-native"; import { Menu, @@ -9,6 +16,7 @@ import { renderers } from "react-native-popup-menu"; + import { pluralize, timeToAge } from "src/interface/rendering" import PostActionBarJsx from "src/components/posts/post-action-bar"; @@ -39,6 +47,29 @@ function getAutoHeight(w1, h1, w2) { return w2 * (h1 / w1) } +function getDimensionsPromises(uris) { + return uris.map(attachment => new Promise(resolve => { + Image.getSize(attachment.url, (width, height) => { + const autoHeight = getAutoHeight(width, height, SCREEN_WIDTH) + + resolve([SCREEN_WIDTH, autoHeight]); + }); + })); +} + +const PostImageJsx = (props) => { + return +}; + export const RawPostJsx = (props) => { const repliesCount = props.data.replies_count; @@ -74,17 +105,33 @@ export const RawPostJsx = (props) => { - { /* TODO: support for more than one image per post */ } - + { + props.data.media_attachments.length > 1 ? + + { + props.data.media_attachments + .map((attachment, i) => { + return (); + }) + } + + : + } + reblogged = { props.data.reblogged } /> { props.data.username } { props.data.content } @@ -116,18 +163,15 @@ export const PostByDataJsx = (props) => { */ let [state, setState] = useState({ - width: 0, - height: 0, - loaded: false + loaded: false, + dimensions: [] }); useEffect(() => { - Image.getSize(TEST_IMAGE, (width, height) => { - const newHeight = getAutoHeight(width, height, SCREEN_WIDTH) - + Promise.all(getDimensionsPromises(props.data.media_attachments)) + .then(dimensions => { setState({ - width: SCREEN_WIDTH, - height: newHeight, + dimensions: dimensions, loaded: true }); }); @@ -138,8 +182,7 @@ export const PostByDataJsx = (props) => { { state.loaded ? : } @@ -159,37 +202,36 @@ export const PostByIdJsx = (props) => { reblogged: false, content: "", timestamp: 0, + loaded: false, + dimensions: [] }); useEffect(() => { // TODO: Make API request using props.id, set it as the state - ((/* This would be the data retrieved */) => { - Image.getSize(TEST_IMAGE, (width, height) => { - const newHeight = getAutoHeight(width, height, SCREEN_WIDTH) - + (() => { + Promise.all(getDimensionsPromises([{ url: TEST_IMAGE }])) + .then(dimensions => { setState({ avatar: TEST_IMAGE, username: "njms", - media_attachments: [TEST_IMAGE], + media_attachments: [{ url: TEST_IMAGE }], favourited: false, reblogged: false, content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, - width: SCREEN_WIDTH, - height: newHeight, - loaded: true + loaded: true, + dimensions: dimensions }); }); })(); - }, []); + }); return ( { state.loaded ? : } @@ -229,7 +271,14 @@ const styles = { photo: { flex: 1, }, - + carousel: { + width: SCREEN_WIDTH, + height: SCREEN_WIDTH, + }, + carouselContainer: { + display: "flex", + alignItems: "center" + }, caption: { padding: SCREEN_WIDTH / 24, },