Skip to content

Commit

Permalink
UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ryczko
Ryczko committed Apr 7, 2023
1 parent 84087dd commit 3925406
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 57 deletions.
17 changes: 10 additions & 7 deletions src/features/surveys/components/EmojiPicker/EmojiPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { useCloseComponent } from 'shared/hooks/useCloseComponent';
import Loader from 'shared/components/Loader/Loader';
import Emoji from 'features/surveys/components/Emoji/Emoji';
import { EMOJI_STYLE } from 'shared/constants/emojisConfig';
import { TrashIcon } from '@heroicons/react/outline';
import { PlusSmIcon, TrashIcon } from '@heroicons/react/outline';
import Button, { ButtonVariant } from 'shared/components/Button/Button';

const Picker = dynamic(() => import('emoji-picker-react'), {
ssr: false,
Expand Down Expand Up @@ -58,16 +59,18 @@ function EmojiPicker({
{!addEmoji ? (
<Emoji unified={chosenEmoji?.unified || defaultEmote || ''} />
) : (
<p className="pt-1 text-xl">+</p>
<div className="w-[32px]">
<PlusSmIcon />
</div>
)}
</button>
{onEmoteRemove && (
<button
className="mt-3 flex w-16 items-center justify-center rounded-lg bg-red-300"
<Button
onClick={() => onEmoteRemove(index)}
>
<TrashIcon className="my-2 h-5 w-5" />
</button>
className="mt-1 w-[64px]"
variant={ButtonVariant.DANGER}
icon={<TrashIcon className="h-4 w-4" />}
/>
)}
{displayPicker && (
<button
Expand Down
2 changes: 1 addition & 1 deletion src/features/surveys/components/SurveyRow/SurveyRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function SurveyRow({
};

return (
<div className="mb-4 flex w-[600px] max-w-full flex-col md:flex-row">
<div className="mb-4 flex w-full max-w-xl flex-col md:flex-row">
<div className="flex w-full items-center justify-between rounded-md rounded-b-none bg-white py-3 px-4 shadow-sm md:rounded-b-md">
<div title={question} className="w-36 truncate text-left">
{question}
Expand Down
20 changes: 1 addition & 19 deletions src/features/surveys/managers/createSurveyManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ export const useCreateSurveyManager = () => {
const [title, setTitle] = useState('');
const [pack, setPack] = useState<string[]>([]);
const [error, setError] = useState('');
const [allowAdd, setAllowAdd] = useState(true);
const [allowRemove, setAllowRemove] = useState(true);

const { user } = useApplicationContext();
const [isCreating, setIsCreating] = useState(false);
Expand All @@ -25,18 +23,6 @@ export const useCreateSurveyManager = () => {
setPack(['1f603', '1f642', '1f641', '1f621']);
}, []);

useEffect(() => {
if (pack.length === 2) {
return setAllowRemove(false);
}
if (pack.length === 8) {
return setAllowAdd(false);
}

setAllowRemove(true);
setAllowAdd(true);
}, [pack]);

const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>): void => {
setTitle(e.target.value);
};
Expand All @@ -56,9 +42,7 @@ export const useCreateSurveyManager = () => {
};

const handleEmoteRemove = (index: number) => {
setPack((oldPack) => {
return oldPack.filter((pack, idx) => idx !== index);
});
setPack((oldPack) => oldPack.filter((pack, idx) => idx !== index));
};

const createSurvey = async () => {
Expand Down Expand Up @@ -94,8 +78,6 @@ export const useCreateSurveyManager = () => {
title,
error,
pack,
allowAdd,
allowRemove,
handleChangeTitle,
handleEmotePick,
handleEmoteRemove,
Expand Down
4 changes: 2 additions & 2 deletions src/pages/survey/[surveyId]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function AnswerPage() {
<div className="container m-auto mb-6 px-4 text-center md:px-8">
<Header>{question}</Header>

<div className="mx-auto grid max-w-[500px] grid-cols-2 gap-2 sm:grid-cols-4">
<div className="mx-auto grid max-w-[500px] grid-cols-2 gap-2 sm:grid-cols-4">
{icons.map((icon, idx) => (
<EmojiButton
icon={icon}
Expand All @@ -55,7 +55,7 @@ function AnswerPage() {
)}
<div className="mt-8">
<textarea
className="h-56 w-[500px] max-w-[100%] resize-none rounded-lg p-4 shadow focus:outline-none"
className="h-52 w-[500px] max-w-[100%] resize-none rounded-lg p-4 shadow focus:outline-none"
placeholder="Tell Us More"
value={answer}
onChange={handleInputAnswer}
Expand Down
44 changes: 24 additions & 20 deletions src/pages/survey/answer/[surveyId]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function SurveyResultsPage() {
} = useSurveyResultsManager();

const { items, canGoNext, canGoPrev, goNext, goPrev, pageIndex, reset } =
usePagination(filteredAnswersData);
usePagination(filteredAnswersData, { size: 10 });

const {
isModalOpen: isDeleteSurveyModalOpen,
Expand All @@ -57,7 +57,7 @@ function SurveyResultsPage() {

const toggleShowOnlyWithExtraFeedback = (isChecked: boolean) => {
setShowOnlyWithExtraFeedback(isChecked);

// reset the pagination
reset();
};
Expand Down Expand Up @@ -137,27 +137,31 @@ function SurveyResultsPage() {
))}
</div>
) : (
<div className="mt-4">No answers yet</div>
<div className="my-4">No answers yet</div>
)}
<div className="flex justify-center">
<div className="flex flex-row items-center">
<Button
variant={ButtonVariant.OUTLINE_PRIMARY}
icon={<ArrowLeftIcon className="h-5 w-5" />}
disabled={!canGoPrev}
onClick={goPrev}
/>
<div className="min-w-[100px]">
<p className="text-center">{pageIndex + 1}</p>
{(canGoNext || canGoPrev) && (
<div className="flex justify-center">
<div className="flex flex-row items-center">
<Button
variant={ButtonVariant.OUTLINE_PRIMARY}
className="px-4"
icon={<ArrowLeftIcon className="h-5 w-5" />}
disabled={!canGoPrev}
onClick={goPrev}
/>
<div className="min-w-[100px]">
<p className="text-center">{pageIndex + 1}</p>
</div>
<Button
variant={ButtonVariant.OUTLINE_PRIMARY}
className="px-4"
icon={<ArrowRightIcon className="h-5 w-5" />}
disabled={!canGoNext}
onClick={goNext}
/>
</div>
<Button
variant={ButtonVariant.OUTLINE_PRIMARY}
icon={<ArrowRightIcon className="h-5 w-5" />}
disabled={!canGoNext}
onClick={goNext}
/>
</div>
</div>
)}
</div>
)}
<DeleteSurveyModal
Expand Down
26 changes: 18 additions & 8 deletions src/pages/survey/create/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ import Input from 'shared/components/Input/Input';
import EmojiPicker from 'features/surveys/components/EmojiPicker/EmojiPicker';
import { useCreateSurveyManager } from 'features/surveys/managers/createSurveyManager';

const MIN_EMOJIS = 2;
const MAX_EMOJIS = 8;

function SurveyCreatePage() {
const {
title,
pack,
error,
allowAdd,
allowRemove,
handleChangeTitle,
handleEmotePick,
handleEmoteRemove,
Expand All @@ -31,7 +32,7 @@ function SurveyCreatePage() {
<div className="container m-auto px-4 text-center md:px-8">
<Header>Create new survey</Header>

<div className="mx-auto max-w-lg">
<div className="mx-auto max-w-xl">
<Input
label="Survey title"
placeholder="Title..."
Expand All @@ -46,19 +47,28 @@ function SurveyCreatePage() {
<div className="mb-3 block text-left font-semibold">
Click on icon to change
</div>
<div className="grid w-full grid-cols-4 items-start justify-items-center gap-y-4 max-[400px]:grid-cols-2">
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, 64px)',
justifyContent: 'space-between',
gridGap: '8px',
}}
>
{pack.map((emote, idx) => (
<EmojiPicker
key={idx}
index={idx}
defaultEmote={emote}
onEmotePick={handleEmotePick}
onEmoteRemove={allowRemove ? handleEmoteRemove : undefined}
onEmoteRemove={
pack.length > MIN_EMOJIS ? handleEmoteRemove : undefined
}
/>
))}
{allowAdd && (
{pack.length < MAX_EMOJIS && (
<EmojiPicker
addEmoji={allowAdd}
addEmoji={true}
onEmoteAdd={handleAddingNewEmote}
/>
)}
Expand All @@ -67,7 +77,7 @@ function SurveyCreatePage() {
<div className="flex justify-center">
<Button
onClick={createSurvey}
className="z-0 mt-6 w-full sm:w-auto"
className="z-0 mt-8 w-full sm:w-auto"
variant={ButtonVariant.PRIMARY}
isLoading={isCreating}
>
Expand Down

0 comments on commit 3925406

Please sign in to comment.