问:
Chrome Extension manifest v3: how to inject react app with isolated antd styles?
I have a chrome extension, which was working fine during manifest v2. It is a react app using antd styles. I am trying to migrate it to manifest v3 but when antd styles are added to app, since I am injecting the app in websites DOM, the styles gets applied to everything in the websites aswell.

I have tried isolating the same with the help of react-frame-component, but haven't been able to compile antd styles to a single file which I can add in content-scripts in order to be accessible by the frame component.

I am trying with webpack configuration but I am not very well versed with customised compilation and tried with vite aswell, since they have some support for chrome extension through crxjs, but haven't found any example with antd compilation.

If anyone might have any resource to refer to, then it would be very helpful.

I tried customised webpack and vite config, in order to compile all antd styles to a single file, so that I can add that file in the content-scripts which makes it eligible for extension to request. Manifest v3 doesn't allow calling 3rd party sites, otherwise I could have used CDN links to antd styles.


来源: stackexchange

问:
MySQL "Commands out of sync; you can't run this command now"
I have the following two queries that execute one after another and work fine (I can't use on duplicate key update and hence please ignore that in this discussion as I like to understand why the following behavior happens)

```<code>delete from mytable where id=1
insert into mytable set id=1, x=2, y=3, ts=unix_timestamp()
</code>```

I then tried to execute these queries in one shot by using semicolons and issuing query like

```<code>delete from mytable where id=1;insert into mytable set id=1, x=2, y=3, ts=unix_timestamp()
</code>```

This also works fine. However, I start getting  "Commands out of sync; you can't run this command now" in any queries issued after the above query.

I looked at the MySQL manual and it only explains in terms of results. https://dev.mysql.com/doc/refman/8.0/en/commands-out-of-sync.html

However, the above queries are for deleting and inserting records and have no result so the above explanation is not helpful.

Any idea what am I doing wrong?

Below is the table schema

```<code>CREATE TABLE IF NOT EXISTS mytable (
  x int(10) unsigned default '0',
  id int(10) unsigned default '0',
  y int(20) unsigned default '0',
  ts int(10) unsigned default '0',
  unique KEY (id),
  unique KEY (x, y),
  KEY (x)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
</code>```

ContentLicense: CC BY-SA 4.0

Body:
I have the following two queries that execute one after another and work fine (I can't use on duplicate key update and hence please ignore that in this discussion as I like to understand why the following behavior happens)

delete from mytable where id=1
insert into mytable set id=1, x=2, y=3, ts=unix_timestamp()

I then tried to execute these queries in one shot by using semicolons and issuing query like

delete from mytable where id=1;insert into mytable set id=1, x=2, y=3, ts=unix_timestamp()

This also works fine. However, I start getting  "Commands out of sync; you can't run this command now" in any queries issued after the above query.

I looked at the MySQL manual and it only explains in terms of results. https://dev.mysql.com/doc/refman/8.0/en/commands-out-of-sync.html

However, the above queries are for deleting and inserting records and have no result so the above explanation is not helpful.

Any idea what am I doing wrong?

Below is the table schema

CREATE TABLE IF NOT EXISTS mytable (
  x int(10) unsigned default '0',
  id int(10) unsigned default '0',
  y int(20) unsigned default '0',
  ts int(10) unsigned default '0',
  unique KEY (id),
  unique KEY (x, y),
  KEY (x)
) ENGINE=InnoDB DEFAULT CHARSET=utf8


问:
The incorporation of coordinates into my AMPL file
I'm working on an AMPL model with Cplex as a solver, and I'd like to add X and Y coordinates to my nodes. Is this possible? Is it possible to link an AMPL file to X,Y coordinates from Google Maps?

Thank you in advance for any assistance


问:
how to install different ionic version in different node using nvm
I am using multiple versions of node using nvm to develop my ionic projects. I started with ionic 3 so by default my system installs ionic 3 in every version.Now I want to install the latest ionic cli but cannot do it. I tried the uninstall command to remove ionic 3 but no matter what I try I am not able to remove the ionic 3 from one of my nvm. Please help me to remove it without affecting the other version.</p>


问:
How to enable CORS in Nginx proxy server to allow react app access Yii2 rest API resource?
I'm building a react app which access api running on nginx server, in dev mode on local host i enable proxy by adding api server url to the proxy option in package.json file in react and everything works fine, now I move to production mode and I have an error resulting from CORS after making some research I came up with the following:

nginx conf file for my target API server:

```<code>server {
     set $project_root /var/www/html/example.com;
     set $root /usr/share/nginx/html;
     charset utf-8;
     client_max_body_size 128M;
     server_name api.example.com;
     #access_log /data/wwwlogs/access_nginx.log combined;
     root $project_root/api/web;
     index index.html index.htm index.php;
     #error_page 404 /404.html;
     #error_page 502 /502..html;
     error_page 503 /api_maintenance_on.html;

    location = /api_maintenance_on.html {
        root $root/;
    }

    add_header 'Access-Control-Allow-Origin' 'https://example.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

     location / {

        if (-f $root/api_maintenance_on.html) {
            return 503;
        }
         rewrite ^/(.*)$ /index.php?$args&request_filename=$1 last;
         try_files $uri $uri/ @rewrite;

        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Max-Age' 86400;
          add_header 'Content-Type' 'text/plain charset=UTF-8';
          add_header 'Content-Length' 0;
          return 204;
        }

        proxy_redirect off;
        proxy_set_header host $host;
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
        proxy_pass https://example.com;
     }

}
</code>```

after adding the above to my conf file the below URL start working without error:

```<code>https://api.example.com/v1/helpers/get-currency-rate?=$
</code>```

But other URL still not working still showing below error:

```<code>Access to XMLHttpRequest at 'https://api.example.com/v1/auth/login' from origin 'https://example.com' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
</code>```

I use axios to make remote API call and below is my axios configuration:

```<code>import axios from 'axios';
const BASE_URL = 'https://api.example.com';

export default axios.create({
    baseURL: BASE_URL,
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
});

export const axiosPrivate = axios.create({
    baseURL: BASE_URL,
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
});
</code>```

Below is also my PHP script using YII2 rest controller

```<code>class HelpersController extends \yii\rest\ActiveController
{
    public $modelClass = '';

    public function behaviors() {
        $behaviors = parent::behaviors();

        $behaviors['authenticator'] = [
            'class' => \sizeg\jwt\JwtHttpBearerAuth::class,
            'except' => [
                'get-currency-rate',
            ],
        ];

        return $behaviors;
    }

    public function actionGetCurrencyRate($currency){

          $selectedCurrency = empty($currency) || !isset($currency) || $currency == "" ? "₦" :
          $currency;
        return ['currency' =>$cur, 'rate'=> $rate];
    }

}

class AuthController extends \yii\rest\ActiveController
{
    public $modelClass = 'api\modules\v1\models\UserRefreshToken';

    public function behaviors() {
    $behaviors = parent::behaviors();

        $behaviors['authenticator'] = [
            'class' => \sizeg\jwt\JwtHttpBearerAuth::class,
            'except' => [
                'login',
                'options',
            ],
        ];

        return $behaviors;
    }

     public function actionLogin() {
        $model = new LoginForm();
        $custom = new Custom();

        return $message;
    }

}
</code>```

Before I made changes to my nginx server config both controller were not accessible throwing CORS error but after making the above changes to my server congif file Helpers Controllers was accessible without CORS error but Auth controller still throw CORs error

How do I solve this problem or where exactly the problem is coming from?

Body:
I'm building a react app which access api running on nginx server, in dev mode on local host i enable proxy by adding api server url to the proxy option in package.json file in react and everything works fine, now I move to production mode and I have an error resulting from CORS after making some research I came up with the following:

nginx conf file for my target API server:

server {
     set $project_root /var/www/html/example.com;
     set $root /usr/share/nginx/html;
     charset utf-8;
     client_max_body_size 128M;
     server_name api.example.com;
     #access_log /data/wwwlogs/access_nginx.log combined;
     root $project_root/api/web;
     index index.html index.htm index.php;
     #error_page 404 /404.html;
     #error_page 502 /502..html;
     error_page 503 /api_maintenance_on.html;

    location = /api_maintenance_on.html {
        root $root/;
    }

    add_header 'Access-Control-Allow-Origin' 'https://example.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

     location / {

        if (-f $root/api_maintenance_on.html) {
            return 503;
        }
         rewrite ^/(.*)$ /index.php?$args&request_filename=$1 last;
         try_files $uri $uri/ @rewrite;

        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Max-Age' 86400;
          add_header 'Content-Type' 'text/plain charset=UTF-8';
          add_header 'Content-Length' 0;
          return 204;
        }

        proxy_redirect off;
        proxy_set_header host $host;
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
        proxy_pass https://example.com;
     }

}

after adding the above to my conf file the below URL start working without error:

https://api.example.com/v1/helpers/get-currency-rate?=$

But other URL still not working still showing below error:

Access to XMLHttpRequest at 'https://api.example.com/v1/auth/login' from origin 'https://example.com' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I use axios to make remote API call and below is my axios configuration:

import axios from 'axios';
const BASE_URL = 'https://api.example.com';

export default axios.create({
    baseURL: BASE_URL,
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
});

export const axiosPrivate = axios.create({
    baseURL: BASE_URL,
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
});

Below is also my PHP script using YII2 rest controller

class HelpersController extends \yii\rest\ActiveController
{
    public $modelClass = '';

    public function behaviors() {
        $behaviors = parent::behaviors();

        $behaviors['authenticator'] = [
            'class' => \sizeg\jwt\JwtHttpBearerAuth::class,
            'except' => [
                'get-currency-rate',
            ],
        ];

        return $behaviors;
    }

    public function actionGetCurrencyRate($currency){

          $selectedCurrency = empty($currency) || !isset($currency) || $currency == "" ? "₦" :
          $currency;
        return ['currency' =>$cur, 'rate'=> $rate];
    }

}

class AuthController extends \yii\rest\ActiveController
{
    public $modelClass = 'api\modules\v1\models\UserRefreshToken';

    public function behaviors() {
    $behaviors = parent::behaviors();

        $behaviors['authenticator'] = [
            'class' => \sizeg\jwt\JwtHttpBearerAuth::class,
            'except' => [
                'login',
                'options',
            ],
        ];

        return $behaviors;
    }

     public function actionLogin() {
        $model = new LoginForm();
        $custom = new Custom();

        return $message;
    }

}

Before I made changes to my nginx server config both controller were not accessible throwing CORS error but after making the above changes to my server congif file Helpers Controllers was accessible without CORS error but Auth controller still throw CORs error

How do I solve this problem or where exactly the problem is coming from?


问:
Is it possible to get an object's key name in the value, when declaring it (object literal)?
I was trying to create an object, where it would be nice (and save me some typing and duplication), if I could reference the value's key name inside the declaration, e.g. something like below:

```<code>const object = {
  "keyNameA": doSomething(`${this values' key name}`), //i.e. doSomething("keyNameA")
  "keyNameB": doSomething(`${this values' key name}`)  //i.e. doSomething("keyNameB")
}
</code>```

Question is:
Is that something that can be achieved in JS with an object literal declaration?

Thank you in advance!

(I know that with a constructor function you can probably achieve the above, this is mainly about the question, if it is possible via object literal as well, somehow)

Body:
I was trying to create an object, where it would be nice (and save me some typing and duplication), if I could reference the value's key name inside the declaration, e.g. something like below:

const object = {
  "keyNameA": doSomething(`${this values' key name}`), //i.e. doSomething("keyNameA")
  "keyNameB": doSomething(`${this values' key name}`)  //i.e. doSomething("keyNameB")
}

Question is:
Is that something that can be achieved in JS with an object literal declaration?

Thank you in advance!

(I know that with a constructor function you can probably achieve the above, this is mainly about the question, if it is possible via object literal as well, somehow)


问:
How can I read and change a string and save in Microsoft Word using OpenXmlPowerTools
I'm using OpenXmlPowerTools to merge several report template Microsoft Word.

```<code>    var sources = new List<Source>();
    foreach (var fileName in fileName_List)
    {
         using (FileStream stream = System.IO.File.Open(filename, FileMode.Open))
         {
            var memoryStream= new MemoryStream();
            stream.CopyTo(memoryStream);
            sources.Add(new Source(new WmlDocument("", memoryStream), true));
         }
    }
    var mergedDoc = DocumentBuilder.BuildDocument(sources);
    mergedDoc.SaveAs(resultFile);
</code>```

in this case, all the files will be merged well without any problem.
But I need to make some changes on each file before they merge.
I used the below code :

```<code>
foreach (var filename in fileName_List)
{
    using (WordprocessingDocument wordDoc = WordprocessingDocument.Open(filename, true))
    using (StreamReader sr = new StreamReader(wordDoc.MainDocumentPart.GetStream()))
    {
        var docText = sr.ReadToEnd();
        docText = docText.Replace("PlaceHolder", "NewValue");
        using (var memoryStream= GenerateStreamFromString(docText))
        {
            sources.Add(new Source(new WmlDocument("", memoryStream), true));
        }
    }
}
public static MemoryStream GenerateStreamFromString(string s)
{
    var stream = new MemoryStream();
    var writer = new StreamWriter(stream);
    writer.Write(s);
    writer.Flush();
    stream.Position = 0;
    return stream;
}
</code>```

This time I get the following error when mergedDoc.SaveAs(resultFile) called :

```<code>File contains corrupted data
</code>```

Also, I used the below code instead of the GenerateStreamFromString method and again get the same error:

```<code>   var docText = sr.ReadToEnd();
   docText = docText.Replace("PlaceHolder", "NewValue");
   byte[] bytes = Encoding.ASCII.GetBytes(docText);
   sources.Add(new Source(new WmlDocument("", bytes), true));
</code>```

Body:
I'm using OpenXmlPowerTools to merge several report template Microsoft Word.

    var sources = new List<Source>();
    foreach (var fileName in fileName_List)
    {
         using (FileStream stream = System.IO.File.Open(filename, FileMode.Open))
         {
            var memoryStream= new MemoryStream();
            stream.CopyTo(memoryStream);
            sources.Add(new Source(new WmlDocument("", memoryStream), true));
         }
    }
    var mergedDoc = DocumentBuilder.BuildDocument(sources);
    mergedDoc.SaveAs(resultFile);

in this case, all the files will be merged well without any problem.
But I need to make some changes on each file before they merge.
I used the below code :

foreach (var filename in fileName_List)
{
    using (WordprocessingDocument wordDoc = WordprocessingDocument.Open(filename, true))
    using (StreamReader sr = new StreamReader(wordDoc.MainDocumentPart.GetStream()))
    {
        var docText = sr.ReadToEnd();
        docText = docText.Replace("PlaceHolder", "NewValue");
        using (var memoryStream= GenerateStreamFromString(docText))
        {
            sources.Add(new Source(new WmlDocument("", memoryStream), true));
        }
    }
}
public static MemoryStream GenerateStreamFromString(string s)
{
    var stream = new MemoryStream();
    var writer = new StreamWriter(stream);
    writer.Write(s);
    writer.Flush();
    stream.Position = 0;
    return stream;
}

This time I get the following error when mergedDoc.SaveAs(resultFile) called :

File contains corrupted data

Also, I used the below code instead of the GenerateStreamFromString method and again get the same error:

   var docText = sr.ReadToEnd();
   docText = docText.Replace("PlaceHolder", "NewValue");
   byte[] bytes = Encoding.ASCII.GetBytes(docText);
   sources.Add(new Source(new WmlDocument("", bytes), true));


问:
DB2 select JSON_ARRAYAGG
Using of JSON_ARRAYAGG does not working for me

```<code>1) [Code: -104, SQL State: 42601]  An unexpected token "ORDER" was found following "CITY)
".  Expected tokens may include:  ")".. SQLCODE=-104, SQLSTATE=42601, DRIVER=4.28.11
2) [Code: -727, SQL State: 56098]  An error occurred during implicit system action type "2". Information returned for the error includes SQLCODE "-104", SQLSTATE "42601" and message tokens "ORDER|CITY)
|)".. SQLCODE=-727, SQLSTATE=56098, DRIVER=4.28.11
</code>```

I want an output like this

```<code>{"id":901, "name": "Hansi", "addresses" :
 [
   { "address":"A", "city":"B"},
   { "address":"C", "city":"D"}
  ]
}
</code>```

I am using IBM DB2 11.1 for Linux, UNIX and Windows.

```<code>  values (
    json_array(
    select json_object ('ID' value ID,
                        'NAME' value NAME,
       'ADDRESSES' VALUE JSON_ARRAYAGG(
                                  JSON_OBJECT('ADDRESS' VALUE ADDRESS,
                                  'CITY' VALUE CITY)
                                  ORDER BY ADDRESS)
     )
    FROM CUSTOMER
    JOIN CUSTOMER_ADDRESS ON ADDRESS_CUSTOMER_ID = ID
    GROUP BY ID, NAME
    FORMAT JSON
    ));
</code>```

Used tables are:

```<code>CUSTOMER - ID (INT), NAME (VARCHAR64)
ADDRESS - ADDRESS (VARCHAR64), CITY (VARCHAR64)
</code>```

Title: DB2 select JSON_ARRAYAGG

Body:
Using of JSON_ARRAYAGG does not working for me

1) [Code: -104, SQL State: 42601]  An unexpected token "ORDER" was found following "CITY)
".  Expected tokens may include:  ")".. SQLCODE=-104, SQLSTATE=42601, DRIVER=4.28.11
2) [Code: -727, SQL State: 56098]  An error occurred during implicit system action type "2". Information returned for the error includes SQLCODE "-104", SQLSTATE "42601" and message tokens "ORDER|CITY)
|)".. SQLCODE=-727, SQLSTATE=56098, DRIVER=4.28.11

