Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Waves page #176

Merged
merged 72 commits into from
Jan 28, 2025
Merged
Changes from 1 commit
Commits
Show all changes
72 commits
Select commit Hold shift + click to select a range
59e0fa4
Show basic waves list
dkildar Nov 10, 2024
47cd6da
Extracted render wave body to separated hook
dkildar Nov 12, 2024
1a6b723
Extracted actions and other common codebase to features
dkildar Nov 13, 2024
1af5416
Extracted common thread rendering to feature
dkildar Nov 15, 2024
e5beac0
Migrated wave form to separated feature
dkildar Nov 16, 2024
05ac15e
Added wave creation form to waves page
dkildar Nov 18, 2024
aa040f9
Extracted available waves hosts to waves feature, added tabs for host…
dkildar Nov 18, 2024
ded0fb4
Added host selection in waves page
dkildar Nov 18, 2024
04f3c5d
Fixed *your* waves label
dkildar Nov 18, 2024
d729031
Improved host selection in waves page
dkildar Nov 18, 2024
92f33a1
Added loading indicator for waves data
dkildar Nov 18, 2024
b6b48d0
Improved layout of wave creation form
dkildar Nov 18, 2024
cb22754
Added validation stage when creating the wave item
dkildar Nov 18, 2024
5ffb756
Improved design of navigation bar and host selection in waves page
dkildar Nov 19, 2024
5c3d3d2
Improved design of waves list
dkildar Nov 19, 2024
e6cb193
Added waves details page
dkildar Nov 20, 2024
739685c
Added tree-view for wave details page's discussions
dkildar Nov 29, 2024
a308c49
Improved replying to specific wave in waves details page
dkildar Nov 29, 2024
f095b32
Added back button in a toolbar in waves details page
dkildar Nov 29, 2024
babfedb
Merge branch 'develop' into feature/waves-page
dkildar Nov 30, 2024
6f59c94
Added top communities widget
dkildar Dec 1, 2024
adeee50
Added type of wave promotion card
dkildar Dec 1, 2024
4d5bb53
Added who to follow card in waves
dkildar Dec 1, 2024
291fdc4
Added wave profile card
dkildar Dec 1, 2024
c00f253
Added scale effect to button clicking
dkildar Dec 1, 2024
815ee88
Added anon statement for waves
dkildar Dec 1, 2024
16756d9
Added empty state for wave discussions
dkildar Dec 2, 2024
db6fa7c
Added loading states for button, avatar and community item
dkildar Dec 2, 2024
f66a74e
Added loading state for waves profile card
dkildar Dec 2, 2024
02a2c43
Added loading state for wave details card
dkildar Dec 2, 2024
6ecb9ba
Added loading state for waves page
dkildar Dec 2, 2024
1473a81
Added fast reply dialog in waves
dkildar Dec 2, 2024
07f772e
Added redirect to replied wave page
dkildar Dec 2, 2024
3cec8a4
Dark theme improvements
dkildar Dec 4, 2024
21c4f9c
Beautify navbar text menu
dkildar Dec 4, 2024
2689d4d
Improved styles of waves page sub navigation
dkildar Dec 5, 2024
fc9db02
Show polls in waves
dkildar Dec 5, 2024
9d2b985
Added basic mobile layout for waves
dkildar Dec 6, 2024
aa19172
Added metadata for wave pages
dkildar Dec 6, 2024
cc7915d
Added in place waves editing in waves list/details
dkildar Dec 6, 2024
d75ed5b
Do not allow to edit polls in waves
dkildar Dec 6, 2024
4aa6abc
Added polls when editing waves
dkildar Dec 7, 2024
9888f28
Disable promotion in waves
dkildar Dec 7, 2024
e13331a
Added avatar for host selection
dkildar Dec 7, 2024
7ff3076
Adjusted modal and button styles
dkildar Dec 7, 2024
590ff1c
Merge branch 'develop' into feature/waves-page
dkildar Dec 7, 2024
f8f9646
Fixed merge conflicts
dkildar Dec 7, 2024
08dabac
Fixed modal dialog extra styles
dkildar Dec 18, 2024
b326c01
Merge branch 'develop' into feature/waves-page
dkildar Jan 6, 2025
952b528
Fixed uniqueness of waves who to follow card
dkildar Jan 6, 2025
cc5932f
Added translations for waves reply form button
dkildar Jan 6, 2025
1c0941f
Added labels for waves in selection
dkildar Jan 6, 2025
a5f9da0
Moved entry stats components to shared module
dkildar Jan 8, 2025
a1fe4eb
Show entry stats in wave details list
dkildar Jan 8, 2025
887c6d8
Send page view event anytime when wave was scrolled/viewed in a feed
dkildar Jan 8, 2025
d3b3bcb
Changed permlink to wave-ntz for Waves page
dkildar Jan 8, 2025
f2bfd30
Changed permlink to wave-ntz for Waves page
dkildar Jan 8, 2025
fd3b781
Merge remote-tracking branch 'origin/feature/waves-page' into feature…
dkildar Jan 13, 2025
74d6524
Added ecency renderer to wave posts
dkildar Jan 19, 2025
1d2838c
Applied ecency renderer to decks, discussions
dkildar Jan 20, 2025
01cc393
Added auto-expand of textarea in wave form
dkildar Jan 20, 2025
74ae641
Updated emoji picker icon
dkildar Jan 20, 2025
fbf38e7
Fixed pagination issue in waves
dkildar Jan 21, 2025
af50958
Hide resource credits from user card in a waves
dkildar Jan 23, 2025
26ba00a
Show wave form controls only on focusing in textarea
dkildar Jan 23, 2025
0b9f348
Added button for moving to wave details page
dkildar Jan 23, 2025
d3bd3a2
Added masonry view for waves
dkildar Jan 23, 2025
711618e
Improvements based on review
dkildar Jan 24, 2025
7373554
Removed all filter
dkildar Jan 24, 2025
9920ff7
Added peak snaps
dkildar Jan 24, 2025
9fc7960
Added renderer styles locally
dkildar Jan 27, 2025
4b8b528
Updated renderer version
dkildar Jan 27, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Show polls in waves
dkildar committed Dec 5, 2024
commit fc9db02f7bf03bc3b2bdc5b4440c5c0800c7aceb
7 changes: 7 additions & 0 deletions src/app/waves/_components/waves-list-item.tsx
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ import { motion } from "framer-motion";
import "./waves-list-item.scss";
import { useRouter } from "next/navigation";
import { classNameObject } from "@ui/util";
import { PollWidget, useEntryPollExtractor } from "@/features/polls";

