Skip to content

Commit

Permalink
Add more weeks & Add expand buttons for bulky item and loop desc
Browse files Browse the repository at this point in the history
  • Loading branch information
@lil5
lil5 committed Jul 20, 2023
1 parent 67afb60 commit 4fe01d5
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 55 deletions.
6 changes: 4 additions & 2 deletions app/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"info": "Info",
"loopInformation": "Loop Information",
"rules": "Rules",
"addresses": "Addresses",
"bag": "Bag",
Expand All @@ -10,6 +11,7 @@
"settings": "Settings",
"cancel": "Cancel",
"close": "Close",
"readMore": "Read More",
"ifYouAreInterestedPleaseSendAMessage": "If you are interested please send {{name}} a message",
"imInterestedInThisBulkyItem": "I'm interested in your {{name}}, is it still available? When could I pick it up?",
"selectALoop": "Select a Loop",
Expand Down Expand Up @@ -78,7 +80,7 @@
"paused": "Paused",
"unPause": "Un-pause",
"areYouSureUnPause": "Are you sure you want to Un-pause?",
"week_one": "Week",
"week_other": "{{count}} weeks",
"week_one": "{{count}} Week",
"week_other": "{{count}} Weeks",
"setTimerForACoupleOfWeeks": "Select how many weeks you want to pause your participation"
}
4 changes: 2 additions & 2 deletions app/public/locales/nl/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
"pauseUntil": "Pauzeer tot",
"unPause": "Hervatten",
"areYouSureUnPause": "Weet u zeker dat u wilt doorgaan?",
"week_one": "Week",
"week_other": "{{count}} weken",
"week_one": "{{count}} Week",
"week_other": "{{count}} Weken",
"setTimerForACoupleOfWeeks": "Selecteer hoeveel weken je je deelname wilt onderbreken"
}
22 changes: 6 additions & 16 deletions app/src/Store.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,11 @@ interface StorageAuth {
token: string;
}

export type PauseAmount = "none" | "week" | "2weeks" | "3weeks";