I want an output like this

{"id":901, "name": "Hansi", "addresses" :
 [
   { "address":"A", "city":"B"},
   { "address":"C", "city":"D"}
  ]
}

I am using IBM DB2 11.1 for Linux, UNIX and Windows.

  values (
    json_array(
    select json_object ('ID' value ID,
                        'NAME' value NAME,
       'ADDRESSES' VALUE JSON_ARRAYAGG(
                                  JSON_OBJECT('ADDRESS' VALUE ADDRESS,
                                  'CITY' VALUE CITY)
                                  ORDER BY ADDRESS)
     )
    FROM CUSTOMER
    JOIN CUSTOMER_ADDRESS ON ADDRESS_CUSTOMER_ID = ID
    GROUP BY ID, NAME
    FORMAT JSON
    ));

Used tables are:

CUSTOMER - ID (INT), NAME (VARCHAR64)
ADDRESS - ADDRESS (VARCHAR64), CITY (VARCHAR64)


问:
AWS athena, can we write query results in distributed manner upon query?
I'm trying to compare performance of SELECT Vs. CTAS.

The reason CTAS is faster for bigger data is b.c. data format and its ability to write query results in distributed manner into multiple parquet files.

All athena queries are written to S3 then read from there (I may be wrong), is there way to distributed writing query result of regular select into single file? So without bucketing nor partioning.


