hellojags / skapp-ux-private Goto Github PK

Please clear all console warning /error

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of SubmitApp.
at Controller (http://localhost:3001/static/js/0.chunk.js:238971:5)
at div
at Styled(MuiBox) (http://localhost:3001/static/js/0.chunk.js:192236:28)
at div
at Styled(MuiBox) (http://localhost:3001/static/js/0.chunk.js:192236:28)
at div
at Styled(MuiBox) (http://localhost:3001/static/js/0.chunk.js:192236:28)
at form
at Styled(MuiBox) (http://localhost:3001/static/js/0.chunk.js:192236:28)
at div
at Styled(MuiBox) (http://localhost:3001/static/js/0.chunk.js:192236:28)
at SubmitApp (http://localhost:3001/static/js/main.chunk.js:19599:101)
at Route (http://localhost:3001/static/js/0.chunk.js:243441:29)
at Switch (http://localhost:3001/static/js/0.chunk.js:243643:29)
at main
at section
at div
at ThemeProvider (http://localhost:3001/static/js/0.chunk.js:191167:24)
at Router (http://localhost:3001/static/js/0.chunk.js:243076:30)
at BrowserRouter (http://localhost:3001/static/js/0.chunk.js:242696:35)
at Provider (http://localhost:3001/static/js/0.chunk.js:240096:20)
at App
console. @ index.js:1
..

there are few more warning in red

** Mandatory fields ***
Logo
AppName
Version
App Website URL
Category
App Description

On Submit, if all mandatory fields are not filled, It will highlight a message to fill all fields.

please check attached screenshot for mapping fields from app.json

Comments on App Details page

-- USER SHOULD BE ABLE TO ADD COMMENTS
-- IT SHOULD STORE AS JSON IN INDEXED DB. REFER attached "COMMENT.JSON" FORMAT

• KEY: APP_UUID
• VALUE: ARRAY OF COMMENT JSON [].
  IF USER ADD 3 COMMENTS , ARRAY WILL HAVE 3 JSON ENTRY

• on click of "app logo" , "app details page" must open in same app and not in new tab. (on click of "app name", behaviour is correct and no change required)
• on firsttime load, user dont have any app so this page should not display any app . Instead it should display this page https://skapp.netlify.app/noapp
• Card loading is not working as expected, its doesnt load fast enough on second load. It gets stuck
• On card logo needs to be displayed in color format shown in UX. Logo is in middle and should not cover full card. also card has background color. when in doubt, please compare with original code design @ https://skapp.netlify.app
• On click of "Select" button, Card should display "slect round radio" on right top corner. Please refer card in original code design @ https://skapp.netlify.app/apps
• sorting functionality is missing(please refer original requirement for sorting fields)
• "Search functionality" is missing. It should search field in all app JSON and display all cards that's matching search string.
• app category must display in dropdown along with count next to "category name" for each app in that category. Example: All(10), Social(5), Video(2), Games(1)...etc
• Tags needs to be displayed on card (placeholder: Add | Programs | utility)
• Use Install Button to display "App Category" (Make it non-clickable)
  [On AppCard]
• "View count" is showing default value. Ideally it should have initial value of 1. Every time user view "App Details page" count should go up
• currently there is no icon for "Access count". Can you add one Icon and show count against it? It will show default value of 0. Every time user click on "App Name(Link)" count should go up by 1
• "comments count" is showing default value. Ideally it should have initial value of 0. When comments are added it should display Total comments count.
• "Like(Star Icon)"" count is showing default value. Ideally it should have initial value of Zero. Every time user click on Like "App Details page" count should go up

Current output format:

{
"$type": "publishedSkapp",
"id": "SKAPP_ID",
"version": "1.0",
"ts": "1610328319",
"content": {
"skappLogo": {
"0": {}
},
"appname": "SkyApp",
"demoUrl": "https://skyapp.hns/demo",
"appUrl": "https://skyapp.hns",
"sourceCode": "https://github.com",
"images": {
"0": {},
"1": {},
"2": {}
},
"appDescription": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.",
"age": {
"value": "18",
"label": "18"
},
"category": [
{
"value": "social",
"label": "social"
}
],
"appStatus": [
{
"value": "Alpha",
"label": "Alpha"
}
]
},
"defaultPath": "index.html or EMPTY"
}

Expected output format

{
"$type": "skapp",
"$subType": "published", <-- new field, hard coded
"id": "SKAPP_ID - auto-generated uuid",
"version": "1",
"prevSkylink":"Leave it blank for now",
"content": {
"skappLogo": "[46 Character SKYLINK]", <- Skylink you will get from skynet api after you upload file.
"appname": "SkyFeed",
"demoUrl": "url or skylink",<- user Input
"age": "one of the selected value",
"appUrl": "skylink URL",<- user Input
"defaultPath": "index.html or EMPTY",<- user Input, text field (New)
"sourceCode": "git url",<- user Input,
"category": "one selected category",
"tags": [
"tag1",
"tag2"
],
"appStatus": [
"one of the selected value beta|alpha|live"
],
"previewImages": {
"aspectRatio": 0.5625, <-- hard coded
"images": [
{
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",<- Skylink of Thumnail of uploaded Image
"image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"<- Skylink of actual uploaded Image
},
{
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",
"image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"
},
{
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",
"image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"
},
{
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",
"image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"
}
]
},
"previewVideo": {
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",<- Skylink of Thumnail of uploaded video
"mp4+1080x1920": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"<- Skylink of actual uploaded video
},
"appDescription": "",<- app description
"releaseNotes": "",<- app release note - use field above "Detailed Description" for releaseNotes. ("Preview Images" label for text area was typo mistake)
"history": [
"list of skylinks"
], <-- leave it as empty array. I will take care of it.
"supportDetails": "", <- user Input, text area (New)
"connections": {
"twitter": "",
"email": "",
"discord": ""
}
},
"ts": 1610328319
}

This is applicable for all images / video uploaded on form .

****** ** Code for generating video thumbnail is provided at end**

Video Thumbnail

//Step 1 : Generate Thumbnail
const videoThumbnail = await generateThumbnailFromVideo({ file })
//Step 2 : upload actual video and thumbnail to skynet using methods provided by me earlier and get Skylinks(It will be two back to back for and You will get two skylink)
//Step 3 : Display thumbnail in SubmitForm " Video Card" preview (url: https://siasky.net/SKYLINK_1 <-- thumbnail skylink)
//Step 4 : on submit, save Skylink of thumbnail and actual video in JSON Field
"previewVideo": {
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",<- Skylink of Thumnail of uploaded video
"mp4+1080x1920": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"<- Skylink of actual uploaded video
},

Image Thumbnail

//Step 1 : Generate Thumbnail
const compressedImgFile = await getCompressedImageFile(file);
//Step 2 : upload actual Image and Thumbnail to skynet using methods provided by me earlier and get Skylinks(It will be two back to back call , 1 for image and 1 for thumnail)
//Step 3 : Display thumbnail in SubmitForm " Image Card" preview
//Step 4 : on submit, save Skylink of thumbnail and actual Image in JSON Field
"images": [
{
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",<- Skylink of Thumnail of uploaded Image
"image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"<- Skylink of actual uploaded Image
},
{
"thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",
"image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"
},

// ########################## Code for Image and Video Compression ########/
import imageCompression from "browser-image-compression"

/**

• Generates thumbnail image file out of the first frame of the video file.
• @param {Object} Object
• @param {string?} Object.url - The video source Url.
• @param {string?} Object.file - Optional video file object reference. If the Url s not provided,
• then this property must have a value. If the url does have a valu then this property will be ignored.
  */
  export const generateThumbnailFromVideo = async ({ file, url }) => {
  let videoResolve = null
  const videoPromise = new Promise((resolve) => {
  videoResolve = resolve
  })
  const video = document.createElement("video")
  video.crossOrigin = "anonymous"
  video.src = url || URL.createObjectURL(file)
  console.log("video.src", video.src)
  video.onloadeddata = videoResolve
  video.load()
  await videoPromise
  const videoThumbnail = await videoToImg(video)
  return videoThumbnail
  }
  export const videoToImg = async (video) => {
  const canvas = document.createElement("canvas")
  const w = video.videoWidth
  const h = video.videoHeight
  canvas.width = w
  canvas.height = h
  const ctx = canvas.getContext("2d")
  ctx.drawImage(video, 0, 0, w, h)
  const file = await imageCompression.canvasToFile(canvas, "image/jpeg")
  return file
  }

/**

• Compresses Image file params
• @param {File} originalFile Original File.
  */
  export const getCompressedImageFile = async (originalFile) =>
  await imageCompression(originalFile, {
  maxSizeMB: 1,
  maxWidthOrHeight: 256,
  useWebWorker: true,
  })

• After submitting form "Successful Message" needs to be display properly on form
• Javascript Alert is not required.
• Form should reset to blank on successful submit
• Looks like Form field layout is changed(Styles) and it doesnt look good on UI.Elements are over lapping. please compare with how it was showing originally.
  https://skapp.netlify.app/submitapp

Please share URL to view data, aso attached working screenshot here,

I am using below url and it didn't show data I entered

http://localhost:3000/appdetail/UUID <-- here I entered UUID I get in alert

Please display rotating circle on Image/Video card while file (Image/Video) upload is in progress.

Tag needs to work like the way category is working now. multiple tags can be added

if mandatory fields are not filled, On form submit please display message (in red) next to field name showing fields are mandatory.

Code Example:
https://codesandbox.io/s/react-hook-form-apply-validation-px4jp (Live demo)
https://react-hook-form.com/get-started#Applyvalidation

• logo Thumbnail is not displaying . Logo functionality needs to be same as PreviewImages functionality.
  You can change skapplogo JSON field to look like below
  "skappLogo": {
  "thumbnail": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg",
  "image": "sia://PAF7C6slOWpgCM9CTjrtuwA51yBgsLMOARI86gaoadFoHg"
  },

Show loaded on OnSUbmit action and loader should stop when JSON is saved successfully.

This will to avoid multiple submit on same form.

Currently submit action is working on only one submit button. there is submit button at the end of page as well.

• When I click on newly submitted app card, App details are not showing all field values mapped correctly on UI.
• Release notes is missing.
• "Desciption" field is two times. Can you change one description field to "release note" field
• Logo is not displaying. Currently its displaying default logo(Square boxes)
• also logo alignment(need right alignment) is not correct. please compare with https://skapp.netlify.app/appdetail.
• Tags are not mapped
• View count is showing default value. Ideally it should have initial value of 1. Every time user view "App Details page" count should go up
• currently there is no icon for "Access count". Can you add one Icon and show count against it? It will show default value of 0. Every time user click on "App Name(Link)" count should go up by 1
• comments count is showing default value. Ideally it should have initial value of 0. When comments are added it should display Total comments count.
• Like(Star Icon) count is showing default value. Ideally it should have initial value of Zero. Every time user click on Like "App Details page" count should go up