export const StoreContext = createContext({
isAuthenticated: null as boolean | null,
isChainAdmin: false,
authUser: null as null | User,
setPause: (p: PauseAmount) => {},
setPause: (p: number) => {},
chain: null as Chain | null,
chainUsers: [] as Array<User>,
route: [] as UID[],
Expand Down Expand Up @@ -171,22 +169,14 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
setIsChainAdmin(IsChainAdmin(authUser, _chain));
}

async function _setPause(pause: PauseAmount) {
async function _setPause(pause: number) {
if (!authUser) return;

let pauseUntil = dayjs();
switch (pause) {
case "week":
pauseUntil = pauseUntil.add(1, "week");
break;
case "2weeks":
pauseUntil = pauseUntil.add(2, "week");
break;
case "3weeks":
pauseUntil = pauseUntil.add(3, "week");
break;
default:
pauseUntil = pauseUntil.add(-1, "week");
if (pause <= 0) {
pauseUntil = pauseUntil.add(-1, "week");
} else {
pauseUntil = pauseUntil.add(pause, "week");
}
await userUpdate({
user_uid: authUser.uid,
Expand Down
106 changes: 78 additions & 28 deletions app/src/pages/BulkyList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,19 @@ import {
IonHeader,
IonIcon,
IonItem,
IonModal,
IonPage,
IonText,
IonTitle,
IonToolbar,
useIonActionSheet,
useIonAlert,
useIonToast,
} from "@ionic/react";
import {
calendarClear,
chatbubbleOutline,
ellipsisHorizontal,
personCircleOutline,
} from "ionicons/icons";
import { useContext, useRef, useState } from "react";
Expand All @@ -33,13 +36,16 @@ import { Share } from "@capacitor/share";

export default function BulkyList() {
const { t } = useTranslation();
const { chain, chainUsers, bulkyItems, setChain, authUser } =
const { chain, chainUsers, bulkyItems, setChain, authUser, isChainAdmin } =
useContext(StoreContext);
const modal = useRef<HTMLIonModalElement>(null);
const [presentAlert] = useIonAlert();
const [present] = useIonToast();
const [presentActionSheet] = useIonActionSheet();
const [updateBulky, setUpdateBulky] = useState<BulkyItem | null>(null);
const [isCapacitor] = useState(isPlatform("capacitor"));
const [modalDescBody, setModalDescBody] = useState("");
const refModalDesc = useRef<HTMLIonModalElement>(null);

function refresh() {
setChain(chain, authUser!.uid);
Expand Down Expand Up @@ -69,6 +75,11 @@ export default function BulkyList() {
});
}

function handleClickReadMore(text: string) {
setModalDescBody(text);
refModalDesc.current?.present();
}

function handleClickCreate() {
setUpdateBulky(null);

Expand Down Expand Up @@ -169,8 +180,9 @@ export default function BulkyList() {
{bulkyItems.map((bulkyItem) => {
const user = chainUsers.find((u) => u.uid === bulkyItem.user_uid);
if (!user) return null;

const isMe = authUser?.uid === user.uid;
let createdAt = new Date(bulkyItem.created_at);
let shouldExpandText = bulkyItem.message.length > 100;

return (
<IonCard key={bulkyItem.id}>
Expand Down Expand Up @@ -219,51 +231,81 @@ export default function BulkyList() {
marginRight: "-16px",
}}
>
<IonIcon
slot="start"
className="ion-align-self-start"
icon={personCircleOutline}
/>
<IonText>
<h5 className="ion-no-margin ion-text-bold">
{user.name}
</h5>
<small className="ion-text-wrap">{user.address}</small>
</IonText>
</IonItem>
<IonText
<IonItem
lines="none"
onClick={
shouldExpandText
? () => handleClickReadMore(bulkyItem.message)
: undefined
}
style={{
color: "var(--ion-color-dark)",
marginLeft: -16,
marginRight: -16,
}}
>
<p
<IonText
style={{
whiteSpace: "pre-wrap",
color: "var(--ion-color-dark)",
}}
className="ion-padding-top"
>
{bulkyItem.message}
</p>
</IonText>
<p
style={{
whiteSpace: "pre-wrap",
overflow: "hidden",
display: "block",
...(shouldExpandText
? {
maxHeight: 60,
}
: {}),
}}
className="ion-padding-top"
>
{bulkyItem.message}
</p>
{shouldExpandText ? (
<small
style={{
marginTop: -6,
display: "block",
color: "var(--ion-color-medium)",
}}
>
{t("readMore")}
</small>
) : null}
</IonText>
</IonItem>
</IonCardContent>

<div
style={{ display: "flex", justifyContent: "space-between" }}
>
<IonButtons className="ion-margin-bottom ion-margin-horizontal">
<IonButton
fill="clear"
onClick={() => handleClickEdit(bulkyItem)}
>
{t("edit")}
</IonButton>
<IonButton
fill="clear"
color="danger"
onClick={() => handleClickDelete(bulkyItem.id)}
>
{t("delete")}
</IonButton>
{isMe || isChainAdmin ? (
<>
<IonButton
fill="clear"
onClick={() => handleClickEdit(bulkyItem)}
>
{t("edit")}
</IonButton>
<IonButton
fill="clear"
color="danger"
onClick={() => handleClickDelete(bulkyItem.id)}
>
{t("delete")}
</IonButton>
</>
) : null}
</IonButtons>
<IonButtons className="ion-margin-bottom ion-margin-horizontal">
<IonButton
Expand All @@ -285,6 +327,14 @@ export default function BulkyList() {
</IonCard>
);
})}

<IonModal
ref={refModalDesc}
initialBreakpoint={0.4}
breakpoints={[0, 0.4, 1]}
>
<div className="ion-padding ion-margin-top">{modalDescBody}</div>
</IonModal>
</div>
<CreateUpdateBulky
modal={modal}
Expand Down
69 changes: 62 additions & 7 deletions app/src/pages/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
IonHeader,
IonIcon,
IonItem,
IonItemDivider,
IonLabel,
IonList,
IonPage,
Expand All @@ -29,6 +30,7 @@ import { useTranslation } from "react-i18next";
import {
compassOutline,
copyOutline,
ellipsisHorizontal,
eyeOffOutline,
eyeOutline,
lockClosedOutline,
Expand All @@ -53,6 +55,7 @@ export default function Settings() {
const [presentAlert] = useIonAlert();
const refChainSelect = useRef<HTMLIonSelectElement>(null);
const [isCapacitor] = useState(isPlatform("capacitor"));
const [expandedDescription, setExpandedDescription] = useState(false);

const isUserAdmin = useMemo(
() =>
Expand Down Expand Up @@ -104,7 +107,7 @@ export default function Settings() {
},
{
text: t("unPause"),
handler: () => setPause("none"),
handler: () => setPause(0),
role: "destructive",
},
]);
Expand All @@ -113,16 +116,32 @@ export default function Settings() {
header: t("pauseUntil"),
buttons: [
{
text: t("week", { count: 1 }),
handler: () => setPause("week"),
text: t("week", { count: 10 }),
handler: () => setPause(10),
},
{
text: t("week", { count: 2 }),
handler: () => setPause("2weeks"),
text: t("week", { count: 8 }),
handler: () => setPause(8),
},
{
text: t("week", { count: 6 }),
handler: () => setPause(6),
},
{
text: t("week", { count: 4 }),
handler: () => setPause(4),
},
{
text: t("week", { count: 3 }),
handler: () => setPause("3weeks"),
handler: () => setPause(3),
},
{
text: t("week", { count: 2 }),
handler: () => setPause(2),
},
{
text: t("week", { count: 1 }),
handler: () => setPause(1),
},
{
text: t("cancel"),
Expand Down Expand Up @@ -151,6 +170,7 @@ export default function Settings() {
let isUserPaused = isPaused(authUser?.paused_until || null);

let pausedDayjs = isUserPaused && dayjs(authUser!.paused_until);
let showExpandButton = (chain?.description.length || 0) > 200;

return (
<IonPage>
Expand Down Expand Up @@ -199,6 +219,13 @@ export default function Settings() {
</IonItem>
<IonCard color="secondary">
<IonList>
<IonItemDivider
style={{
background: "var(--ion-color-secondary-shade)",
}}
>
{t("loopInformation")}
</IonItemDivider>
<IonItem lines="none">
<IonSelect
ref={refChainSelect}
Expand Down Expand Up @@ -288,7 +315,35 @@ export default function Settings() {
<IonItem lines="none">
<IonLabel>
<h3>{t("description")}</h3>
<p>{chain?.description}</p>
<p
style={{
whiteSpace: "pre-wrap",
overflow: "hidden",
display: "block",
...(!expandedDescription && showExpandButton
? {
maxHeight: 60,
}
: {}),
}}
>
{chain?.description}
</p>
{!expandedDescription && showExpandButton ? (
<IonButton
onClick={() => setExpandedDescription((s) => !s)}
size="small"
color="clear"
expand="block"
style={{
marginTop: -6,
"--padding-start": "0px",
// "--padding-end": "5px",
}}
>
<IonIcon icon={ellipsisHorizontal} color="primary" />
</IonButton>
) : null}
</IonLabel>
</IonItem>
</IonList>
Expand Down

0 comments on commit 4fe01d5

Please sign in to comment.