问:
can we count how many times did a single polyline is crossing across the single polygon in python code
can we count how many times did a single polyline is crossing across a single polygon in python code?

I have tried it and found that this can be done in Arcgis software. But i want to do this in DataBricks-Python Code


问:
Write Spss with Python with value labels and Data labels
i have tried this code but it results in vanishing spss value and data labels.

pyreadstat.write_sav(df)

If there is another way to write spss file without lossing value labels and data labels. Kindly let me know.

Also tried below mentioned code But unable to access file location. In my case i have to do work on spss file in python and write it back in spss for the users.
Can anyone guide how to write spss file in python without losing labels and value labels please?

```<code>Code:

from pyreadstat import write_sav

class TempFile(type(pathlib.Path())):  # type: ignore
    def __exit__(self, exc_type, exc_val, exc_tb):
        filepath = str(self.absolute())
        try:
            os.remove(filepath)
        except OSError:
            logger.exception('romve temporary file: %s failed!', filepath)
        self._closed = True

class SpssTool:
    @classmethod
    def to_spss(cls, df: DataFrame, io: BytesIO, metadata: metadata_container, *, compress: bool = False):
        """Writes a pandas dataframe to a BytesIO object.

        Parameters
        ----------
        df : pandas.DataFrame
            pandas data frame to write to sav or zsav
        io : BytesIO
            the buffer to save spss file
        metadata: metadata_container
            spss file meta data container
        compress : bool
            whether compress to zsav.
        """

        df.columns = SpssTool.get_legal_column_names(df.columns.to_list())

        with TempFile(f'/tmp/{uuid4().hex}.{"zsav" if compress else "sav"}') as fp:
            write_sav(
                df=df,
                dst_path=fp,
                column_labels=metadata.column_labels if metadata else None,
                variable_value_labels=dict(metadata.variable_value_labels) if metadata else {},
                variable_measure=metadata.variable_measure if metadata else None,
            )
            io.write(fp.read_bytes())

</code>```

Body:
i have tried this code but it results in vanishing spss value and data labels.

pyreadstat.write_sav(df)

If there is another way to write spss file without lossing value labels and data labels. Kindly let me know.

Also tried below mentioned code But unable to access file location. In my case i have to do work on spss file in python and write it back in spss for the users.
Can anyone guide how to write spss file in python without losing labels and value labels please?

Code:

from pyreadstat import write_sav

class TempFile(type(pathlib.Path())):  # type: ignore
    def __exit__(self, exc_type, exc_val, exc_tb):
        filepath = str(self.absolute())
        try:
            os.remove(filepath)
        except OSError:
            logger.exception('romve temporary file: %s failed!', filepath)
        self._closed = True

class SpssTool:
    @classmethod
    def to_spss(cls, df: DataFrame, io: BytesIO, metadata: metadata_container, *, compress: bool = False):
        """Writes a pandas dataframe to a BytesIO object.

        Parameters
        ----------
        df : pandas.DataFrame
            pandas data frame to write to sav or zsav
        io : BytesIO
            the buffer to save spss file
        metadata: metadata_container
            spss file meta data container
        compress : bool
            whether compress to zsav.
        """

        df.columns = SpssTool.get_legal_column_names(df.columns.to_list())

        with TempFile(f'/tmp/{uuid4().hex}.{"zsav" if compress else "sav"}') as fp:
            write_sav(
                df=df,
                dst_path=fp,
                column_labels=metadata.column_labels if metadata else None,
                variable_value_labels=dict(metadata.variable_value_labels) if metadata else {},
                variable_measure=metadata.variable_measure if metadata else None,
            )
            io.write(fp.read_bytes())


