I display tons of components on my page. I have a feature that allows the user to type in the name of a component and then jump to that component via scrollIntoView, using the id. This currently works because I do have all my components rendered on the page (thus in the DOM).
Problem:
I'd like to use Apollos fetchMore helper, and only show 50 components at a time. But this will remove the other components from the DOM, so it seems my jumpToComponent() function will break: Say a user is on page 1 (components 1-50) and wants to jump to component no. 80.
Related
I am building a website and it has the following structure:
The root component is a component called Dashboard (It is what the App.jsx contains);
The Dashboard component/page contains two child components and therefore is divided into two parts:
the left part is called SideBar, or SideNav; It is a list of buttons with links such that users can click to go to the corresponding components / pages; And by "going to the corresponding components / pages", I mean that clicking these buttons on the SideBar decides what component gets rendered on the right part; The SideBar is always there and never changes, no matter what you do. The right part always changes (different components is rendered) depending on what you click on SideBar
the right part is the main content. Various components may be rendered. There is a NewOrder component where users can send new orders and upload large files; There is a ReceivedOrders component where users can see the orders they received; There is a Billings component ....
This is pretty standard Dashboard website. So far so good.
In the New Order component / page, I have implemented a file uploading mechanism where users can upload files (usually around 10 GB in size) to AWS S3 storage and send a POST request to create a new order.
Currently, when user drag and drop the files and start uploading / sending, a modal window will show up and display the upload progress and uploading speed; After the files are uploaded to the AWS S3 location, another POST request will be sent to my backend to create a new order with some business logic implemented;
However, it has 2 limitations:
it only allows one upload / send mission to execute at a time;
it takes long time to finish this process, and the user is stuck with the modal window - the user cannot do any other things while waiting for it to finish.
This is because if the user close the modal window and go to another page, say Received Orders or Billing, then the New Order component is dismounted from the DOM and all the props / states tracking the uploading / sending status and workflow is gone.
I want to achieve a new implementation such that
the user can kick start a second / third upload mission while waiting for the first to finish
And most importantly, the user can close the current modal window, go to other pages to do other things, and retrieve the modal that is tracking upload status whenever the user wants.
With the current frontend structure with a left part and a right part component under the main Dashboard component, I don't think this is possible.
I am thinking and researching for ideas on how this can be done, but so far I have not made much progress.
It however sounds like a standard frontend design pattern, but I just don't know the name.
Any ideas?
I'm relatively new to Vue, and I'm working on a portfolio site that is essentially structured like a blog with single/detail views for each project, i.e. SingleProject.vue and are linked using dynamic routes based on the slug name, i.e. path: "/projects/:project_name_slug". In the template, I'm using Axios to request JSON data from a CMS, and passing the data to a post variable via a fetchPosts() function. I'm then running this.fetchPosts() on the mounted life cycle hook. On this single project view, I also have links to the next and previous projects based on the order defined in the CMS. I'm saving JSON data to respective arrays for nextPost and prevPost and then creating router links using the post slug names as follows:
<router-link
v-if="nextPost"
:to="{path: '/projects/' + nextPost.project_name_slug}"
>Next Project</router-link>
Now to get to my actual question: these links for next/previous posts work fine; but when clicked, the view does not fully refresh/transition, and all the text data—title, sidebar info, etc.— changes rapidly, but the images lag a bit while they're downloaded (see diagram below for a visual.) So, for a moment, one will see an image from the previous project alongside text info for the next one, while the new image loads. This is a bit distracting/off-putting, so I'm trying to find a way to essentially reload the view (as if one were clicking to a different [static] route altogether) when clicking on one of these links to change the dynamic route. I found this helpful SO post, which suggests adding a changing key to <router-view> to trigger a full lifecycle whenever the path changes, i.e.
<router-view :key="$route.fullPath"></router-view>
This approach works, and indeed forces the whole SingleProject view (images and all) to refresh when changing routes via the next/previous links. However, I'm wondering if there is a better/more efficient way to limit this lifecycle refresh to just the dynamic (project view) routes? I realize, as noted in that thread, this approach could impact performance by forcing the recycle on all route changes, not just those related to single project views. Please let me know if this is unclear in any way- and thanks for any insight!
If you want to earn such kind of thing you can do it by putting all needed routes into a variable which is an Object. Then you can define some logics to switch between them and apply to a component and use it globally.
Ah, by the way, You can use a good tool called Vuepress. It has its own Previous and Next link buttons. You can say it is for documentation. No you can make blogs and portfolios too. There are so many projects created with Vuepress on the internet.
And even you can change layouts, styles or create your own theme from zero.
Below you can find link to many different projects and websites.
And most of them are ready themes to use in your projects.
https://github.com/topics/vuepress-theme
I have a parent component with three child components:
Navigation - Navigate Between Pages.
Pages - Loads pages using Route outlet(Employee, Department).
Save Components - Saving that form once validated.
The code looks like:
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-save></app-save>
So I want some way of communication between Pages (which loads dynamically when the route is called. It contains different types of forms) and Save.
So once user click "save" from save component it should go to loaded component(employee, department) function, checks whether form is valid or not if yes then save the form.
I looked at many examples online:
Communicate between sibling components Anguar 2 (This won't work as my sibling is loading dynamically).
https://angular.io/guide/component-interaction
Also, I thought of creating a service but not sure how to get the function from the loaded components.
Any suggestion?
I'm building a React app, using Foundation 6 for my UI. So far this has worked pretty well, but I'm now getting to where I'm changing the markup based on user events instead of just on page load, and the Foundation Plugins aren't working for newly rendered markup.
As a simple example, I've got a Login menu that renders as a Foundation Dropdown. Clicking on an entry in this will, once the user has logged in, cause this to be removed and a different menu to replace it - with the User Profile and the Logout links on it.
My initial attempt simply had $(document).foundation() called in the componentDidMount method of the top level UI. This worked great for everything rendered in the initial page load, but doesn't pick up anything rendered later on.
I've just tried replacing this with a MutationObserver, and again this works perfectly for anything rendered in the initial page load, but when the menu changes I instead get: "Tried to initialize dropdown-menu on an element that already has a Foundation plugin" - despite this being rendered inside a different React Component.
Is there a correct way to get this to work?
Assume I have a shiny new React component for rendering markdown and ye old legacy static HTML form, where user types text into textarea
Now I want to enhance this form a little: I want to display my React component alongside and render markdown as user types.
So, basically, I need to set component's props from HTML.
Next thing
Assume I have a React component that displays set of pics and lets user to click and mark one as active. It draws a fancy blue border around the active image and everyone are happy.
Now I have ye old HTML form and I want to send selected picture's id to my server.
So, basically, I need to read component's props (or state) and put it in the hidden field of the form
How do I achieve this? I also might have multiple separate components on my page