interface Props {
item: WaveEntry;
@@ -33,6 +34,7 @@ export function WavesListItem({
const { data: entry } =
EcencyEntriesCacheManagement.getEntryQuery<WaveEntry>(item).useClientQuery();

const poll = useEntryPollExtractor(entry);
const renderBody = useRenderWaveBody(renderAreaRef, item, {});

useMount(() => renderBody());
@@ -79,6 +81,11 @@ export function WavesListItem({
dangerouslySetInnerHTML={{ __html: renderPostBody(entry!) }}
onClick={(e) => e.stopPropagation()}
/>
{poll && (
<div onClick={(e) => e.stopPropagation()} className="p-4">
<PollWidget entry={entry} compact={true} poll={poll} isReadOnly={false} />
</div>
)}
<WaveActions
status={status}
entry={item}
26 changes: 17 additions & 9 deletions src/features/waves/components/wave-form/index.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import React, { useCallback, useContext, useEffect, useMemo } from "react";
import "./_index.scss";
import { Entry, WaveEntry } from "@/entities";
import { useGlobalStore } from "@/core/global-store";
import { PollsContext } from "@/features/polls";
import { PollsContext, PollsManager } from "@/features/polls";
import { useLocalStorage } from "react-use";
import { PREFIX } from "@/utils/local-storage";
import { AvailableCredits, ProfileLink, UserAvatar } from "@/features/shared";
@@ -24,7 +24,7 @@ interface Props {
entry: WaveEntry | undefined;
}

export const WaveForm = ({
const WaveFormComponent = ({
placeholder,
replySource,
onSuccess,
@@ -34,11 +34,11 @@ export const WaveForm = ({
const activeUser = useGlobalStore((s) => s.activeUser);
const { clearActivePoll } = useContext(PollsContext);

const [threadHost, setThreadHost] = useLocalStorage(PREFIX + "_dtf_th", "ecency.waves");
const [text, setText, clearText] = useLocalStorage(PREFIX + "_dtf_t", "");
const [image, setImage, clearImage] = useLocalStorage<string>(PREFIX + "_dtf_i", "");
const [imageName, setImageName, clearImageName] = useLocalStorage<string>(PREFIX + "_dtf_in", "");
const [video, setVideo, clearVideo] = useLocalStorage<string>(PREFIX + "_dtf_v", "");
const [threadHost, setThreadHost] = useLocalStorage(PREFIX + "_wf_th", "ecency.waves");
const [text, setText, clearText] = useLocalStorage(PREFIX + "_wf_t", "");
const [image, setImage, clearImage] = useLocalStorage<string>(PREFIX + "_wf_i", "");
const [imageName, setImageName, clearImageName] = useLocalStorage<string>(PREFIX + "_wf_in", "");
const [video, setVideo, clearVideo] = useLocalStorage<string>(PREFIX + "_wf_v", "");

const disabled = useMemo(() => !text || !threadHost, [text, threadHost]);

@@ -95,8 +95,8 @@ export const WaveForm = ({
video={video}
text={text!!}
setText={setText}
selectedImage={image!!}
setSelectedImage={setImage}
selectedImage={image}
clearSelectedImage={clearImage}
placeholder={placeholder}
onTextareaFocus={() => {}}
/>
@@ -149,4 +149,12 @@ export const WaveForm = ({
);
};

export function WaveForm(props: Props) {
return (
<PollsManager>
<WaveFormComponent {...props} />
</PollsManager>
);
}

export * from "./wave-form-loading";
75 changes: 49 additions & 26 deletions src/features/waves/components/wave-form/wave-form-control.tsx
Original file line number Diff line number Diff line change
@@ -2,15 +2,18 @@ import React, { useContext } from "react";
import TextareaAutosize from "react-textarea-autosize";
import { PollsContext, PollWidget } from "@/features/polls";
import i18next from "i18next";
import { closeSvg } from "@ui/svg";
import Image from "next/image";
import { Badge } from "@ui/badge";
import { Button } from "@ui/button";
import { UilMultiply } from "@tooni/iconscout-unicons-react";
import { AnimatePresence, motion } from "framer-motion";

interface Props {
text: string;
setText: (v: string) => void;
video: string | undefined;
selectedImage: string | undefined;
setSelectedImage: (url: string | undefined) => void;
clearSelectedImage: () => void;
placeholder?: string;
onTextareaFocus: () => void;
}
@@ -19,36 +22,56 @@ export const WaveFormControl = ({
text,
setText,
selectedImage,
setSelectedImage,
clearSelectedImage,
placeholder,
onTextareaFocus
}: Props) => {
const { activePoll } = useContext(PollsContext);

return (
<div className="pt-4">
<TextareaAutosize
className="w-full min-h-[8rem] rounded-xl p-2 lg:p-4 bg-gray-100 dark:bg-dark-default outline-none border-0 resize-none"
placeholder={placeholder ?? i18next.t("decks.threads-form.input-placeholder")}
value={text}
onChange={(e) => setText(e.target.value)}
onFocus={onTextareaFocus}
/>
<div className="text-xs opacity-50 pb-2">{text?.length ?? 0}/255</div>
{selectedImage && (
<div className="deck-threads-form-selected-image border mb-3">
<div className="type">image</div>
<Image width={1000} height={1000} src={selectedImage} alt="" />
<div className="remove" onClick={() => setSelectedImage(undefined)}>
{closeSvg}
</div>
</div>
)}
{activePoll && (
<div className="py-4">
<PollWidget compact={true} poll={activePoll} isReadOnly={true} />
</div>
)}
<div className="flex items-start gap-4 flex-wrap py-4">
<div className="w-full">
<TextareaAutosize
className="w-full min-h-[8rem] rounded-xl p-2 lg:p-4 bg-gray-100 dark:bg-dark-default outline-none border-0 resize-none"
placeholder={placeholder ?? i18next.t("decks.threads-form.input-placeholder")}
value={text}
onChange={(e) => setText(e.target.value)}
onFocus={onTextareaFocus}
/>
<div className="text-xs opacity-50 pb-2">{text?.length ?? 0}/255</div>
</div>
<AnimatePresence>
{selectedImage && (
<motion.div
key="image"
initial={{ opacity: 0, scale: 0.875, height: 0 }}
animate={{ opacity: 1, scale: 1, height: "auto" }}
exit={{ opacity: 0, scale: 0.875, height: 0 }}
className="max-w-[320px] rounded-2xl relative overflow-hidden border border-[--border-color] mb-3"
>
<Badge className="absolute top-4 left-4 text-xs uppercase">image</Badge>
<Image width={1000} height={1000} src={selectedImage} alt="" />
<Button
appearance="danger"
size="sm"
icon={<UilMultiply />}
className="absolute top-4 right-4"
onClick={() => clearSelectedImage()}
/>
</motion.div>
)}
{activePoll && (
<motion.div
key="poll"
initial={{ opacity: 0, scale: 0.875, height: 0 }}
animate={{ opacity: 1, scale: 1, height: "auto" }}
exit={{ opacity: 0, scale: 0.875, height: 0 }}
className="max-w-[320px]"
>
<PollWidget compact={true} poll={activePoll} isReadOnly={true} />
</motion.div>
)}
</AnimatePresence>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -128,9 +128,8 @@ export const WaveFormToolbarImagePicker = ({ onAddImage }: Props) => {
<GalleryDialog
show={galleryPickInitiated}
setShow={setGalleryPickInitiated}
onPick={(url: string) => {
const fileName = "";
onAddImage?.(fileName, url);
onPick={(url) => {
onAddImage?.(url, url);
setGalleryPickInitiated(false);
}}
/>