问:
.obj files not sending xhr post
I have a jquery code where I send files with xhr post, this code works fine for other files but for files with ".obj" extension it doesn't send any value in post (it doesn't send test data independent of the file either)

When I print the file value to the console, I can see that it is written correctly

Code;

```<code>var form = new FormData();
form.append("file", file);
form.append("test", "test");

var xhr = new XMLHttpRequest();
xhr.open("POST", "desk.php", true);
xhr.onload = function ()
{
    if (xhr.status == 200)
    {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }

};
xhr.send(form);
</code>```

Title: .obj files not sending xhr post

Body:
I have a jquery code where I send files with xhr post, this code works fine for other files but for files with ".obj" extension it doesn't send any value in post (it doesn't send test data independent of the file either)

When I print the file value to the console, I can see that it is written correctly

Code;

var form = new FormData();
form.append("file", file);
form.append("test", "test");

var xhr = new XMLHttpRequest();
xhr.open("POST", "desk.php", true);
xhr.onload = function ()
{
    if (xhr.status == 200)
    {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }

};
xhr.send(form);


问:
How make a emmeans plot with interaction and many factors
I would like to make a emmeans plot taking all behaviour variable into account, which are columns, related to two other columns. The behaviour variables were create based on scale, from 1 to 10.

colA (numeric) | col B --------- to -------- J (factor) | col H (2 ordinal/factors)

I have made some clmm models on each behaviour variable in interaction with colA, and I don't know if I have to take all models to make emmeans plot or if I can just take the basic data of my dataset ?
Then, I would like to have in x-axis the scale of behaviour variable and in y-axis all the behaviour variables group by colH. I tried this but obviously it doesn't work..

```<code>Beh <- as.matrix(mydata[,c(6:33)]) #select all behaviour variables
Pers.emmeans <- emmeans(mydata,colA~Beh, by= colH)
plot(Pers.emmeans, comparison = TRUE) +theme_bw()
</code>```

I also tried to check on internet how I can manage this but nothing about code
Please any ideas ?

Body:
I would like to make a emmeans plot taking all behaviour variable into account, which are columns, related to two other columns. The behaviour variables were create based on scale, from 1 to 10.

colA (numeric) | col B --------- to -------- J (factor) | col H (2 ordinal/factors)

I have made some clmm models on each behaviour variable in interaction with colA, and I don't know if I have to take all models to make emmeans plot or if I can just take the basic data of my dataset ?
Then, I would like to have in x-axis the scale of behaviour variable and in y-axis all the behaviour variables group by colH. I tried this but obviously it doesn't work..

Beh <- as.matrix(mydata[,c(6:33)]) #select all behaviour variables
Pers.emmeans <- emmeans(mydata,colA~Beh, by= colH)
plot(Pers.emmeans, comparison = TRUE) +theme_bw()

I also tried to check on internet how I can manage this but nothing about code
Please any ideas ?


问:
Vue router-link doesn't take the page to the layout containing the desired RouterView
I am using vue router and when I use router-link it is not putting my page in the desired  position

I'm using a Vite plugin with vue-router in vue 3 to navigate my cms page, but when I set the to="/detail" attribute, they still show all the components, but on this test page I want to set it is a child page with detail properties with id of previous so in parent page i used **<RouterLink
:to="{ name: 'DetailTemplate', params: { id: record._id } }"

See Detail** but when it jumps to the detail page, it no longer has the 2 Nava components above and the menu list on the right
Here is the code in rourouter.js:

import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter, createWebHistory } from 'vue-router'
import routes from '~pages'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...setupLayouts(routes),
  {
    path: '/detail/:id', name: 'DetailTemplate', component: () => import('../pages/test.vue')
 }
  ],
  scrollBehavior() {
    return { top: 0 }
  },
})
export default router

```
<p>And I have a default layout page that looks like this:
<strong>component/defaulLayout.vue</strong></p>
<pre class="lang-js prettyprint-override"><code><script lang="ts" setup>
import { VerticalNavLayout } from '@layouts'
import DrawerContent from './DrawerContent.vue'
// Components
import Footer from '@/layouts/components/Footer.vue'
</script>

<template>
  <VerticalNavLayout>
    <!--  navbar -->
    <template #navbar>
      <VSpacer />
      <a
        href="https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free"
        target="_blank"
        rel="noopener noreferrer"
        style="color: inherit"
      >
      </a>
    </template>
    <!--  Drawer content -->
    <template #navigation-drawer-content>
      <DrawerContent />
    </template>
    <!--  Pages -->
    <div class="layout-page-content">
      <RouterView />
    </div>

    <!--  Footer -->
    <template #footer>
      <Footer />
    </template>
  </VerticalNavLayout>
</template>
</code>```

This is the parent page containing the overview information
pages/templates.vue

<template>

      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'title'">

          <RouterLink tag="a" :to="{ name: 'DetailTemplate', params: { id: record._id } }">{{ text }} See Detail</RouterLink> /<---/
        </template>
        <template v-if="column.dataIndex === 'fullname'">
          {{ text }}
        </template>
        <template v-if="column.dataIndex === 'address'">
          {{ record.address }}
        </template>
      </template>

...
<template>
```
<p>And here is the <strong>App.vue</strong> page</p>
<pre class="lang-js prettyprint-override"><code><script setup lang="ts">
</script>
<template>
  <VApp>
    <VLayout class="layout-wrapper layout-nav-type-vertical">
      <RouterView />
    </VLayout>
  </VApp>
  <notifications position="top center" />
</template>
</code>```

In this project I am using the cms outsource Materio page so I added a menu bar component on the right side of the page as follows:
DrawerContent.vue

```<code><template>
  <!--  Nav header -->
  <div class="nav-header">
    <RouterLink
      to="/"
      class="app-logo d-flex align-center gap-x-3 app-title-wrapper"
    >
      <!-- ℹ You can also use img tag or VImg here -->
      <img style="height: 50px" src="../../assets/logogostream.png" alt="">

      <Transition name="vertical-nav-app-title">
        <h1 class="font-weight-semibold leading-normal text-xl text-uppercase">
         GoGame
        </h1>
      </Transition>
    </RouterLink>
  </div>
  <!--  Nav items -->
  <ul>
    <VerticalNavLink
      :item="{
        title: 'Dashboard',
        to: 'index',
        icon: { icon: 'mdi-home-outline' }
      }"
    />
    <VerticalNavLink
      :item="{
        title: 'Account Settings',
        to: 'account-settings',

        icon: { icon: 'mdi-account-cog-outline' }
      }"
    />
    <!--  Pages -->
    <VerticalNavSectionTitle :item="{ heading: 'Pages' }" />

    <VerticalNavLink
      :item="{
        title: 'Templates',
        to: 'templates',
        // target: '_blank',
        icon: { icon: 'mdi-table' }
      }"
    />
    <!--  User Interface -->
    <VerticalNavSectionTitle :item="{ heading: 'User Interface' }" />

    <VerticalNavLink
      :item="{
        title: 'Icons',
        to: 'icons',
        icon: { icon: 'mdi-eye-outline' }
      }"
    />
  </ul>
</code>```

There are two problems with me:

First, when I click on See Detail it goes to detail page but it seems that it doesn't go to RouterView in defaultLayout page so it doesn't show component navar and right menu list.

Second is that i want when i go to the detail page of the template i want the right menu bar titled "templates" to still be active(css), but now i see it only active when i go to the correct template page and i go to the detail page it doesn't match. Is there any solution for me? Thanks

