Project creation #718

yaya-mamoudou · 2023-07-06T16:51:00Z

Summary

Redesign of Project creation.

Closes #557

Changes

Created the form to add a new project
Built a custom-rich text editor
Validated the form
Modified the project details page

Screenshots

…rname is not entered as an email

…r a video link. Not both at the same time

…ate mode

…reation

… multiple prop is set and also add checkboxes when the withCheckbox property is set

tuxology · 2023-07-25T16:06:19Z

@kamthamc Requesting your code review. I am doing testing in parallel 🙏

chaitanya-cloudknox

Mostly it looks good to me.

I think some of the files missing translations
I would suggest to access colors through theme and few places the colors are not being consumed from colors object
Remove commented code and console logs
And some minor comments

zubhub_backend/zubhub/creators/serializers.py

chaitanya-cloudknox · 2023-07-25T17:27:30Z

zubhub_frontend/zubhub/.prettierrc.yaml

@@ -1,4 +1,4 @@
-printWidth: 80
+printWidth: 120


FYI The recommended width is 80

Cc @tuxology

zubhub_frontend/zubhub/src/App.js

chaitanya-cloudknox · 2023-07-25T17:32:05Z

zubhub_frontend/zubhub/src/assets/js/styles/components/button/buttonStyles.js

+    borderRadius: 30,
+    color: colors.primary,
+    '&:hover': {
+      backgroundColor: '#00B8C4',


Please use colors/theme colors

We will merge the "theme" work #712 a bit later and rebase it. So we can avoid this for now

chaitanya-cloudknox · 2023-07-25T17:33:44Z

zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js

@@ -122,6 +125,11 @@ const styles = theme => ({
    position: 'absolute!important',
    width: '1px',
  },
+  username: {
+    color: `${colors.white} !important`,


Try to avoid important flags, if not possible increase specificity.

zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx

zubhub_frontend/zubhub/src/components/Sidenav/sidenav.styles.js

chaitanya-cloudknox · 2023-07-26T00:54:05Z

zubhub_frontend/zubhub/src/components/form/dropdown/Dropdown.jsx

+  if (multiple && value) {
+    let valueTemp = [];
+    (Array.isArray(value) ? value : [{ name: value }]).forEach(
+      item => Object.keys(item).length > 0 && valueTemp.push(item),
+    );
+    value = valueTemp;
+  }


May be move it to memo?

chaitanya-cloudknox · 2023-07-26T00:55:32Z

zubhub_frontend/zubhub/src/components/form/imageInput/ImageInput.jsx

+  const handleFileChange = files => {
+    const maxAssets = 5;
+    if (files?.length > maxAssets || value?.length > maxAssets) {
+      alert('You can only select up to 7 files.');


missing translation?

chaitanya-cloudknox · 2023-07-26T00:57:33Z

zubhub_frontend/zubhub/src/components/form/tagsInput/tagsInput.styles.js

@@ -0,0 +1,45 @@
+import { colors } from "../../../assets/js/colors";


I would suggest to use colors through theme

tuxology · 2023-08-04T23:18:19Z

Hey @yaya-mamoudou Have been testing this PR and noticing a few minor issues only! So listing them here. Good work on this 🎉

tuxology · 2023-08-06T18:56:36Z

@yaya-mamoudou So we did a more thorough analysis on staging. Here are some blocker bugs, design and UX fixes that are needed. Most are quick and minor. We can't proceed with a merge unless those are resolved:

Text & Font changes

Design changes

Add more materials to the options for materials question. Refer Figma for remaining buttons. Change the spelling of “Masuring” to “Measuring”
Add the left and right arrows with carousel below the image thumbnails when lots of images are added while creating project. Currently they just reduce width and squeeze. Can you also increase the image thumbnails size? Refer to Faridah’s design to see the ratio of size.
Add a link button next to WhatsApp and Facebook in Congrats modal
Add keyword # in all keywords in hashtag modal. Refer to Faridah’s design. Eg. "+ #Clothing"
Remove the secondary blue navbar in preview page
In Project view, on Blue bar below project video - the clap and views show no count. Both in desktop and mobile mode, show the counts for clap and views. Views is not supposed to be clickable

Bugs

While editing a project, when you remove an uploaded video and instead try to add a link (e.g. a YouTube video link) and republish the project, the changes don’t get reflected on the project page. YouTube video doesn’t show up, the old video remains
When commenting on a project, JSON parse error shows up.
When you press clap and bookmark, it shows a JSON parse error message.
When you access a project in draft mode by clicking edit on it, the next button doesn’t work. It doesn’t take you to the next screen.
Video preview in the activity creation form should show in proper proportion (full width & height)
Once the project is created/saved as draft. After adding images, clicking next button, then previous button, adds lots of dummy images with wrong metadata. See screenshot below 👇

…o/zubhub into outreachy-yaya

…ubhub into project-creation

* Currently, the email gets displayed on the user profile. (#714) * Fixed issue with comment form submitting when empty * Add validation of username when creating new creator to make sure username is not entered as an email * Fixed issue with comment form submitting when empty * - * Wrap error string with translation method * Project creation (#718) * Fixed issue with comment form submitting when empty * Add validation of username when creating new creator to make sure username is not entered as an email * Fixed issue with comment form submitting when empty * - * Wrap error string with translation method * Create project creation form and navigation layouts * Fix form spacing and made banner fixed on mobile * modify videoInput component so the user can only add either a video or a video link. Not both at the same time * Create Rich text editor component * - * create project in steps and modified project details page * + * removed extra linear gradient on project details page * add method to display the right message based on current step and create mode * Add success dialog to project details page after successful project creation * bypass validation of image and video fields when publish mode is draft * Added modal * Create modal component * Add dialogs for step 3 for user to add tags * Add confetti to successfull project creation dialog * refactored the dropdown component to allow maximum selection when the multiple prop is set and also add checkboxes when the withCheckbox property is set * Add query to exclude a project in the list of projects of a creator * Add more projects to project details page * + * validate multiple categories * refactor sidenav * Add project mode selection page * + * Fix edit * + * Add correct links to sidenav and modified the styles of the associated pages * Fixes * Accept multiple categories in a project * refactor sidenav * Add project mode selection page * + * Fix edit * + * Add correct links to sidenav and modified the styles of the associated pages * Fixes * + * Update multiple categories * + * Add comments in project details * Add cat to draft and my projects empty page * unauthorized user navbar and categories new ui * remove publish without tags dialog when tags are available * Add preview page * + * Add link preview * Made preview project to render in a modal * Make landing page visible to non logged in users * Add old search bar * Fixes on profile * + * + * + * fix grid on other projects for non logged in users * Add create activity to sidenav for staff users * remove commented code and some clogs * fixes * update email regex * Text & Font & Design changes * Fix * input improvement --------- Co-authored-by: Yaya Mamoudou <57509871+yaya-mamoudou@users.noreply.github.com>

* Currently, the email gets displayed on the user profile. (unstructuredstudio#714) * Fixed issue with comment form submitting when empty * Add validation of username when creating new creator to make sure username is not entered as an email * Fixed issue with comment form submitting when empty * - * Wrap error string with translation method * Project creation (unstructuredstudio#718) * Fixed issue with comment form submitting when empty * Add validation of username when creating new creator to make sure username is not entered as an email * Fixed issue with comment form submitting when empty * - * Wrap error string with translation method * Create project creation form and navigation layouts * Fix form spacing and made banner fixed on mobile * modify videoInput component so the user can only add either a video or a video link. Not both at the same time * Create Rich text editor component * - * create project in steps and modified project details page * + * removed extra linear gradient on project details page * add method to display the right message based on current step and create mode * Add success dialog to project details page after successful project creation * bypass validation of image and video fields when publish mode is draft * Added modal * Create modal component * Add dialogs for step 3 for user to add tags * Add confetti to successfull project creation dialog * refactored the dropdown component to allow maximum selection when the multiple prop is set and also add checkboxes when the withCheckbox property is set * Add query to exclude a project in the list of projects of a creator * Add more projects to project details page * + * validate multiple categories * refactor sidenav * Add project mode selection page * + * Fix edit * + * Add correct links to sidenav and modified the styles of the associated pages * Fixes * Accept multiple categories in a project * refactor sidenav * Add project mode selection page * + * Fix edit * + * Add correct links to sidenav and modified the styles of the associated pages * Fixes * + * Update multiple categories * + * Add comments in project details * Add cat to draft and my projects empty page * unauthorized user navbar and categories new ui * remove publish without tags dialog when tags are available * Add preview page * + * Add link preview * Made preview project to render in a modal * Make landing page visible to non logged in users * Add old search bar * Fixes on profile * + * + * + * fix grid on other projects for non logged in users * Add create activity to sidenav for staff users * remove commented code and some clogs * fixes * update email regex * Text & Font & Design changes * Fix * input improvement --------- Co-authored-by: Yaya Mamoudou <57509871+yaya-mamoudou@users.noreply.github.com>

* minor changes * outline * landing page changes * some design changes * call for testing * Project creation overhaul and minor fix (#721) * Currently, the email gets displayed on the user profile. (#714) * Fixed issue with comment form submitting when empty * Add validation of username when creating new creator to make sure username is not entered as an email * Fixed issue with comment form submitting when empty * - * Wrap error string with translation method * Project creation (#718) * Fixed issue with comment form submitting when empty * Add validation of username when creating new creator to make sure username is not entered as an email * Fixed issue with comment form submitting when empty * - * Wrap error string with translation method * Create project creation form and navigation layouts * Fix form spacing and made banner fixed on mobile * modify videoInput component so the user can only add either a video or a video link. Not both at the same time * Create Rich text editor component * - * create project in steps and modified project details page * + * removed extra linear gradient on project details page * add method to display the right message based on current step and create mode * Add success dialog to project details page after successful project creation * bypass validation of image and video fields when publish mode is draft * Added modal * Create modal component * Add dialogs for step 3 for user to add tags * Add confetti to successfull project creation dialog * refactored the dropdown component to allow maximum selection when the multiple prop is set and also add checkboxes when the withCheckbox property is set * Add query to exclude a project in the list of projects of a creator * Add more projects to project details page * + * validate multiple categories * refactor sidenav * Add project mode selection page * + * Fix edit * + * Add correct links to sidenav and modified the styles of the associated pages * Fixes * Accept multiple categories in a project * refactor sidenav * Add project mode selection page * + * Fix edit * + * Add correct links to sidenav and modified the styles of the associated pages * Fixes * + * Update multiple categories * + * Add comments in project details * Add cat to draft and my projects empty page * unauthorized user navbar and categories new ui * remove publish without tags dialog when tags are available * Add preview page * + * Add link preview * Made preview project to render in a modal * Make landing page visible to non logged in users * Add old search bar * Fixes on profile * + * + * + * fix grid on other projects for non logged in users * Add create activity to sidenav for staff users * remove commented code and some clogs * fixes * update email regex * Text & Font & Design changes * Fix * input improvement --------- Co-authored-by: Yaya Mamoudou <57509871+yaya-mamoudou@users.noreply.github.com> * minor changess * outlinee * landing page changess * call for testingg * rebase * image and breadcrumb changes --------- Co-authored-by: Suchakra Sharma <suchakra@unstructured.studio> Co-authored-by: Yaya Mamoudou <57509871+yaya-mamoudou@users.noreply.github.com>

yaya-mamoudou added 13 commits March 21, 2023 19:38

Fixed issue with comment form submitting when empty

18b19b4

Add validation of username when creating new creator to make sure use…

092377c

…rname is not entered as an email

Fixed issue with comment form submitting when empty

ed8b162

Merge branch 'master' into outreachy-yaya-713

d15ebd7

-

d176262

Wrap error string with translation method

b848f81

Create project creation form and navigation layouts

0027311

Fix form spacing and made banner fixed on mobile

e70f62a

modify videoInput component so the user can only add either a video o…

44c3fdb

…r a video link. Not both at the same time

Create Rich text editor component

c632372

-

7b19899

create project in steps and modified project details page

d63be62

+

5a3b387

yaya-mamoudou added the feature label Jul 6, 2023

yaya-mamoudou self-assigned this Jul 6, 2023

yaya-mamoudou added 15 commits July 7, 2023 16:57

removed extra linear gradient on project details page

80481d3

add method to display the right message based on current step and cre…

8f00c2e

…ate mode

Add success dialog to project details page after successful project c…

78f25a8

…reation

bypass validation of image and video fields when publish mode is draft

9e8460b

Added modal

d560507

Create modal component

1402605

Add dialogs for step 3 for user to add tags

c2de630

Add confetti to successfull project creation dialog

7f8236d

refactored the dropdown component to allow maximum selection when the…

cb7bc42

… multiple prop is set and also add checkboxes when the withCheckbox property is set

Add query to exclude a project in the list of projects of a creator

0782e4f

Add more projects to project details page

1654bd4

+

b6d861a

validate multiple categories

5533093

refactor sidenav

6390d9f

Add project mode selection page

c007fea

yaya-mamoudou requested review from NdibeRaymond, tuxology and ajain1921 as code owners July 23, 2023 17:17

yaya-mamoudou added 3 commits July 23, 2023 18:41

+

b03ce81

+

dcd4fab

fix grid on other projects for non logged in users

bcd1f95

tuxology requested a review from kamthamc July 25, 2023 16:05

chaitanya-cloudknox reviewed Jul 26, 2023

View reviewed changes

yaya-mamoudou added 5 commits July 26, 2023 17:11

Add create activity to sidenav for staff users

c51d8e9

remove commented code and some clogs

154803e

fixes

4a3ab9a

update email regex

b8fa3cf

Merge branch 'outreachy-yaya' into project-creation

47badb6

yaya-mamoudou added 4 commits August 12, 2023 01:09

Text & Font & Design changes

00671c6

Merge branch 'outreachy-yaya' of https://github.com/unstructuredstudi…

890f98c

…o/zubhub into outreachy-yaya

Merge branch 'outreachy-yaya' into project-creation

cbd4312

Merge branch 'project-creation' of https://github.com/yaya-mamoudou/z…

dffc44a

…ubhub into project-creation

tuxology added the Outreachy label Aug 14, 2023

yaya-mamoudou added 2 commits August 16, 2023 15:43

Fix

d3634f9

input improvement

55998d0

tuxology merged commit 99c71a7 into unstructuredstudio:outreachy-yaya Aug 23, 2023

tuxology mentioned this pull request Aug 23, 2023

Project creation overhaul and minor fix #721

Merged

tuxology mentioned this pull request Sep 1, 2023

Added preview feature for uploaded images #696

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Project creation #718

Project creation #718

yaya-mamoudou commented Jul 6, 2023 •

edited

Loading

tuxology commented Jul 25, 2023

chaitanya-cloudknox left a comment

chaitanya-cloudknox Jul 25, 2023

chaitanya-cloudknox Jul 25, 2023

tuxology Aug 4, 2023

chaitanya-cloudknox Jul 25, 2023

chaitanya-cloudknox Jul 26, 2023

chaitanya-cloudknox Jul 26, 2023

chaitanya-cloudknox Jul 26, 2023

tuxology commented Aug 4, 2023

tuxology commented Aug 6, 2023 •

edited

Loading

		@@ -0,0 +1,45 @@
		import { colors } from "../../../assets/js/colors";

Project creation #718

Project creation #718

Conversation

yaya-mamoudou commented Jul 6, 2023 • edited Loading

Summary

Changes

Screenshots

tuxology commented Jul 25, 2023

chaitanya-cloudknox left a comment

Choose a reason for hiding this comment

chaitanya-cloudknox Jul 25, 2023

Choose a reason for hiding this comment

chaitanya-cloudknox Jul 25, 2023

Choose a reason for hiding this comment

tuxology Aug 4, 2023

Choose a reason for hiding this comment

chaitanya-cloudknox Jul 25, 2023

Choose a reason for hiding this comment

chaitanya-cloudknox Jul 26, 2023

Choose a reason for hiding this comment

chaitanya-cloudknox Jul 26, 2023

Choose a reason for hiding this comment

chaitanya-cloudknox Jul 26, 2023

Choose a reason for hiding this comment

tuxology commented Aug 4, 2023

tuxology commented Aug 6, 2023 • edited Loading

Text & Font changes

Design changes

Bugs

yaya-mamoudou commented Jul 6, 2023 •

edited

Loading

tuxology commented Aug 6, 2023 •

edited

Loading