I am trying to embed a Forge Viewer in a React Component. There is an example on the GitHub but it is not quite working for me. It seems there are some missing elements.
Is there a way we can get a step by step implementation of the viewer in React?
This is my only missing object at the moment. I have already fetched the model from a bucket, converted it into svf and fetched a urn to be passed to the viewer.
Any help out there, possibly without using redux?
You can create a component and a helper:
Helper: viewer-helper.js
import axios from 'axios'
/* global Autodesk, THREE */
const url_base = 'http://localhost:4000/'
// Get token from server
const getToken = async () => {
const {data} = await axios.get(url_base + 'forge/auth');
return data
}
export const initializeViewer = async (urn) => {
const token = await getToken()
const viewerOptions = {
env: 'AutodeskProduction',
accessToken: token,
api: 'derivativeV2',
};
var viewerContainer = document.getElementById('viewerContainer')
var viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerContainer, {})
Autodesk.Viewing.Initializer(viewerOptions, () => {
viewer.start();
Autodesk.Viewing.Document.load(`urn:${urn}`, (doc) =>{
var defaultModel = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, defaultModel);
})
})
}
Component:
import React,{useEffect} from 'react'
import {initializeViewer} from './viewer-helper'
const Viewer = () => {
const urn ='dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bWFsbGF2ZW50dXJhc2FuanVhbmRlbHVyaWdhbmNob19idWNrZXQvMTU3OTUyNjAwMzkwM19NYWxsJTIwQXZlbnR1cmElMjBTSkxfRXN0cnVjdHVyYXMucnZ0'
useEffect(() => {
initializeViewer(urn)
}, [])
return (
<div>
<div id='viewerContainer'></div>
</div>
)
}
export default Viewer
App.js
import React from 'react';
import './App.css';
import Viewer from './components/viewer/Viewer'
function App() {
return (
<div className="App">
<Viewer/>
</div>
);
}
export default App;
Please try React Forge Viewer Component:
https://www.npmjs.com/package/react-forge-viewer
Related
I am trying to read data from firebase using nextjs but I get back an empty page. Even when I console log, nothing gets returned. This is how my code looks like
import React, {useState} from 'react'
import { db } from '../firebase'
import { collection, getDocs } from "firebase/firestore";
const reference = collection(db, "students");
function Card(props) {
const { studentsData } = props
return (
<div>
<p>This is just a test</p>
{studentsData && studentsData.map(students => (
<p>{students.name}</p>
))}
</div>
)
}
export const getStaticProps = async () => {
const students = await getDocs(reference);
const studentsData = students.docs.map(doc => ({id: doc.id, ...doc.data() }))
console.log(studentsData);
return {
props: { studentsData }
}
}
export default Card
All I get back from this is just an empty page. Where could I be going wrong?.
I need to fetch all data from the collection but instead only getting one document. I will be grateful for you support. Below, I present the screenshots and code snippet regarding my concern.
enter image description here
enter image description here
import './App.css';
import db from './firebase';
import React,{useState,useEffect} from 'react';
function App() {
const [accounts,setAccounts]=useState([])
const fetchAccounts=async()=>{
const response=db.collection('accounts');
const data=await response.get();
data.docs.forEach(item=>{
setAccounts([...accounts,item.data()])
})
}
useEffect(() => {
fetchAccounts();
}, [])
return (
<div className="App">
{
accounts && accounts.map(account=>{
return(
<div>
<h1>Example</h1>
<h4>{account.date}</h4>
<p>{account.email}</p>
</div>
)
})
}
</div>
);
}
export default App;
Set state functions in React are async. It means that your values are not updated immediately.
So when you update your state in a loop, each time it updates the initial value of the state and because of that at the end of the loop, only 1 item is added to the array.
In order to fix the bug, you should use another variable and set your state after the loop:
import React, { useState, useEffect } from 'react';
import './App.css';
import db from './firebase';
function App() {
const [accounts, setAccounts] = useState([]);
const fetchAccounts = async () => {
const response = db.collection('accounts');
const data = await response.get();
const newAccounts = data.docs.map(item => item.data());
setAccounts(newAccounts);
}
useEffect(() => {
fetchAccounts();
}, [])
return (
<div className="App">
{
accounts && accounts.map(account => {
return(
<div>
<h1>Example</h1>
<h4>{account.date}</h4>
<p>{account.email}</p>
</div>
)
})
}
</div>
);
}
export default App;
I am trying to add dynamic data from one file to another and am having issues with that.
The data I am trying to load from
path: /src/components/Subnav.js
import React, { Component } from "react";
class Subnav extends Component {
static async getInitialProps(ctx) {
const res = await fetch("https://api.github.com/repos/vercel/next.js");
const json = await res.json();
return { stars: json.stargazers_count };
}
render() {
return <div>Next stars: {this.props.stars}</div>;
}
}
export default Subnav;
The code where I want the above data in
import React from "react";
import Subnav from "../src/components/Subnav";
function Page({ json }) {
return (
<subNav />
)
}
output in the browser
<div>Next stars: </div>
The expected output in the browser
<div>Next stars: 88542</div>
Issue:
As you can see above, I am just seeing the static text which is "Next stars" however, i am not seeing the data from the JSON
getInitialProps is data fetching method for page, it means you only can use it inside /pages folder. If you want fetching data for components, you can use useEffect.
import React, { useEffect, useState } from "react";
const Subnav = () => {
const [stars, setStars] = useState(null);
useEffect(() => {
const getStars = async () => {
const res = await fetch("https://api.github.com/repos/vercel/next.js");
const json = await res.json();
setStars(json.stargazers_count)
}
getStars();
}, [])
return <div>Next stars: {stars}</div>
}
export default Subnav;
Hello im going to get data from API using this https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
but I'm using Axios instead of default like doc, same as the doc passing data through the props, already implement this but instead return data its return 500 internal server which is it works when on the localhost.
this is my home.js
import axios from "axios";
import Featured from "../components/Featured";
import ProductList from "../components/ProductList";
import styles from "../styles/Home.module.css";
export default function Home({ productList }) {
return (
<div className={styles.container}>
<Featured />
<ProductList productList={productList} />
</div>
);
}
export const getServerSideProps = async () => {
const res = await axios.get(
"http://localhost:3000/api/products" ||
"https://marrs-id.vercel.app/api/products"
);
const data = await res.data;
return {
props: {
productList: data,
},
};
};
am I missing something here?
You might want to store your API path in a .env file at the root of your project. So it can be used everywhere in your app and easy to maintain ?
Also I guess you can use Fetch instead of Axios for this case, something like this :
export const getServerSideProps = async () => {
const productListRes = await fetch(
`${process.env.API_ROOT}/api/products`
);
const productList = await productListRes.json();
return {
props: {
productList,
},
};
};
I am requesting some basic info from the back end using axios but for some reason unable to render the data on screen. Below is my basic App component using hooks and a map function to return a surname
import React, { useState, useEffect } from 'react';
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from '#fullcalendar/interaction';
import { Router } from '#reach/router'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
import './custom.css'
const App = () => {
const [patients, setPatient] = useState([])
useEffect(() => {
axios.get('http://localhost:5000/api/patient').then(response => {
console.log(response.data)
setPatient(response.data)
})
}, [])
return (
<>
<div>
<ul>
{patients.map(p => (
<li>{p.surname}</li>
))}
</ul>
</div>
</>
)
}
export default App
When I check the dev tools I am bringing back all of data
I cannot see how my map function 'is not a function' can anyone help me out here please I get the below error message which is annoying
Try to use Async and Await for API call.
useEffect(function() {
async function fetchPatients() {
const response = await
fetch('http://localhost:5000/api/patient');
const json = await response.json();
setPatient(json.data);
}
fetchPatients();
}, []);
try this fixes:-
import React, { useState, useEffect } from 'react';
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from '#fullcalendar/interaction';
import { Router } from '#reach/router'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
import './custom.css'
const App = () => {
const [patients, setPatient] = useState([])
useEffect(() => {
(async () => {
try {
// fetching all patirnts
let res = await axios.get("http://localhost:5000/api/patient");
setPatient(res.data);
} catch (err) {
console.log(err);
}
})();
}, []);
return (
<>
<div>
<ul>
{patients?.map(p => (
<li>{p.surname}</li>
))}
</ul>
</div>
</>
)
}
export default App
A working code, for anyone who stupidly wastes too much time on this problem in the future. The data was nested meaning I had to setPatient to response.data.data. I was then able to pull all required info using Axios
useEffect(() => {
axios.get('http://localhost:5000/api/patient').then(response => {
setPatient(response.data.data)
})
}, [])