Body:
I am using vue router and when I use router-link it is not putting my page in the desired  position

I'm using a Vite plugin with vue-router in vue 3 to navigate my cms page, but when I set the to="/detail" attribute, they still show all the components, but on this test page I want to set it is a child page with detail properties with id of previous so in parent page i used **<RouterLink
:to="{ name: 'DetailTemplate', params: { id: record._id } }"

See Detail** but when it jumps to the detail page, it no longer has the 2 Nava components above and the menu list on the right
Here is the code in rourouter.js:

import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter, createWebHistory } from 'vue-router'
import routes from '~pages'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...setupLayouts(routes),
  {
    path: '/detail/:id', name: 'DetailTemplate', component: () => import('../pages/test.vue')
 }
  ],
  scrollBehavior() {
    return { top: 0 }
  },
})
export default router

And I have a default layout page that looks like this:
component/defaulLayout.vue

<template>
  <VerticalNavLayout>

    <template #navbar>
      <VSpacer />

    </template>

    <template #navigation-drawer-content>
      <DrawerContent />
    </template>

      <RouterView />

    <template #footer>

    </template>
  </VerticalNavLayout>
</template>

This is the parent page containing the overview information
pages/templates.vue

<template>

      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'title'">

          <RouterLink tag="a" :to="{ name: 'DetailTemplate', params: { id: record._id } }">{{ text }} See Detail</RouterLink> /<---/
        </template>
        <template v-if="column.dataIndex === 'fullname'">
          {{ text }}
        </template>
        <template v-if="column.dataIndex === 'address'">
          {{ record.address }}
        </template>
      </template>

...
<template>

And here is the App.vue page

<template>
  <VApp>
    <VLayout class="layout-wrapper layout-nav-type-vertical">
      <RouterView />
    </VLayout>
  </VApp>
  <notifications position="top center" />
</template>

In this project I am using the cms outsource Materio page so I added a menu bar component on the right side of the page as follows:
DrawerContent.vue

<template>

    <RouterLink
      to="/"
      class="app-logo d-flex align-center gap-x-3 app-title-wrapper"
    >

      <Transition name="vertical-nav-app-title">

         GoGame

      </Transition>
    </RouterLink>

    <VerticalNavLink
      :item="{
        title: 'Dashboard',
        to: 'index',
        icon: { icon: 'mdi-home-outline' }
      }"
    />
    <VerticalNavLink
      :item="{
        title: 'Account Settings',
        to: 'account-settings',

        icon: { icon: 'mdi-account-cog-outline' }
      }"
    />

    <VerticalNavSectionTitle :item="{ heading: 'Pages' }" />

    <VerticalNavLink
      :item="{
        title: 'Templates',
        to: 'templates',
        // target: '_blank',
        icon: { icon: 'mdi-table' }
      }"
    />

    <VerticalNavSectionTitle :item="{ heading: 'User Interface' }" />

    <VerticalNavLink
      :item="{
        title: 'Icons',
        to: 'icons',
        icon: { icon: 'mdi-eye-outline' }
      }"
    />

There are two problems with me:

First, when I click on See Detail it goes to detail page but it seems that it doesn't go to RouterView in defaultLayout page so it doesn't show component navar and right menu list.

Second is that i want when i go to the detail page of the template i want the right menu bar titled "templates" to still be active(css), but now i see it only active when i go to the correct template page and i go to the detail page it doesn't match. Is there any solution for me? Thanks


问:
Basic Email validation in keycloak reset credentials
How can we validate if the given email in reset credentials form is a valid email, not to check if he's a registered user but to validate if the email format is right.
How can we handle this?

I tried adding username validation in flows of authentication for reset credentials, it validates the email as expected but when the email format is wrong it takes me to different page and throws below error.
{"error":"invalid_grant","error_description":"Invalid user credentials"}

But I want to handle it in the same page with custom error messages.
Any solutions to this?


问:
authorization token sending on get but not on post
SO basically i am working on axios and i am sending a token in authorization header in both get and post but i can get the token if i do get request but not if i do it with post i didnt recieve the header on post i am sharing the code here please see the issue

GET request

```<code> axios
              .get(
                "https://localhost:8000/user/delete/"+data+"",
                {
                  headers: {Authorization:`Bearer ${localStorage.getItem('token')}`}
                }
              )
              .then((response) => {
                console.log(response)
              if(response.data.status===200){
                window.location.href='/dashboard'
              }
              else if(response.data.status===404){
                console.log('Your token has been expired')
              }
              else if(response.data.status===403){
                console.log('Incorrect Token')
              }
              else if(response.data.status===402){
                console.log('Token does not matched')
              }
          })
        }

    }
</code>```

POST

```<code>      axios
         .post(
                "https://localhost:8000/user/update",
                {
                   id:document.getElementById("id").value,
name:document.getElementById("name").value,
email:document.getElementById("email").value,
password:document.getElementById("password").value,
retype:document.getElementById("retype").value,
contact:document.getElementById("contact").value
                },
                {
                  headers: {
                    "Content-type": "application/json",
                    "Authorization":`Bearer${localStorage.getItem('token')}`
                  }
              },
              )
              .then((response) => {
                window.location.href='/dashboard'
          })
        }
</code>```

Body:
SO basically i am working on axios and i am sending a token in authorization header in both get and post but i can get the token if i do get request but not if i do it with post i didnt recieve the header on post i am sharing the code here please see the issue

GET request

 axios
              .get(
                "https://localhost:8000/user/delete/"+data+"",
                {
                  headers: {Authorization:`Bearer ${localStorage.getItem('token')}`}
                }
              )
              .then((response) => {
                console.log(response)
              if(response.data.status===200){
                window.location.href='/dashboard'
              }
              else if(response.data.status===404){
                console.log('Your token has been expired')
              }
              else if(response.data.status===403){
                console.log('Incorrect Token')
              }
              else if(response.data.status===402){
                console.log('Token does not matched')
              }
          })
        }

    }

POST

      axios
         .post(
                "https://localhost:8000/user/update",
                {
                   id:document.getElementById("id").value,
name:document.getElementById("name").value,
email:document.getElementById("email").value,
password:document.getElementById("password").value,
retype:document.getElementById("retype").value,
contact:document.getElementById("contact").value
                },
                {
                  headers: {
                    "Content-type": "application/json",
                    "Authorization":`Bearer${localStorage.getItem('token')}`
                  }
              },
              )
              .then((response) => {
                window.location.href='/dashboard'
          })
        }


问:
Freezing code and including .libs folders
I have a successful build of a python 3.9 program I'm working on. However, the following folders need to be manually copied into the lib folder;

pyproj.libs

scipy.libs

Shapely.libs

I have the setup.py, how do I set it up so that these folders are copied to the correct location?

Here's my options definition:

```<code>options = {
    'build_exe': {
        'includes': [
                    ],
        'packages': [
                     'PyQt5',
                     'scipy',
                     'os',
                     'sys',
                     'datetime',
                     'pandas',
                     'scipy.spatial.distance',
                     'open3d',
                     'geopandas',
                     'laspy',
                     'numpy',
                     'alphashape',
                     'shapely.speedups'

                    ],
        'excludes': [
            'tkinter', 'matplotlib', 'sqlite3'
        ]
    }
}
</code>```

Body:
I have a successful build of a python 3.9 program I'm working on. However, the following folders need to be manually copied into the lib folder;

pyproj.libs

scipy.libs

Shapely.libs

I have the setup.py, how do I set it up so that these folders are copied to the correct location?

Here's my options definition:

options = {
    'build_exe': {
        'includes': [
                    ],
        'packages': [
                     'PyQt5',
                     'scipy',
                     'os',
                     'sys',
                     'datetime',
                     'pandas',
                     'scipy.spatial.distance',
                     'open3d',
                     'geopandas',
                     'laspy',
                     'numpy',
                     'alphashape',
                     'shapely.speedups'

                    ],
        'excludes': [
            'tkinter', 'matplotlib', 'sqlite3'
        ]
    }
}


问:
not changing the text color inputted from user
i want to change the prompt color to red and the inputted color to blue but it is not working. I am using prompt-toolkit for this purpose

```<code>prompt_style = styles.Style.from_dict({
    'input_prompt': 'fg:yellow',
    'input' : 'fg:blue',
    'prompt':'fg:red'
})
command = session.prompt(">>>>",style=prompt_style)
</code>```

it changes the color of >>>> to red but anything else does makes any change to the prompt. can you tell me how to change the text inputted by user to blue also.

Body:
i want to change the prompt color to red and the inputted color to blue but it is not working. I am using prompt-toolkit for this purpose

prompt_style = styles.Style.from_dict({
    'input_prompt': 'fg:yellow',
    'input' : 'fg:blue',
    'prompt':'fg:red'
})
command = session.prompt(">>>>",style=prompt_style)

it changes the color of >>>> to red but anything else does makes any change to the prompt. can you tell me how to change the text inputted by user to blue also.


问:
Bookdown CSS for custom theorem environment numbering
How does one implement a custom theorem environment for HTML output in bookdown that is numbered as "chapter.occurence"? For example, I have defined a "convention" environment.

I placed the following in preamble.tex

\newtheorem{convention}{Convention}[chapter]
```
<p>and in <code>style.css</code></p>
<pre class="lang-css prettyprint-override"><code>.convention {
    position: relative;
    font-style: italic;
}
.convention p{
    display: inline;
}

.convention:before {
  counter-increment: convention;
  content: "Convention: " "." counter(convention) " (" attr(name) ").";
  font-weight: bold;
  font-style: normal;
}
div.convention {
  font-style: italic;
}
</code>```

If I provide my second convention in chapter one (file 01-vectors-and-matrices.Rmd) as

::: {.convention #something name="Something" data-latex=""}
Something.
:::
```

then the LaTeX output works as expected. The HTML output, however, does not produce the expected result. With the HTML (GitBook) output, I have the following issues:

counter(convention) in the CSS does not appear to count the number of convention environments in the chapter, and

I don't know how to refer to the chapter number in CSS.

Both problems reflect my inexperience with CSS. Ideally, I would copy the style of the standard theorem environments (e.g. definition, corollary, remark). But I cannot find the CSS that defines these environments' styles.

Body:
How does one implement a custom theorem environment for HTML output in bookdown that is numbered as "chapter.occurence"? For example, I have defined a "convention" environment.

I placed the following in preamble.tex

\newtheorem{convention}{Convention}[chapter]

and in style.css

.convention {
    position: relative;
    font-style: italic;
}
.convention p{
    display: inline;
}

.convention:before {
  counter-increment: convention;
  content: "Convention: " "." counter(convention) " (" attr(name) ").";
  font-weight: bold;
  font-style: normal;
}
div.convention {
  font-style: italic;
}

If I provide my second convention in chapter one (file 01-vectors-and-matrices.Rmd) as

::: {.convention #something name="Something" data-latex=""}
Something.
:::

then the LaTeX output works as expected. The HTML output, however, does not produce the expected result. With the HTML (GitBook) output, I have the following issues:

counter(convention) in the CSS does not appear to count the number of convention environments in the chapter, and

I don't know how to refer to the chapter number in CSS.

Both problems reflect my inexperience with CSS. Ideally, I would copy the style of the standard theorem environments (e.g. definition, corollary, remark). But I cannot find the CSS that defines these environments' styles.


问:
Switch language at runtime on a multilanguage site using python-i18n
I have created a multi-language DASH app via python-i18n and yml files as described by Arjan in:
https://www.youtube.com/watch?v=L_KlPZ5qBOU

The intention is to translate the text (headers, labels, etc) in the app and allow the user to change the language via a dropdown. Everything works fine when manually changing the LOCALE setting before running the app.

According to the attached video (at about 4:27) it should be possible to use a callback to update the language. I have the dropdown and callbacks set up and use

```<code>dcc.Location(id='url', refresh=True)
</code>```

to trigger the change but after the refresh the original langauge persists.

The problem seems to be that

```<code>    i18n.set("locale", loc_code)
    i18n.load_path.append(locale_path)
</code>```

are executed early in the initial loading and regardless if those are changed at runtime the reload/refresh does not seem to activate after the refresh performed by dcc.Location.

Any ideas on how this should be done?

I have tried several ways to set this via callbacks:

```<code>    i18n.set("locale", loc_code)
    i18n.load_path.append(locale_path)
</code>```

but is seems that the original language setting persists.

It is mentioned that these i18n lines should be called before the defining the app.layout. Not sure what part of the app that the reload affects and how to make that incorporate the language change.

% Update
The following code works as intended, but my large app has another structure with subfolders and separate files for callbacks/layout/etc. Thus it appears that the problem is linked to the structure.

```<code>import dash
from dash.dependencies import Input, Output
from dash import dcc, html

import i18n
from pathlib import Path

def setlang(loc):
    global LOCALE
    LOCALE = loc
    i18n.set("locale", LOCALE)
    i18n.load_path.append(locale_path)

# initial language code
LOCALE = "se"
# path to yml files with translations
parent_directory = Path(__file__).parent
locale_path = parent_directory / "locale"

setlang(LOCALE)

INITIAL = '1+1=2'

app = dash.Dash(__name__)

def serve_layout():
    return html.Div([
        dcc.Location(id='url', refresh=True),
        i18n.t("general.designation"),
        html.Br(),
        dcc.Input(id='important-info', value=INITIAL, persistence=True),
        html.Button("Forget it!", id='clear-info'),
        dcc.Dropdown(
                id='ldropdown',
                options=['se', 'en'],
                placeholder='placeholder_text')
    ])

app.layout = serve_layout

@app.callback(
   Output("url", "href"),
   Input(component_id='ldropdown', component_property='value'),
   prevent_initial_call=True
)
def create_dow(lang_code_dd):
    setlang(lang_code_dd)
    return "/"

@app.callback(
    Output('important-info', 'value'),
    Input('clear-info', 'n_clicks')
)
def clear_persistence(n):
    return INITIAL if n else dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)
</code>```

Body:
I have created a multi-language DASH app via python-i18n and yml files as described by Arjan in:
https://www.youtube.com/watch?v=L_KlPZ5qBOU

The intention is to translate the text (headers, labels, etc) in the app and allow the user to change the language via a dropdown. Everything works fine when manually changing the LOCALE setting before running the app.

According to the attached video (at about 4:27) it should be possible to use a callback to update the language. I have the dropdown and callbacks set up and use

dcc.Location(id='url', refresh=True)

to trigger the change but after the refresh the original langauge persists.

The problem seems to be that

    i18n.set("locale", loc_code)
    i18n.load_path.append(locale_path)

are executed early in the initial loading and regardless if those are changed at runtime the reload/refresh does not seem to activate after the refresh performed by dcc.Location.

Any ideas on how this should be done?

I have tried several ways to set this via callbacks:

    i18n.set("locale", loc_code)
    i18n.load_path.append(locale_path)

but is seems that the original language setting persists.

It is mentioned that these i18n lines should be called before the defining the app.layout. Not sure what part of the app that the reload affects and how to make that incorporate the language change.

% Update
The following code works as intended, but my large app has another structure with subfolders and separate files for callbacks/layout/etc. Thus it appears that the problem is linked to the structure.

import dash
from dash.dependencies import Input, Output
from dash import dcc, html

import i18n
from pathlib import Path

def setlang(loc):
    global LOCALE
    LOCALE = loc
    i18n.set("locale", LOCALE)
    i18n.load_path.append(locale_path)

# initial language code
LOCALE = "se"
# path to yml files with translations
parent_directory = Path(__file__).parent
locale_path = parent_directory / "locale"

setlang(LOCALE)

INITIAL = '1+1=2'

app = dash.Dash(__name__)

def serve_layout():
    return html.Div([
        dcc.Location(id='url', refresh=True),
        i18n.t("general.designation"),
        html.Br(),
        dcc.Input(id='important-info', value=INITIAL, persistence=True),
        html.Button("Forget it!", id='clear-info'),
        dcc.Dropdown(
                id='ldropdown',
                options=['se', 'en'],
                placeholder='placeholder_text')
    ])

app.layout = serve_layout

@app.callback(
   Output("url", "href"),
   Input(component_id='ldropdown', component_property='value'),
   prevent_initial_call=True
)
def create_dow(lang_code_dd):
    setlang(lang_code_dd)
    return "/"

@app.callback(
    Output('important-info', 'value'),
    Input('clear-info', 'n_clicks')
)
def clear_persistence(n):
    return INITIAL if n else dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)


问:
How to fix two navigationcontainer conflict in react-native
I want to use the ZegoCloudUIkit for voice call so after setting up my project, I imported the ZegoCloudUIKit and applied it to my existing code. I runned it and was getting errors.

first error message:

```<code> Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
</code>```

so I commentted the navigationContainer Component that was nested to the ZegoUIkit component and I got a different error but the console did not through the error instead from the mobile app.
secode error message:

this is my App.tsx file

```<code>import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import {toast, Toasts} from '@backpackapp-io/react-native-toast';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useDispatch, useSelector} from 'react-redux';
import {
    ZegoUIKitPrebuiltCallWithInvitation,
    ZegoInvitationType,
    ONE_ON_ONE_VIDEO_CALL_CONFIG,
    ONE_ON_ONE_VOICE_CALL_CONFIG,
    GROUP_VIDEO_CALL_CONFIG,
    GROUP_VOICE_CALL_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-call-rn';
import ZegoUIKitSignalingPlugin from '@zegocloud/zego-uikit-signaling-plugin-rn';
import {zego_appid, zego_appkey} from '@env';

import Main from './src/Main';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {returnListOfProviders} from './src/redux/provider/listProvider';
import {provider} from './src/apis/endpoints';
import {RootState} from './src/types/redux.type';
import whichSignedUser from './src/utils/whichSignedUser';
import IClientData from './src/interfaces/clientData';
import IProviderData from './src/interfaces/providerData';
import {
    NavigationContainer,
    useNavigation,
    useNavigationContainerRef,
} from '@react-navigation/native';
import {isSigned} from './src/redux/auth/isSigned';
import ActivityLoader from './src/components/widgets/ActivityLoader';
import {INavigateProps} from './src/interfaces';
import {Text} from 'react-native-animatable';

const App = () => {
    const dispatch = useDispatch();
    React.useEffect(() => {
        const init = async () => {
            try {
                // const response = await listProvider();
                const response = await axios.get(provider);

                await AsyncStorage.setItem(
                    'list_provider',
                    JSON.stringify(response.data)
                );

                dispatch(
                    returnListOfProviders(
                        JSON.parse(await AsyncStorage.getItem('list_provider'))
                    )
                );
            } catch (error) {
                if (error.message === 'Network Error') {
                    toast('Network error!');
                } else if (error.response) {
                    // Request made but the server responded with an error
                    toast('Ouch... Something went wrong.');
                } else if (error.request) {
                    // Request made but no response is received from the server.
                    toast('Request exception: We are sorry for this!');
                } else {
                    // Error occured while setting up the request
                    toast('An error occured!');
                }
            }
        };

        init().finally(async () => {
            await RNBootSplash.hide({fade: true});
        });
    }, [dispatch]);

    return (
        <SafeAreaProvider>
            <GestureHandlerRootView style={styles.container}>
                <ZegoUIKitPrebuiltCallWithInvitation
                    independent
                    appSign={zego_appkey}
                    appID={zego_appid}
                    userID={'ALi'}
                    callID={'ALi'}
                    userName={'ALi'}
                    // callID={userData?.id}
                    // userID={userData?.phone_number} // userID can be something like a phone number or the user id on your own user system.
                    // userName={`${userData?.first_name} ${userData?.last_name}`}
                    ringtoneConfig={{
                        incomingCallFileName: 'zego_incoming.mp3',
                        outgoingCallFileName: 'zego_outgoing.mp3',
                    }}
                    requireConfig={(data: any) => {
                        const config =
                            data.invitees.length > 1
                                ? ZegoInvitationType.videoCall === data.type
                                    ? GROUP_VIDEO_CALL_CONFIG
                                    : GROUP_VOICE_CALL_CONFIG
                                : ZegoInvitationType.videoCall === data.type
                                ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                                : ONE_ON_ONE_VOICE_CALL_CONFIG;
                        return config;
                    }}
                    // config={{
                    //  ...ONE_ON_ONE_VOICE_CALL_CONFIG,
                    //  onOnlySelfInRoom: () => {
                    //      navigate('drawer_nav');
                    //  },
                    //  onHangUp: () => {
                    //      navigate('drawer_nav');
                    //  },
                    // }}
                    plugins={[ZegoUIKitSignalingPlugin]} // The signaling plug-in used for call invitation must be set here.
                >
                    {/* <NavigationContainer> */}
                    <Main />
                    <Toasts />
                    {/* </NavigationContainer> */}
                </ZegoUIKitPrebuiltCallWithInvitation>
            </GestureHandlerRootView>
        </SafeAreaProvider>
    );
};

const styles = StyleSheet.create({
    container: {flex: 1},
});

export default App;

</code>```

while these are the project dependencies:

```<code>"dependencies": {
    "@backpackapp-io/react-native-toast": "^0.8.0",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-community/picker": "^1.8.1",
    "@react-navigation/bottom-tabs": "^6.3.3",
    "@react-navigation/drawer": "^6.4.4",
    "@react-navigation/material-top-tabs": "^6.2.4",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.8",
    "@reduxjs/toolkit": "^1.8.6",
    "@types/react-native-vector-icons": "^6.4.12",
    "@zegocloud/zego-uikit-prebuilt-call-rn": "^1.3.1",
    "@zegocloud/zego-uikit-rn": "^1.4.10",
    "@zegocloud/zego-uikit-signaling-plugin-rn": "^1.0.4",
    "axios": "0.26.0",
    "react": "18.1.0",
    "react-delegate-component": "^1.0.0",
    "react-native": "0.70.0",
    "react-native-animatable": "^1.3.3",
    "react-native-bootsplash": "^4.3.2",
    "react-native-calendars": "^1.1289.0",
    "react-native-date-picker": "^4.2.5",
    "react-native-document-picker": "^8.1.1",
    "react-native-dotenv": "^3.4.2",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-image-picker": "^4.10.1",
    "react-native-kommunicate-chat": "^1.6.8",
    "react-native-pager-view": "^6.0.2",
    "react-native-push-notification-popup": "^1.6.1",
    "react-native-quick-base64": "^2.0.5",
    "react-native-reanimated": "^2.10.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-select-dropdown": "^2.0.4",
    "react-native-sound": "^0.11.2",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-redux": "^8.0.4",
    "zego-express-engine-reactnative": "^3.1.2",
    "zego-zim-react-native": "^2.5.0"
  },
</code>```

other info:

```<code>info Fetching system and libraries information...
System:
    OS: Linux 5.15 Zorin OS 16.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 3.45 GB / 7.53 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.18.1 - /tmp/yarn--1673425542734-0.8217341778464808/node
    Yarn: 1.22.19 - /tmp/yarn--1673425542734-0.8217341778464808/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v16.18.1/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 17.0.5 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.0 => 0.70.0
  npmGlobalPackages:
    *react-native*: Not Found
</code>```

I am trying to achieve something similar to the article here.

In my case I want to have a one_on_one_voice_call where a caller can invite the other person on a call.

Body:
I want to use the ZegoCloudUIkit for voice call so after setting up my project, I imported the ZegoCloudUIKit and applied it to my existing code. I runned it and was getting errors.

first error message:

 Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.

so I commentted the navigationContainer Component that was nested to the ZegoUIkit component and I got a different error but the console did not through the error instead from the mobile app.
secode error message:

this is my App.tsx file

import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import {toast, Toasts} from '@backpackapp-io/react-native-toast';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useDispatch, useSelector} from 'react-redux';
import {
    ZegoUIKitPrebuiltCallWithInvitation,
    ZegoInvitationType,
    ONE_ON_ONE_VIDEO_CALL_CONFIG,
    ONE_ON_ONE_VOICE_CALL_CONFIG,
    GROUP_VIDEO_CALL_CONFIG,
    GROUP_VOICE_CALL_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-call-rn';
import ZegoUIKitSignalingPlugin from '@zegocloud/zego-uikit-signaling-plugin-rn';
import {zego_appid, zego_appkey} from '@env';

import Main from './src/Main';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {returnListOfProviders} from './src/redux/provider/listProvider';
import {provider} from './src/apis/endpoints';
import {RootState} from './src/types/redux.type';
import whichSignedUser from './src/utils/whichSignedUser';
import IClientData from './src/interfaces/clientData';
import IProviderData from './src/interfaces/providerData';
import {
    NavigationContainer,
    useNavigation,
    useNavigationContainerRef,
} from '@react-navigation/native';
import {isSigned} from './src/redux/auth/isSigned';
import ActivityLoader from './src/components/widgets/ActivityLoader';
import {INavigateProps} from './src/interfaces';
import {Text} from 'react-native-animatable';

const App = () => {
    const dispatch = useDispatch();
    React.useEffect(() => {
        const init = async () => {
            try {
                // const response = await listProvider();
                const response = await axios.get(provider);

                await AsyncStorage.setItem(
                    'list_provider',
                    JSON.stringify(response.data)
                );

                dispatch(
                    returnListOfProviders(
                        JSON.parse(await AsyncStorage.getItem('list_provider'))
                    )
                );
            } catch (error) {
                if (error.message === 'Network Error') {
                    toast('Network error!');
                } else if (error.response) {
                    // Request made but the server responded with an error
                    toast('Ouch... Something went wrong.');
                } else if (error.request) {
                    // Request made but no response is received from the server.
                    toast('Request exception: We are sorry for this!');
                } else {
                    // Error occured while setting up the request
                    toast('An error occured!');
                }
            }
        };

        init().finally(async () => {
            await RNBootSplash.hide({fade: true});
        });
    }, [dispatch]);

    return (
        <SafeAreaProvider>
            <GestureHandlerRootView style={styles.container}>
                <ZegoUIKitPrebuiltCallWithInvitation
                    independent
                    appSign={zego_appkey}
                    appID={zego_appid}
                    userID={'ALi'}
                    callID={'ALi'}
                    userName={'ALi'}
                    // callID={userData?.id}
                    // userID={userData?.phone_number} // userID can be something like a phone number or the user id on your own user system.
                    // userName={`${userData?.first_name} ${userData?.last_name}`}
                    ringtoneConfig={{
                        incomingCallFileName: 'zego_incoming.mp3',
                        outgoingCallFileName: 'zego_outgoing.mp3',
                    }}
                    requireConfig={(data: any) => {
                        const config =
                            data.invitees.length > 1
                                ? ZegoInvitationType.videoCall === data.type
                                    ? GROUP_VIDEO_CALL_CONFIG
                                    : GROUP_VOICE_CALL_CONFIG
                                : ZegoInvitationType.videoCall === data.type
                                ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                                : ONE_ON_ONE_VOICE_CALL_CONFIG;
                        return config;
                    }}
                    // config={{
                    //  ...ONE_ON_ONE_VOICE_CALL_CONFIG,
                    //  onOnlySelfInRoom: () => {
                    //      navigate('drawer_nav');
                    //  },
                    //  onHangUp: () => {
                    //      navigate('drawer_nav');
                    //  },
                    // }}
                    plugins={[ZegoUIKitSignalingPlugin]} // The signaling plug-in used for call invitation must be set here.
                >
                    {/* <NavigationContainer> */}

                    <Toasts />
                    {/* </NavigationContainer> */}
                </ZegoUIKitPrebuiltCallWithInvitation>
            </GestureHandlerRootView>
        </SafeAreaProvider>
    );
};

const styles = StyleSheet.create({
    container: {flex: 1},
});

export default App;

while these are the project dependencies:

"dependencies": {
    "@backpackapp-io/react-native-toast": "^0.8.0",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-community/picker": "^1.8.1",
    "@react-navigation/bottom-tabs": "^6.3.3",
    "@react-navigation/drawer": "^6.4.4",
    "@react-navigation/material-top-tabs": "^6.2.4",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.8",
    "@reduxjs/toolkit": "^1.8.6",
    "@types/react-native-vector-icons": "^6.4.12",
    "@zegocloud/zego-uikit-prebuilt-call-rn": "^1.3.1",
    "@zegocloud/zego-uikit-rn": "^1.4.10",
    "@zegocloud/zego-uikit-signaling-plugin-rn": "^1.0.4",
    "axios": "0.26.0",
    "react": "18.1.0",
    "react-delegate-component": "^1.0.0",
    "react-native": "0.70.0",
    "react-native-animatable": "^1.3.3",
    "react-native-bootsplash": "^4.3.2",
    "react-native-calendars": "^1.1289.0",
    "react-native-date-picker": "^4.2.5",
    "react-native-document-picker": "^8.1.1",
    "react-native-dotenv": "^3.4.2",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-image-picker": "^4.10.1",
    "react-native-kommunicate-chat": "^1.6.8",
    "react-native-pager-view": "^6.0.2",
    "react-native-push-notification-popup": "^1.6.1",
    "react-native-quick-base64": "^2.0.5",
    "react-native-reanimated": "^2.10.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-select-dropdown": "^2.0.4",
    "react-native-sound": "^0.11.2",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-redux": "^8.0.4",
    "zego-express-engine-reactnative": "^3.1.2",
    "zego-zim-react-native": "^2.5.0"
  },

other info:

info Fetching system and libraries information...
System:
    OS: Linux 5.15 Zorin OS 16.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 3.45 GB / 7.53 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.18.1 - /tmp/yarn--1673425542734-0.8217341778464808/node
    Yarn: 1.22.19 - /tmp/yarn--1673425542734-0.8217341778464808/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v16.18.1/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 17.0.5 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.0 => 0.70.0
  npmGlobalPackages:
    *react-native*: Not Found

I am trying to achieve something similar to the article here.

In my case I want to have a one_on_one_voice_call where a caller can invite the other person on a call.